Not Getting on the right view
bncvnc opened this issue · 2 comments
bncvnc commented
i have Putted it in my view which is a button and the button is at bottom but it makes its apperence at the top of my view
i have provided screenshots on which i have shown where it has to be and where it is showing
import React, { Fragment, Back } from "react";
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from "react-native-responsive-screen";
import { StyleSheet, ScrollView, TouchableOpacity, View, Image, Text } from "react-native";
import styles from "./styles";
import images from '../../assets/images';
import UserAvatar from 'react-native-user-avatar';
import {ImageUrl} from "../variables/variables";
import IconI from "react-native-vector-icons/Ionicons";
import moment from "moment";
import selfie_img from "../../images/Icons/selfie_img.png";
import DatePicker from "react-native-datepicker";
import { copilot, walkthroughable, CopilotStep } from 'react-native-copilot';
const WalkthroughableText = walkthroughable(Text); //Making a WalkthroughableText
const WalkthroughableView = walkthroughable(View);
const DocumentsImageUpload = (props) => {
const {
leftIcon,
onPress,
buttonTitle,
datePicker,
date,
datePickerTittle,
onDatePickerChange,
isCapliton
} = props;
return (
<React.Fragment>
{isCapliton ?<CopilotStep
text="This is the heading with some style"
order={1}
imageSource={selfie_img}
name="firstUniqueKey">
<WalkthroughableView
style={styles.UploadMainView}>
<View
style={styles.UploadMainInner}>
<View
style={styles.LeftImageOuterView}>
<Image
style={styles.UploadImageIcons}
source={leftIcon}
/>
</View>
<TouchableOpacity onPress={onPress} style={[styles.UploadButtonStyle,{width: datePicker?wp('80%'):wp('90%')}]}>
{buttonTitle && <Text
style={styles.UploadButtonTextStyle}>
{buttonTitle}
</Text>}
{datePicker && <DatePicker
style={styles.DatePickerStyle}
date={date}
mode="date"
placeholder={datePickerTittle}
format="DD-MM-YYYY"
minDate={new Date}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateInput:
{
borderWidth: 0,
},
placeholderText: {
fontSize: wp('4%'),
color: '#fff',
},
dateText: {
fontSize: wp('5%'),
color: '#fff',
},
dateIcon: {
display:'none'
},
}}
onDateChange={(date) => {
onDatePickerChange(date);
}}
/> }
</TouchableOpacity>
</View>
</WalkthroughableView>
</CopilotStep> :
<View
style={styles.UploadMainView}>
<View
style={styles.UploadMainInner}>
<View
style={styles.LeftImageOuterView}>
<Image
style={styles.UploadImageIcons}
source={leftIcon}
/>
</View>
<TouchableOpacity onPress={onPress} style={[styles.UploadButtonStyle,{width: datePicker?wp('80%'):wp('90%')}]}>
{buttonTitle && <Text
style={styles.UploadButtonTextStyle}>
{buttonTitle}
</Text>}
{datePicker && <DatePicker
style={styles.DatePickerStyle}
date={date}
mode="date"
placeholder={datePickerTittle}
format="DD-MM-YYYY"
minDate={new Date}
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateInput:
{
borderWidth: 0,
},
placeholderText: {
fontSize: wp('4%'),
color: '#fff',
},
dateText: {
fontSize: wp('5%'),
color: '#fff',
},
dateIcon: {
display:'none'
},
}}
onDateChange={(date) => {
onDatePickerChange(date);
}}
/> }
</TouchableOpacity>
</View>
</View>
}
</React.Fragment>
);
};
export default DocumentsImageUpload;
Environment
- Device: [e.g. iPhone 11 Simulator]
react-native-copilot
: [e.g. v2.5.0]react-native
: 0.61.5react-native-svg
: ^9.13.6
AboutReact commented
Same with
"react-native": "0.63.2",
"react-native-svg": "^12.1.0",
"react-native-copilot": "^2.5.1",
AboutReact commented
Duplicate of #198