How do I manage navigation between nested navigators in React Navigation?

I’m working on a React Native app with React Navigation v5 but I’m unable to get my desired behaviour.

• I have a Stack Navigator with three screens: “A”, “B”, and “C”.
• C is a nested Stack Navigator with two screens: “C-1”, and “C-2”.

Here is all of my desired behaviour:

• If a user taps on the button in B, it should open C-1 if there is no previous navigation state in that nested navigator, otherwise it should open the last active/opened screen (e.g. C-2).
• If a user presses the button in C-2, it should take them directly back to screen B (i.e. inside the parent navigator). You can think of this as a close button to immediately go back to B.
• After navigating to C-2 from B, pressing the back button in the header should take me back to C-1, not B.

How should I handle these requirements? I’m facing multiple challenges – for example, when I navigate to C-2 from B, passing C and C-2 as the destination screen, the header back button doesn’t work as expected. It takes me back to B instead of C-1.

Heres the code…

Create the two stacks:

const HomeStack = createStackNavigator();
const CStack = createStackNavigator();

Create the parent stack:

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <NavigationContainer>
        <HomeStack.Navigator
          initialRouteName="B"
          screenOptions={{
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
          }}>
          <HomeStack.Screen name="A">
            {props => (
              <View>
                <Text>A content</Text>
              </View>
            )}
          </HomeStack.Screen>
          <HomeStack.Screen name="B">
            {props => (
              <View>
                <Button
                  title="Navigate to C"
                  onPress={() => {
                    // props.navigation.navigate('C')
                    // OR
                    // props.navigation.navigate('C', {screen: 'C-2'});
                  }}
                />
              </View>
            )}
          </HomeStack.Screen>
          <HomeStack.Screen name="C">
            {props => <C {...props} />}
          </HomeStack.Screen>
        </HomeStack.Navigator>
      </NavigationContainer>
    );
  }
}

Create the nested stack:

class C extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <CStack.Navigator
        initialRouteName="C-1"
        screenOptions={{
          headerShown: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <CStack.Screen name="C-1">
          {props => (
            <View>
              <Text>C-1</Text>
            </View>
          )}
        </CStack.Screen>
        <CStack.Screen name="C-2">
          {props => (
            <View>
              <Text>C-2</Text>
              <Button
                title="Close C navigator"
                onPress={() => props.navigation.navigate('B')}
              />
            </View>
          )}
        </CStack.Screen>
        <CStack.Screen name="C-3">
          {props => (
            <View>
              <Text>C-3</Text>
            </View>
          )}
        </CStack.Screen>
      </CStack.Navigator>
    );
  }
}

Thanks for your help!