react-native-copilot
react-native-copilot copied to clipboard
Published
20 hours ago •
mohebifar
mohebifar
Walkthrough not showing on the right view in react-native
Current Behavior
Input Code
- REPL or Repo link if applicable:
/**
* 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: [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.
