mohebifar/react-native-copilot

Not Getting on the right view

bncvnc opened this issue · 2 comments

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.5
  • react-native-svg: ^9.13.6

Simulator Screen Shot - iPhone 11 - 2020-09-07 at 14 34 58
Simulator Screen Shot - iPhone 11 - 2020-09-07 at 14 39 17

Same with
"react-native": "0.63.2",
"react-native-svg": "^12.1.0",
"react-native-copilot": "^2.5.1",

Duplicate of #198