React-Native Stack navigator go back to previous screen with same initialRouteName

Question

I am developing a React Native app and am using react navigation's stacknavigator, and here is my scenario:

• I have a component A as a stacknavigator that contains screen B (and others).
• Clicking on a button in A navigate to B
• Clicking on a button in B navigate to B (this time with new data)
• Clicking on default back button of second B navigate to A. And that's my issue, since I want to go back to first B Check my stacknavigator config, and correct me if I missed an extra config, Thank you.

<AppStack.Navigator
    initialRouteName="HOME"
    screenOptions={stackStyle}>
    <AppStack.Screen
        name="HOME"
        component={A}
    />
    <AppStack.Screen
        name="B"
        component={B}
    />
....

Within B:

const {navigation} = this.props;
navigation.navigate('B', {new data for second B});

EDIT: Forgot to mention that first B trigger second B from a webview

Answer 1

In my opinion, you should deal with the state of your components to rerender. Anyway, if you just need to navigate to the same page and keep the go back, you can replace :

navigation.navigate('B', { ... })

by :

navigation.push('B', { ... })

When you use push, you create a new route so when you will go back from this new route, it will navigate to the previous one. navigate will try to go to an existing route so in your case: the route B already exists actually.