React Native: Finish current screen (component) after on press

Question

I have a React Native app Android-based and I'm navigating from a Screen A to Screen B.

Screen B is a component that has a Text Input and uses an update button to save the new value.

---

Screen B

What I'm looking is to dismiss/finish Screen B after the button is pressed, and having a flow that looks like this:

Screen A -> Screen B (Finish screen and come back to) -> Screen A

Nonetheless, when I press the Back Arrow button in the Android device after I come back to Screen A the app still comes back to Screen B :(

The render method in Screen A

  render() {
    return (
      <View style={styles.container}>
        <View styleName="horizontal" style={styles.row}>
          <Text style={styles.captionDarkGray}>
            {this.props.user.name}
          </Text>
          <View style={styles.alignHorizontalRight}>
            <Text
              style={styles.editButton}
              onPress={() =>
                this.props.navigation.navigate("ScreenB", {
                  fieldName: "Name",
                  fieldValue: this.props.user.name
                })
              }
            >
              Edit
            </Text>
          </View>
        </View>
      </View>
    );
  }

The Screen B code is:

export class ScreenB extends Component {
  constructor(props) {
    super(props);
  }

  dimissScreen() {
    // Finish this Component
  }
  render() {
    const fieldName = this.props.navigation.getParam("fieldName", "NO-ID");
    const fieldValue = this.props.navigation.getParam("fieldValue", "NO-ID");

    return (
      <View style={styles.container}>
        <StatusBarBackground />
        <View style={styles.globalBar}>
          <Text style={(styles.h3, { marginLeft: 10 })}>
            Update {fieldName}
          </Text>
        </View>
        <View style={localStyles.content}>
          <TextInput
            placeholder={fieldValue}
            defaultValue={fieldValue}
            style={(styles.formFieldEditText, localStyles.editText)}
            onSubmitEditing={() => this.phoneNumberInput.focus()}
            keyboardType="default"
            autoCapitalize="words"
            autoCorrect={true}
            placeholderTextColor={Colors.grayDark}
            maxLength={30}
          />

          <ButtonMm onPress={() => this.dimissScreen()}>Update</ButtonMm>
        </View>
      </View>
    );
  }
}

And the Stack Navigator of the Router looks like this:

export const RootAppNavigator = createStackNavigator(
  {
    ScreenA: {
      screen: ScreenA,
      navigationOptions: { header: null }
    },
    ScreenB: {
      screen: ScreenB,
      navigationOptions: { header: null }
    },
    OtherScreen: {
      screen:...

Is there any way to sort of call finish() for Screen B (Like when we finish an Android Activity ) once the update button was pressed? I think in this way, on back pressed the Screen A will not come back to Screen B.

Thanks in advance

Answer 1

You can use this in order to go back if you can not in the same stack

onPress={() => this.props.navigation.goBack(null)}

you can also use pop if you are in the same stack and want to go back to the previous screen

onPress={() => this.props.navigation.pop()}

if you want to go two screens back try this

this.props.navigation.pop(2)

Answer 2

This worked fine for me

 this.props.navigation.replace('YourPageRoot');