Open bncvnc opened 4 years ago
Current Behavior
Input Code
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Fragment} from 'react'; import image from '../../../images/newIcons/unclefixer-logo.png'; import selfie_img from '../../../images/Icons/selfie_img.png'; import car_reg from '../../../images/Icons/car_reg.png'; import date_img from '../../../images/Icons/expire_drive.png'; import Drive_img from '../../../images/Icons/drive_img.png'; import card_icon from '../../../images/Icons/card_icon.png'; import gif from '../../../images/uncle111.gif'; import doc_icon from '../../../images/Icons/doc_icon.png'; import validate from '../../../Validate/Validate'; import AlertSuccess from '../../../components/alertBoxs/successAlert'; import AlertError from '../../../components/alertBoxs/errorAlert'; import { registerTechnician, getCountrysData, SearchCountry, SaveRidersData, uiStopLoading, ShowSuccessAlert, RefreshTech, uiStartLoading } from '../../../store/actions/index'; import flipImage from '../../../images/mainpage/servicesCustomer.jpg'; import ImagePicker from 'react-native-image-picker'; import { FlatGrid } from 'react-native-super-grid'; import {connect} from 'react-redux'; import SplashScreen from 'react-native-splash-screen'; import DatePicker from 'react-native-datepicker' import { widthPercentageToDP as wp, heightPercentageToDP as hp, } from 'react-native-responsive-screen'; import { StyleSheet, ScrollView, FlatList, View, TouchableOpacity, Image, Text, Modal, ImageBackground, TextInput, Platform, TouchableWithoutFeedback, Alert, KeyboardAvoidingView } from 'react-native'; import {Colors} from 'react-native/Libraries/NewAppScreen'; import { URI } from '../../../components/variables/variables'; import OfflineNotice from '../../../components/OffileNotice/OffileNotice'; import {Navigation} from "react-native-navigation"; import ImageCropPicker from 'react-native-image-crop-picker'; const axios = require('axios'); import { copilot, walkthroughable, CopilotStep } from 'react-native-copilot'; const WalkthroughableText = walkthroughable(Text); //Making a WalkthroughableText const WalkthroughableImage = walkthroughable(Image); //Making a WalkthroughableImage const WalkthroughView = walkthroughable(View); const WalkthroughTouchable = walkthroughable(TouchableOpacity); class BikeDocuments extends React.Component { constructor(props) { super(props); SplashScreen.hide(); this.props.getCountrt(); this.state = { Services:[], Selected:[], selectedItems : [], sub_categoryies:[], disableClick:false, screenHeight:0, carRigSelected:true, pickerSelection: this.props.language.selectService, showWebCategory:false, pickerDisplayed: false, pickText:false, checkCode:false, pickerSelection1: this.props.language.Country, pickerDisplayed1: false, pickText1:false, pickerSelection2: this.props.language.cityTown, pickerDisplayed2: false, pickText2:false, idcard:false, country_id:0, verifiedImage:false, numberFocused:false, numberBlured:false, visible:false, pickImage:[], pickImageVerified:[], UploadSlfie:[], UploadIdCard:[], DrivingLicence:[], CarImages:[], CarRegisterationImage:[], selectedWeb:false, LiceneExpiration:'', DrivingRegisterationExpiration:'', states:[], inputs:{ myNumber:{ value:'', valid:false, validationRules:{ minLength:9 }, touched:false, warningText:'Please Enter Numbers Only And Minimum numbers must be 9' } } }; } setPickerValue(newValue, selection,text) { let c = selection; this.setState({ [c]: newValue, [text]:true, pickerDisplayed:false, pickerDisplayed1:false, pickerDisplayed2:false }); // this.togglePicker(); } togglePicker(d) { this.setState({ pickerDisplayed: !this.state.pickerDisplayed, }); } togglePicker1(d) { this.setState({ pickerDisplayed1: !this.state.pickerDisplayed1, }); } togglePicker2(d) { this.setState({ pickerDisplayed2: !this.state.pickerDisplayed2, }); } pickImageHandler = () =>{ ImagePicker.showImagePicker({ title:'Please Pick An Image', maxWidth:800, maxHeight:600 }, res => { if(res.didCancel) { console.log('User Canceled') } else if(res.error) { console.log('Error', res.error) }else { this.setState(prevState => { return{ pickImage: prevState.pickImage.concat({ key: Math.random(), uri:res.uri, source:res.data, filesize:res.fileSize }) } }) // this.props.onImageSelect({uri:res.uri,base64:res.data}); } }); } UploadCNIC = () =>{ ImagePicker.showImagePicker({ title:'Please Pick An Image', maxWidth:800, maxHeight:600 }, res => { if(res.didCancel) { console.log('User Canceled') } else if(res.error) { console.log('Error', res.error) }else { this.setState(prevState => { return{ UploadIdCard: prevState.UploadIdCard.concat({ key: Math.random(), uri:res.uri, source:res.data, filesize:res.fileSize }) } }) // this.props.onImageSelect({uri:res.uri,base64:res.data}); } }); } UploadSlfie = () =>{ ImagePicker.showImagePicker({ title:'Please Pick An Image', maxWidth:800, maxHeight:600 }, res => { if(res.didCancel) { console.log('User Canceled') } else if(res.error) { console.log('Error', res.error) }else { this.setState(prevState => { return{ UploadSlfie: prevState.UploadSlfie.concat({ key: Math.random(), uri:res.uri, source:res.data, filesize:res.fileSize }) } }) // this.props.onImageSelect({uri:res.uri,base64:res.data}); } }); } UploadDrivingLicence = () =>{ ImageCropPicker.openPicker({ multiple: true, includeBase64:true, compressImageMaxWidth:800, compressImageMaxHeight:800, mediaType: "photo", maxFiles:2, }).then(images => { if(Platform.OS==='android'){ var i; var totalImagesSelected =images.length; var alreadySelectedImagesCount =this.state.DrivingLicence.length; if(totalImagesSelected > 1) { totalImagesSelected = 2; } if(alreadySelectedImagesCount == 1){ totalImagesSelected = 2; } var totalMinusable =alreadySelectedImagesCount < 2?0:alreadySelectedImagesCount; var totalAcceptedImages = totalImagesSelected - alreadySelectedImagesCount ; for (i = 0; i < totalAcceptedImages; i++) { console.log(images[i]); this.setState(prevState => { return{ DrivingLicence: prevState.DrivingLicence.concat({ ...images[i] }) } }) } }else{ this.setState(prevState => { return { DrivingLicence: images } }) } // this.submitImage(); }); } UploadDrivingLicenceThroughCamera = () =>{ ImagePicker.launchCamera({ title:'Please Pick An Image', maxWidth:800, maxHeight:600 }, res => { if(res.didCancel) { console.log('User Canceled') } else if(res.error) { console.log('Error', res.error) }else { this.setState(prevState => { return{ DrivingLicence: prevState.DrivingLicence.concat({ key: Math.random(), path:res.uri, data:res.data, size:res.fileSize }) } }) // this.props.onImageSelect({uri:res.uri,base64:res.data}); } }); } UploadCarImages = () =>{ ImageCropPicker.openPicker({ multiple: true, includeBase64:true, compressImageMaxWidth:800, compressImageMaxHeight:800, mediaType: "photo", maxFiles:6, }).then(images => { if(Platform.OS==='android'){ var i; var totalImagesSelected =images.length; var alreadySelectedImagesCount =this.state.CarImages.length; if(totalImagesSelected > 4) { totalImagesSelected = 5; } if(alreadySelectedImagesCount == 1 && totalImagesSelected ==1 ){ totalImagesSelected = 2 ; } if(alreadySelectedImagesCount == 2 && totalImagesSelected ==1 ){ totalImagesSelected = 3 ; } if(alreadySelectedImagesCount == 3 && totalImagesSelected ==1 ){ totalImagesSelected = 4 ; } if(alreadySelectedImagesCount == 4 && totalImagesSelected ==1 ){ totalImagesSelected = 5 ; } var totalMinusable =alreadySelectedImagesCount < 2?0:alreadySelectedImagesCount; var totalAcceptedImages = totalImagesSelected - alreadySelectedImagesCount ; if(totalAcceptedImages < 0){ totalAcceptedImages =alreadySelectedImagesCount- totalImagesSelected; } for (i = 0; i < totalAcceptedImages; i++) { console.log(images[i]); this.setState(prevState => { return{ CarImages: prevState.CarImages.concat({ ...images[i] }) } }) } }else{ this.setState(prevState => { return { CarImages: images } }) } // this.submitImage(); }); } UploadCarImagesThroughCamera = () =>{ ImagePicker.launchCamera({ title:'Please Pick An Image', maxWidth:800, maxHeight:600 }, res => { if(res.didCancel) { console.log('User Canceled') } else if(res.error) { console.log('Error', res.error) }else { this.setState(prevState => { return{ CarImages: prevState.CarImages.concat({ key: Math.random(), path:res.uri, data:res.data, size:res.fileSize }) } }) // this.props.onImageSelect({uri:res.uri,base64:res.data}); } }); } CarRegisterationImage = () =>{ ImageCropPicker.openPicker({ multiple: true, includeBase64:true, compressImageMaxWidth:800, compressImageMaxHeight:800, mediaType: "photo", maxFiles:2, }).then(images => { if(Platform.OS==='android'){ var i; var totalImagesSelected =images.length; var alreadySelectedImagesCount =this.state.CarRegisterationImage.length; if(totalImagesSelected > 1) { totalImagesSelected = 2; } if(alreadySelectedImagesCount == 1){ totalImagesSelected = 2; } var totalMinusable =alreadySelectedImagesCount < 2?0:alreadySelectedImagesCount; var totalAcceptedImages = totalImagesSelected - alreadySelectedImagesCount ; for (i = 0; i < totalAcceptedImages; i++) { console.log(images[i]); this.setState(prevState => { return{ CarRegisterationImage: prevState.CarRegisterationImage.concat({ ...images[i] }) } }) } }else{ this.setState(prevState => { return { CarRegisterationImage: images } }) } // this.submitImage(); }); } CarRegisterationImageThroughCamera = () =>{ ImagePicker.launchCamera({ title:'Please Pick An Image', maxWidth:800, maxHeight:600 }, res => { if(res.didCancel) { console.log('User Canceled') } else if(res.error) { console.log('Error', res.error) }else { this.setState(prevState => { return{ CarRegisterationImage: prevState.CarRegisterationImage.concat({ key: Math.random(), path:res.uri, data:res.data, size:res.fileSize }) } }) // this.props.onImageSelect({uri:res.uri,base64:res.data}); } }); } CarRegisterationImageRemoveImage = (key) =>{ this.setState(prevState => { return{ CarRegisterationImage: prevState.CarRegisterationImage.filter((image,index) => { return index !== key; }) } }) } registerTech = () =>{ let userData = { id:this.props.user.id, UploadSlfie: this.state.UploadSlfie, UploadIdCard:this.state.UploadIdCard, DrivingLicence :JSON.stringify(this.state.DrivingLicence), CarImages:JSON.stringify(this.state.CarImages), LiceneExpiration:this.state.LiceneExpiration, CarRegisterationImage:JSON.stringify(this.state.CarRegisterationImage), DrivingRegisterationExpiration:this.state.DrivingRegisterationExpiration, cid:this.props.componentId, category:this.props.category } this.SubmitBikeDocuments(userData); } RemoveidImage = (key) =>{ this.setState(prevState => { return{ pickImage: prevState.pickImage.filter(image => { return image.key !== key; }) } }) } DrivingLicenceIdRemove = (key) =>{ this.setState(prevState => { return{ DrivingLicence: prevState.DrivingLicence.filter((image,index) => { return index !== key; }) } }) } CarImagesIdRemove = (key) =>{ this.setState(prevState => { return{ CarImages: prevState.CarImages.filter((image,index) => { return index !== key; }) } }) } RemoveidUploadSelfe = (key) =>{ this.setState(prevState => { return{ UploadSlfie: prevState.UploadSlfie.filter(image => { return image.key !== key; }) } }) } RemoveidCNIVSelfe = (key) =>{ this.setState(prevState => { return{ UploadIdCard: prevState.UploadIdCard.filter(image => { return image.key !== key; }) } }) } onChanged(text){ let checkZero = text.replace(/^0+(?=\d)/,''); let number = checkZero.replace(/[^0-9]/g, ''); //console.log(number); let connectedValue = {}; this.setState( prevState =>{ return { inputs: { ...prevState.inputs, myNumber: { ...prevState.inputs.myNumber, value: number, valid: validate( text, prevState.inputs.myNumber.validationRules, connectedValue ), touched:true } } }; }); } onContentSizeChange = (contentWidth,contentHeight) =>{ this.setState({ screenHeight:contentHeight }) } SubmitBikeDocuments = (authdata) =>{ this.props.uiStartLoading(); axios.post(URI + 'api/save/BikeDocuments', { ...authdata }) .then((responseData) => { console.log(responseData); if (responseData.data.success) { this.props.uiStopLoading(); this.props.RefreshTech(); // dispatch(uiStopLoading()); // dispatch(RefreshTech()); alert(this.props.language.document_submited_succesfully) Navigation.pop(this.props.componentId); } else if(!responseData.data.success) { this.props.uiStopLoading(); // dispatch(uiStopLoading()); } }).catch((err)=>{ console.log(err) this.props.uiStopLoading(); }) .done(); } componentDidMount() { } handleStepChange = step => { //Handler, in case we want to handle the step change console.log(`Current step is: ${step.name}`); }; render() { // console.log('testingg'); const lan = this.props.language; let LoginButton =( <View> </View> ); let CarRegService =( <React.Fragment> <CopilotStep // text="New style" imageSource={selfie_img} style={{width:200,height:200}} order={1} name="firstUniqueKey" > <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={selfie_img} /> </View> <TouchableOpacity onPress={()=> { this.props.copilotEvents.on('stepChange', this.handleStepChange); //setting a function to handle the step change event // this.props.start(); this.props.start(false, this.scrollView); if(this.state.UploadSlfie.length < 1){ // this.UploadSlfie(); }else{ alert('You can only upload one picture.'); } }} style={{ width: wp('90%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignSelf: 'flex-start', alignItems: 'flex-start', }}> <Text style={{ justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', fontSize: wp('4%'), padding: wp('4%'), color: '#ffffff', fontFamily: 'Raleway-Medium', }}> Upload Selfie With CNIC </Text> </TouchableOpacity> </View> </WalkthroughView> </CopilotStep> <View style={[styles.wandModalButtons,{marginLeft:wp('5%'),marginRight:wp('5%')}]}> <FlatList data={this.state.UploadSlfie} horizontal={true} renderItem={(info)=>{ //console.log(info) return ( <ImageBackground key={info.index} source={info.item} style={{width:wp('22.5%'),height:wp('14%'),borderRadius:wp('5%'),marginRight:wp('2%')}}> <View style={styles.modelImageText}> <TouchableOpacity onPress={()=>this.RemoveidUploadSelfe(info.item.key)} style={styles.modelImageTextCircle}> <Text style={styles.modelImageTextinner}> Remove </Text> </TouchableOpacity> </View> </ImageBackground> ) }} keyExtractor = { (item, index) => index.toString() } /> </View> <CopilotStep text="New style" image={selfie_img} order={2} name="secondUniqueKey" > <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={selfie_img} /> </View> <TouchableOpacity onPress={()=> { if(this.state.UploadIdCard.length < 2){ this.UploadCNIC(); }else{ alert('You can only upload two picture.'); } }} style={{ width: wp('90%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignSelf: 'flex-start', alignItems: 'flex-start', }}> <Text style={{ justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', fontSize: wp('4%'), padding: wp('4%'), color: '#ffffff', fontFamily: 'Raleway-Medium', }}> Upload CNIC Front-End-Back </Text> </TouchableOpacity> </View> </WalkthroughView> </CopilotStep> <View style={[styles.wandModalButtons,{marginLeft:wp('5%'),marginRight:wp('5%')}]}> <FlatList data={this.state.UploadIdCard} horizontal={true} renderItem={(info)=>{ //console.log(info) return ( <ImageBackground key={info.index} source={info.item} style={{width:wp('22.5%'),height:wp('14%'),borderRadius:wp('5%'),marginRight:wp('2%')}}> <View style={styles.modelImageText}> <TouchableOpacity onPress={()=>this.RemoveidCNIVSelfe(info.item.key)} style={styles.modelImageTextCircle}> <Text style={styles.modelImageTextinner}> Remove </Text> </TouchableOpacity> </View> </ImageBackground> ) }} keyExtractor = { (item, index) => index.toString() } /> </View> <CopilotStep text="New style" image={selfie_img} order={3} name="thirdUniqueKey" > <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={Drive_img} /> </View> <TouchableOpacity onPress={()=> { if(this.state.DrivingLicence.length > 1){ alert('You have already selected maximum number of images. Do you want to discard them and upload new images?'); return; } Alert.alert( 'Alert', '', [ { text: 'Cancel', onPress: () => console.log('Ask me later pressed'), style: 'cancel' }, { text: 'Open Camera', onPress: () => { this.UploadDrivingLicenceThroughCamera() }, }, { text: 'Open Gallery', onPress: () => { this.UploadDrivingLicence() } } ], { cancelable: false } ); }} style={{width: wp('80%')}}> <Text style={{ justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', fontSize: wp('4%'), padding: wp('4%'), color: '#ffffff', fontFamily: 'Raleway-Medium', }}> Upload Driving License </Text> </TouchableOpacity> </View> <View style={[styles.wandModalButtons,{marginRight:wp('5%'),marginLeft:wp('5%')}]}> <FlatList data={this.state.DrivingLicence} horizontal={true} renderItem={(info)=>{ // console.log(info); return ( <ImageBackground key={info.index} source={{uri:info.item.path}} style={{width:wp('22.5%'),height:wp('14%'),borderRadius:wp('5%'),marginRight:wp('2%')}}> <View style={styles.modelImageText}> <TouchableOpacity onPress={()=>this.DrivingLicenceIdRemove(info.index)} style={styles.modelImageTextCircle}> <Text style={styles.modelImageTextinner}> Remove </Text> </TouchableOpacity> </View> </ImageBackground> ) }} keyExtractor = { (item, index) => index.toString() } /> </View> </WalkthroughView> </CopilotStep> <CopilotStep text="This is the heading with some style" order={4} name="fourthUniqueKey"> <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={Drive_img} /> </View> <TouchableOpacity onPress={()=> { if(this.state.CarImages.length > 5){ alert('You have already selected maximum number of images. Do you want to discard them and upload new images?'); return; } Alert.alert( 'Alert', '', [ { text: 'Cancel', onPress: () => console.log('Ask me later pressed'), style: 'cancel' }, { text: 'Open Camera', onPress: () => { this.UploadCarImagesThroughCamera() }, }, { text: 'Open Gallery', onPress: () => { this.UploadCarImages() } } ], { cancelable: false } ); }} style={{width: wp('80%')}}> <Text style={{ justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', fontSize: wp('4%'), padding: wp('4%'), color: '#ffffff', fontFamily: 'Raleway-Medium', }}> Upload Bike Images </Text> </TouchableOpacity> </View> </WalkthroughView> </CopilotStep> <View style={[styles.wandModalButtons,{marginRight:wp('5%'),marginLeft:wp('5%')}]}> <FlatList data={this.state.CarImages} horizontal={true} renderItem={(info)=>{ return ( <ImageBackground key={info.index} source={{uri:info.item.path}} style={{width:wp('22.5%'),height:wp('14%'),borderRadius:wp('5%'),marginRight:wp('2%')}}> <View style={styles.modelImageText}> <TouchableOpacity onPress={()=>this.CarImagesIdRemove(info.index)} style={styles.modelImageTextCircle}> <Text style={styles.modelImageTextinner}> Remove </Text> </TouchableOpacity> </View> </ImageBackground> ) }} keyExtractor = { (item, index) => index.toString() } /> </View> {/*<View*/} {/* >*/} {/* */} {/*</View>*/} <CopilotStep text="This is the heading with some style" order={5} name="fifthUniqueKey"> <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={car_reg} /> </View> <TouchableOpacity onPress={()=> { if(this.state.CarRegisterationImage.length > 1){ alert('You have already selected maximum number of images. Do you want to discard them and upload new images?'); return; } Alert.alert( 'Alert', '', [ { text: 'Cancel', onPress: () => console.log('Ask me later pressed'), style: 'cancel' }, { text: 'Open Camera', onPress: () => { this.CarRegisterationImageThroughCamera() }, }, { text: 'Open Gallery', onPress: () => { this.CarRegisterationImage() } } ], { cancelable: false } ); }} style={{ width: wp('90%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignSelf: 'flex-start', alignItems: 'flex-start', }}> <Text style={{ justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', fontSize: wp('4%'), padding: wp('4%'), color: '#ffffff', fontFamily: 'Raleway-Medium', }}> Upload Bike Registration Cop </Text> </TouchableOpacity> </View> </WalkthroughView> </CopilotStep> <View style={[styles.wandModalButtons,{marginLeft:wp('5%'),marginRight:wp('5%')}]}> <FlatList data={this.state.CarRegisterationImage} horizontal={true} renderItem={(info)=>{ //console.log(info) return ( <ImageBackground key={info.index} source={{uri:info.item.path}} style={{width:wp('22.5%'),height:wp('14%'),borderRadius:wp('5%'),marginRight:wp('2%')}}> <View style={styles.modelImageText}> <TouchableOpacity onPress={()=>this.CarRegisterationImageRemoveImage(info.index)} style={styles.modelImageTextCircle}> <Text style={styles.modelImageTextinner}> Remove </Text> </TouchableOpacity> </View> </ImageBackground> ) }} keyExtractor = { (item, index) => index.toString() } /> </View> <CopilotStep text="This is the heading with some style" order={6} name="sixthUniqueKey"> <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={date_img} /> </View> <TouchableOpacity style={{ width: wp('80%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignSelf: 'flex-start', alignItems: 'flex-start', }}> <DatePicker style={{width: wp('65%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', padding: wp('2%'), borderWidth:0, backgroundColor:'#5ba505', fontFamily: 'Raleway-Medium',}} date={this.state.date} mode="date" placeholder="Expiry Date Of Driving License" 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) => {this.setState({ LiceneExpiration: date, date:date })}} /> </TouchableOpacity> </View> </WalkthroughView> </CopilotStep> <CopilotStep text="Driving Licence Expiry Date" order={7} name="seventhUniqueKey"> <WalkthroughView style={{ paddingLeft: wp('5%'), paddingRight: wp('5%'), marginTop: wp('5%'), }}> <View style={{ flexDirection: 'row', backgroundColor: '#5ba505', alignContent: 'center', alignItems: 'center', borderRadius:3, }}> <View style={{ width: wp('15%'), height:wp('15%'), alignItems: 'center', justifyContent:'center', alignContent: 'center', backgroundColor: '#eaeaea', }}> <Image style={{ height: wp('10%'), width: wp('10%'), alignContent: 'center', justifyContent: 'center', alignItems: 'center', }} source={date_img} /> </View> <TouchableOpacity style={{ width: wp('80%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignSelf: 'flex-start', alignItems: 'flex-start', }}> <DatePicker style={{ width: wp('65%'), justifyContent: 'flex-start', alignContent: 'flex-start', alignItems: 'flex-start', padding: wp('2%'), borderWidth:0, backgroundColor:'#5ba505', fontFamily: 'Raleway-Medium',}} date={this.state.licence} mode="date" placeholder="Expiry Date Of Bike Registration" confirmBtnText="Confirm" format="DD-MM-YYYY" minDate={new Date} cancelBtnText="Cancel" customStyles={{ dateInput: { borderWidth: 0, }, placeholderText: { fontSize: wp('4%'), color: '#fff', }, dateText: { fontSize: wp('5%'), color: '#fff', }, dateIcon: { display:'none' }, }} onDateChange={(date) => {this.setState({ licence: date, DrivingRegisterationExpiration:date })}} /> </TouchableOpacity> </View> </WalkthroughView> </CopilotStep> </React.Fragment> ); if(this.props.isLoading) { LoginButton = ( <View style={[{top:0,height :hp('10%'),opacity:1, zIndex:99999, position:'absolute', justifyContent:'center', alignContent:'center', alignItems:'center', alignSelf:'auto', width:'100%', height:'100%', backgroundColor:'rgba(0,0,0,.5)',}]}> <View style={[{top:hp('35%'),height :hp('10%'),opacity:1, zIndex:99999, position:'absolute', justifyContent:'center', alignContent:'flex-start', alignItems:'center', flexDirection:'row', alignSelf:'auto', width:'90%', height:hp('11%'), backgroundColor:'white', borderRadius:wp('2%')}]}> <View style={{justifyContent:'flex-start',alignContent:'flex-start',flex:.3}}> <Image source={gif} style={{width:wp('20%'),height:wp('20%')}} /> </View> <View style={{justifyContent:'center',alignContent:'center',flex:.5,paddingLeft:wp('2%')}}> <Text style={{fontSize:wp('3.5%')}}> Loading Please wait... </Text> </View> </View> </View>) } let scroll = this.state.screenHeight > hp('100%') ; return ( <KeyboardAvoidingView style={styles.conatainer} behavior="position" enabled={Platform.OS==='ios'?true:false}> <View > {LoginButton} {!this.props.InternetInfo?<OfflineNotice />:<View></View>} <ScrollView ref={ref => (this.scrollView = ref)} onContentSizeChange={this.onContentSizeChange} > <View> <AlertSuccess /> </View> <View> <AlertError /> </View> <View style={styles.image_styles}> <Image style={{height: wp('30%'), width: wp('30%')}} source={image}></Image> </View> <View style={{ height: wp('0.5%'), width: wp('100%'), backgroundColor: 'rgba(204, 204, 204, .4)', }}></View> <View style={{ height: wp('0.5%'), width: wp('100%'), backgroundColor: 'rgba(204, 204, 204, .4)', }}></View> {CarRegService} <View style={{padding: wp('5%')}}> <TouchableOpacity disabled={this.state.DrivingLicence.length < 1 || this.state.CarImages < 2 || this.state.CarRegisterationImage < 1 || this.state.UploadIdCard <2 || this.state.disableClick ? true :false} style={[styles.login_btn]} onPress={() => { this.setState({ disableClick:true, },() =>{ this.registerTech(); }) }} > <Text style={{ color: '#fff', fontSize: wp('5%'), fontFamily: 'Raleway-Bold', }}> {lan.submit} </Text> </TouchableOpacity> </View> </ScrollView> </View> </KeyboardAvoidingView> ); } } const styles = StyleSheet.create({ conatainer: { flex: 1, backgroundColor: 'white', paddingTop:Platform.OS==='ios'?wp('4%'):0 // marginTop: wp('10%'), }, image_styles: { justifyContent: 'center', alignContent: 'center', alignItems: 'center', }, input_Text: { justifyContent: 'center', height: wp('10%'), width: wp('90%'), fontSize: wp('10%'), fontFamily: 'regular', }, forgot: { flexDirection: 'row', height: wp('5%'), width: wp('100%'), fontSize: wp('10%'), marginTop: wp('3%'), justifyContent: 'flex-end', alignContent: 'flex-end', }, login_btn: { alignContent: 'center', alignItems: 'center', height: wp('12%'), width: wp('90%'), justifyContent: 'center', backgroundColor: '#5ba505', fontFamily: 'bold', }, or: { justifyContent: 'center', alignContent: 'center', alignItems: 'center', // height: wp('7%'), // width: wp('7%'), paddingTop:wp('1%'), paddingBottom:wp('1%'), paddingLeft:wp('1.5%'), paddingRight:wp('1.5%'), backgroundColor: '#333', borderRadius: wp('3.5%'), }, signup: { justifyContent: 'center', alignItems: 'center', height: wp('10%'), flexDirection: 'row', }, signupmargin: { alignContent: 'center', alignItems: 'center', height: wp('12%'), width: wp('90%'), justifyContent: 'center', backgroundColor: '#5ba505', // marginTop: wp('3%'), }, parent_or: { flexDirection: 'row', height: hp('10%'), marginTop: hp('2%'), width: wp('100%'), justifyContent: 'center', alignContent: 'center', alignItems: 'center', }, place_icon: { flexDirection: 'row', justifyContent: 'center', alignContent: 'center', alignItems: 'center', }, SectionStyle: { width:'100%', marginTop: wp('4%'), marginLeft: wp('5%'), marginRight: wp('5%'), flexDirection: 'row', justifyContent: 'center', alignItems: 'center', alignContent: 'center', borderWidth: wp('0.2%'), borderColor: '#5ba505', height: wp('13%'), }, ImageStyle: { //padding: wp('2%'), //margin: wp('2%'), //height: wp('3%'), // /width: wp('3%'), // resizeMode: 'stretch', //alignItems: 'center', justifyContent:'center', alignContent:'center', alignItems:'center', alignSelf:'auto', paddingRight:wp('3%') }, category_text: { flex: 1, fontFamily: 'Raleway-Regular', paddingBottom: wp('3%'), color:'#333', paddingTop: wp('1.7%'), paddingLeft: wp('2%'), paddingRight: wp('2%'), fontSize: wp('5%'), justifyContent: 'center', alignContent: 'center', alignItems: 'center', }, country_city: { flexDirection: 'row', alignItems:'center', width:wp('90%'), }, text_country_city: { fontFamily: 'Raleway-Regular', // paddingBottom: wp('3%'), // paddingTop: wp('3%'), paddingLeft: wp('2%'), justifyContent:'center', paddingRight: wp('5%'), color:'rgba(0,0,0,.7)', fontSize: wp('5%'), // justifyContent: 'center', // alignContent: 'center', // alignItems: 'center', }, view_text_arrow: { flex:4, justifyContent:'center' }, view_icon_arrow: { flex:0.4, justifyContent:'center' }, center:{ justifyContent:"center", alignSelf:'auto', alignItems:'center', alignContent:'center' }, textSize:{ fontSize:wp('3.5%'), color:'white', textAlign:'center' }, flipModelText:{ backgroundColor:'gray', width:'100%', justifyContent:'center', alignContent:'center', alignSelf:'center', alignItems:'center', padding:wp('1.5%') }, flipModelTextInner:{ fontSize:wp('4%'), fontFamily:'Raleway', fontWeight:'600', color:'white' },chareModal:{ margin:20, backgroundColor: 'rgba(255,255,255,1)', padding:20, position:'absolute', top:hp('35%'), left:20, right:20, height:wp('40%'), justifyContent:'center', alignContent:'center', alignSelf:'auto', alignItems:'center' }, modelOuterView:{ flex:1, backgroundColor:'rgba(0,0,0,.4)' }, wandModalButtons:{ // flexDirection:'row', justifyContent:'center', alignItems:'center', alignSelf:'auto', alignContent:'center', marginTop:wp('2%'), //borderBottomWidth:1, //borderBottomColor:'#29ABE2', },modelImageText:{ justifyContent:'center', alignContent:'center', alignItems:'center', alignSelf:'auto', width:'100%', height:'100%', backgroundColor: 'rgba(0,0,0,.4)', }, modelImageTextinner:{ justifyContent:"center", alignSelf:'center', color:'#5ba505', fontSize:wp('3.5%') }, chareModalImage:{ margin:5, backgroundColor: 'rgba(255,255,255,1)', padding:5, position:'absolute', top:hp('35%'), left:0, right:0, height:wp('47%'), justifyContent:'center', alignContent:'center', alignSelf:'auto', alignItems:'center' },crossbutton:{ position:'absolute', top:hp('75%'), left:wp('46.5%'), }, communication1: { height: wp('15%'), alignSelf: 'center', justifyContent: 'center', paddingLeft:wp('5%'), alignContent: 'center', alignItems: 'flex-start', alignContent: 'center', justifyContent: 'center', width: '100%', backgroundColor: '#fff', }, textInputOuterView:{ flexDirection:'row', borderBottomColor:'#333', borderBottomWidth:1, alignContent:'center', alignItems:'center' }, place_icon: { flexDirection:'row', justifyContent:'center', alignContent:'center', alignItems:'center' }, invalid:{ borderBottomColor:'#8b0000', }, isvalid:{ borderBottomColor:'green', }, disapair:{ height:0, opacity:0 }, show:{ opacity:100, //marginBottom:wp('1%') }, warrnings:{ fontSize:wp('3%'), color:'#8b0000', fontFamily:'Arial', }, closeModal:{ position:'absolute', top:10, marginBottom:wp('5%'), right:10, }, loader:{ alignContent:'center', alignItems:'center', height:hp('7%'), width:wp('90%'), justifyContent:'center', fontFamily:'bold', }, TextInputStyle:{ fontSize:wp('5%'), // paddingTop:wp('2%'), height:wp('14%'), marginTop:wp('1%'), marginBottom:wp('1%'), width:'100%', fontFamily:'Raleway-Light' },view_no_task: { height: wp('40%'), justifyContent: 'center', alignItems: 'center', width: wp('100%') }, text_no_tasks: { fontFamily: 'Raleway-Bold', fontSize: wp('7%'), color: '#333' }, parent_view_services1: { flexDirection: 'row', width: wp('100%'), marginTop: wp('0.5%'), }, parent_plumbing: { flex: 0.5, paddingBottom: wp('1%'), paddingTop: wp('1.5%'), flexDirection: 'column', justifyContent: 'center', alignContent: 'center', alignItems: 'center', }, view_line1: { flex: 0.002, height: hp('7%'), justifyContent: 'center', alignItems: 'center', alignContent: 'center', alignSelf: 'center', backgroundColor: Platform.OS === 'android' ? 'rgba(153, 153, 153, 1)' : 'rgba(153, 153, 153, .4)' , width: wp('0.1%'), marginTop: wp('1%'), marginBottom: wp('2%'), },img_size: { height: wp('15%'), width: wp('15%'), }, text_size: { fontSize: wp('3%'), fontWeight: '500', }, sec: { zIndex:99999, flexDirection:'column', width:wp('95%'), height:wp('70%'), alignItems:'center', alignContent:'flex-start', justifyContent:'flex-start', borderRadius:5, marginLeft:wp('2%'), backgroundColor:'#ecedeb', position:'absolute', top:hp('30%') // position:'relative', // bottom:0 }, sec_view: { flexDirection:'row', backgroundColor:'#fff', width:wp('90%'), height:wp('15%'), borderRadius:5, marginBottom:wp('5%'), }, sec_view_img: { flex:0.2, alignContent:'center', justifyContent:'center', alignItems:'center', resizeMode:'contain', borderTopLeftRadius:5, borderBottomLeftRadius:5, backgroundColor:'#5ba505' }, view_img: { width:wp('12%'), height:wp('8%'), }, sec_view_txt: { flex:0.7, alignContent:'center', justifyContent:'center', alignItems:'center', }, view_txt: { fontFamily:'Roboto', fontSize:wp('4%'), fontWeight:'bold' }, body_view: { alignItems:'center', alignContent:'center', justifyContent:'center', height:wp('35%'), backgroundColor:'#f4f4f4', }, body_head: { textAlign:'center', alignContent:'center', justifyContent:'center', }, body_icon: { flexDirection:'column', alignItems:'center', alignContent:'center', justifyContent:'center', marginTop:wp('5%') }, Img_sec: { flexDirection:'row', marginTop:wp('4%'), alignContent:'center', justifyContent:'center', alignItems:'center', }, body_content1: { marginBottom:wp('3%'), marginTop:wp('5%'), alignContent:'center', justifyContent:'center', alignItems:'center', }, body_content11: { alignContent:'center', justifyContent:'center', alignItems:'center', }, icons_img: { height:wp('18%'), width:wp('18%'), }, body_content: { height:wp('15%'), width:wp('95%'), borderColor:'#e2e2e2', borderWidth:2, borderRadius:2, marginLeft:wp('2%'), marginRight:wp('2%'), marginTop:wp('1%'), alignContent:'center', justifyContent:'center', }, body_icon_view: { width:wp('20%'), height:wp('20%'), }, body_txt_view: { fontSize:hp('2.2%'), fontWeight:'400', padding:8, }, body_txt_view11: { fontSize:hp('2.4%'), padding:15, color:'#000' }, body_txt_view12: { fontSize:hp('2.2%'), padding:5, marginTop:wp('1%'), color:'#000', }, body_txt_view121: { fontSize:hp('2.2%'), color:'#5ba505', }, body_txt_view1: { fontSize:hp('2.5%'), padding:15, color:'#000', }, body_txt_view111: { backgroundColor:'#5ba505', borderColor:'#5ba505', height:wp('13%'), textAlign:'center', alignContent:'center', justifyContent:'center', }, body_arrow_view: { color:'#5ba505', fontSize:hp('2.5%') }, body_txt_btn: { textAlign: 'center', fontSize:hp('3.5%'), color:'#fff', fontWeight:'bold' } }); const mapStateToProps = (state) =>{ return{ country:state.rateingData.country, isLoading: state.ui.isLoading, InternetInfo:state.ui.InternetInfo, mode:state.ui.mode, language:state.langauage.language, user:state.user.user } } const mapsdispatchToProps = (dispatch) => { return { registerTechnicianto: (userData) => dispatch(SaveRidersData(userData)), getCountrt:()=>dispatch(getCountrysData()), search:(text)=>dispatch(SearchCountry(text)), uiStopLoading:()=>dispatch(uiStopLoading()), uiStartLoading:()=>dispatch(uiStartLoading()), RefreshTech:()=>dispatch(RefreshTech()) } } export default connect(mapStateToProps, mapsdispatchToProps)( copilot({ animated: true, // Can be true or false overlay: 'svg', })(BikeDocuments));
Expected behavior/code A clear and concise description of what you expected to happen (or code).
Environment
react-native-copilot
react-native
react-native-svg
Possible Solution
Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.
Duplicate of #160
AboutReact
commented
4 years ago AboutReact
commented
4 years ago
Current Behavior
Input Code
Expected behavior/code A clear and concise description of what you expected to happen (or code).
Environment
react-native-copilot: [v 2.5.0]react-native: [0.61.5]react-native-svg: [^9.13.6]Possible Solution
Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.