mohebifar / mohebifar/react-native-copilot
Walkthrough not showing on the right view in react-native
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 428
- PR merge metrics
- No merged PRs in 30d
Description
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:Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review the supplied BikeDocuments component and its react-native-copilot imports, especially the walkthroughable and CopilotStep usage. Reproduce the behavior on the iPhone 11 simulator shown in the report and trace which view receives the walkthrough. Done means the walkthrough appears on the intended view.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100