react-native-progress-steps
react-native-progress-steps copied to clipboard
colbymillerdev
change current step
Hi, I call an axios request in the first step when I click next button and then the request returns a success response I change the errors props to false to pass to the next step but didn't work I need to click on it many times then it passes to the next.
How can I fix that? thank you
@hanaechahid Can you post the code when you get a chance so we can try to determine where the issue is occurring?
Hi @colbymillerdev , here is some code:
// identity step
identityStep = () => {
let regExp = /^(?=.*\d)(?=.*[A-Z])(?!.*[^a-zA-Z0-9@#$^+=])(.{4,15})$/;
while(!regExp.test(this.state.password)) {
this.generatePassword();
}
this.addNewUser();
}
// method to add new user
addNewUser = () => {
const {first_name, last_name, username, password, password_verify, email, companyId, roles} = this.state;
this.data = {
mail: email,
firstName: first_name,
lastName: last_name,
username: username,
password: password,
checkPassword: password_verify,
organization: companyId.toString(),
roles: roles
}
this.errors = new Array();
this.props.addNewUser(
this.data,
result => {
this.userCreated = result;
this.setState({
errors: false,
showMailError: false,
showUserNameError: false,
showFirstNameError: false,
showLastNameError: false,
});
console.log(this.userCreated)
},
error => {
this.errors.push(error);
delete this.errors[0].organization;
this.setState({modalVisible: true})
if(error.hasOwnProperty("mail")) this.setState({emailError: error.mail, showMailError: true, errors: true})
if(error.hasOwnProperty("username")) this.setState({userNameError: error.username, showUserNameError: true, errors: true})
if(error.hasOwnProperty("firstName")) this.setState({firstNameError: error.firstName, showFirstNameError: true, errors: true})
if(error.hasOwnProperty("lastName")) this.setState({lastNameError: error.lastName, showLastNameError: true, errors: true})
if(Object.keys(error).length === 0 ) {
this.setState({
errors: false,
activeStep: this.state.activeStep + 1,
modalVisible: false
})
}
}
);
}
//professional step
professionalStep = () => {
this.data["organization"] = this.state.companyId.toString();
/**
* here we fetch the workspaces to get selected profiles for each workspace
* then we add those profiles to our data object to send them to the server
*/
this.state.workspaces.map(workspace => {
this.items.forEach(item => {
const profiles = _.find(item, ['id', workspace.id]);
if(profiles) {
this.data ['profiles_' + workspace.id ] = profiles.selected;
}
return;
})
return this.data;
});
this.props.addNewUser(
this.data,
result => {
this.userCreated = result;
this.setState({
errors: false,
professionalerrors: false,
showMailError: false,
showUserNameError: false,
showFirstNameError: false,
showLastNameError: false,
});
},
error => {
this.errors.push(error);
if(error.hasOwnProperty("organization")) {
this.setState({
professionalerrors: true,
organizationError: error.organization,
showOrganizationError: true,
modalVisible: true
})
}
}
);
}
<View` style={{flex: 1, backgroundColor: "#FFFFFF"}}>
<ProgressSteps
ref={ref => { this.progressSteps = ref }}
activeStep={this.state.activeStep}>
<ProgressStep label="identity"
nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
scrollViewProps={this.defaultScrollViewProps}
errors={this.state.errors}
onNext={() => this.identityStep()}>
<View style={{ alignItems: 'center', height: Metrics.HEIGHT * 0.5 }}>
<ScrollView >
<PersonelInfos handleChange={this.handleChange}
email={this.state.email} first_name={this.state.first_name}
last_name={this.state.last_name} username={this.state.username}
showFirstNameError={this.state.showFirstNameError}
showLastNameError={this.state.showLastNameError}
showUserNameError={this.state.showUserNameError} showMailError=
{this.state.showMailError}
/>
</ScrollView>
</View>
</ProgressStep>
<ProgressStep label="professional"
nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
previousBtnStyle={styles.previousBtn} previousBtnTextStyle={styles.btnText}
scrollViewProps={this.defaultScrollViewProps}
errors={this.state.professionalerrors}
onNext={() => this.professionalStep()}>
<View style={{ alignItems: 'center', height: Metrics.HEIGHT * 0.5 }}>
<View style={styles.bodyform}>
<MyComponent />
</View>
</View>
</ProgressStep>
<ProgressStep label="picture"
nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
previousBtnStyle={styles.previousBtn} previousBtnTextStyle={styles.btnText}
scrollViewProps={this.defaultScrollViewProps}>
<View>
<TouchableOpacity
onPress={async () => {
await this.props.navigation.navigate("Camera", {
navigation: this.props.navigation,
type: "user",
userId: this.userCreated.id,
});
}}
>
<FontAwesome
name={"camera"}
style={{
color: "#2CB4FA",
fontSize: Fonts.moderateScale(30),
marginRight: 5
}}
/>
</TouchableOpacity>
</View>
</View>
</ProgressStep>
</ProgressSteps>
</View>
thanks,
@hanaechahid Couple questions to help give me more context..
-
Is
this.props.addNewUser()an asynchronous function? -
Is the
errorsstate defaulted tofalse? TheonNext()function won't change to the next step iferrors = { true }
this is the add new user function:
export const addNewUser = (data, cb, cError) => {
return async (dispatch, getState) => {
let tokenAccess = getState()["getCurrentUserToken"][0].access_token;
// Generated Bearer token
let genratedToken = "Bearer " + tokenAccess;
let header = {
headers: {
Authorization: genratedToken
}
};
let HOST = await AsyncStorage.getItem("@domainname");
let url = HOST + API.ADD_NEW_USER;
axiosInstance
.post(url, data, header)
.then(response => {
const result = response.data;
if (response.status === 201) {
dispatch({
type: ADD_NEW_USER,
payload: result
});
cb(result);
}
})
.catch( error => {
if(error.response.status === 400 ) {
if(error.response.data.code === 400) {
let response_errors = error.response.data.errors;
cError(response_errors);
}
}
if(error.response.status === 500 ) {
alert("Server Error");
}
})
};
}
2. errors state initialized as true
Hello, I am having the same issue, like in a confirmation form, it will not let me pass the next step even if i set the errors to False :
onNextStep= () => {
if (list.length != 0) {
set_errors(true); // stay on the same page
Alert.alert(
"Confirmation",
"Are you sure you got all the books you want?",
[
{
text: "Cancel",
onPress: () => set_errors(true),
style: "cancel"
},
{
text: "Yes",
onPress: () => {
set_errors(false); // must move on to the next page, but it doesn't
}
}
],
{ cancelable: false }
);
} else {
return set_errors(false);
}
};
Help is appreciated, thanks!
@hanaechahid
I try to set a loading , can be able to solve this issues. maybe you can try it also.
_updateStep(){ this.setState({ loading:false, current_step : this.state.current_step }) } render( if(this.state.loading) return null;
return (
<ProgressSteps activeStep={this.state.current_step}>
<ProgressStep
onNext={()=>this.setState({loading:true},()=>this._updateStep(data))}
>
<View/>
</ProgressStep>
</ProgressSteps>
)
)
