How to propagate to previous step manually by pressing on (cancel)button of Alert message.

[keyurgarsondiya]

Prevent Moving to Next Step when Cancel Button is Pressed

confirmNameOfField = () => {
    Alert.alert(
      'Confirm',
      'Confirm the Name of Field',
      [
        {
          text: 'Cancel',
          onPress: () => this.onPrevStep, //Prevent moving to next step and remain on the same activeStep
          style: 'cancel',
        },
        {
          text: 'OK',
          onPress: () => console.log('OK Pressed'),
        },
      ],
      {cancelable: false},
    );
  };
render() {
return(
<ProgressSteps activeStep={0}>
          <ProgressStep
            label="Enter name of field"
            onNext={this.confirmNameOfField}
            onPrevious={this.onPrevStep} 
            scrollViewProps={this.defaultScrollViewProps}>
            <TextInput placeholder="Name of Field" />
          </ProgressStep>
         ...
<ProgressSteps/>
)

[michaelVictoriaDev]

Hi, did you see this docs ? Current Step Error and Validation Handling The errors prop should be used if there's a need for validation and error handling when clicking the next button. If you would like to prevent the next step from being rendered, set the errors prop to true. By default, it will be false.

Example usage of validation check:

state = {
    isValid: false,
    errors: false
};

onNextStep = () => {
    if (!this.state.isValid) {
      this.setState({ errors: true });
    } else {
      this.setState({ errors: false });
    }
};

render() {
    return (
      <View style={{ flex: 1 }}>
        <ProgressSteps>
          <ProgressStep label="First Step" onNext={this.onNextStep} errors={this.state.errors}>
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 1!</Text>
            </View>
          </ProgressStep>
          <ProgressStep label="Second Step">
            <View style={{ alignItems: 'center' }}>
              <Text>This is the content within step 2!</Text>
            </View>
          </ProgressStep>
        </ProgressSteps>
      </View>
    );
}

[keyurgarsondiya]

Actually, in that I am facing an issue where the state in React being not changing instantly. Therefore, the previous value of the state is being passed on as arguments to the <ProgressStep> and hence the application is not working as intended.

[colbymillerdev]

Hello - Thanks for the question! I am closing this issue since it does not seem to be a bug with this project.