fix(iOS): update HeaderConfig view controller after unmounting subviews

[janicduplessis]

Description

When using a header left view and then removing it the default back button doesn't reappear on new arch. This is because we do not call updateViewControllerIfNeeded when removing views.

Changes

Call updateViewControllerIfNeeded in unmountChildComponentView.

Test code and steps to reproduce

In the FabricExample HeaderOptions example:

• Open Header item setting
• Choose left
• Choose right
• See the back button is gone.

When toggling state the default back button doesn't reappear.

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[tboba]

Hi @janicduplessis, thanks for submitting this PR!
Nice catch, indeed back button is not rendered (left subview is not being unmounted aswell), when we're trying to remove left subview of the navigation bar.

Let me just pass my reproducer for that specific issue below:

Reproducer

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import { Button } from '../shared';

type StackParamList = {
  Main: undefined;
  Detail: undefined;
};

interface MainScreenProps {
  navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
}

const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => (
  <View style={{ ...styles.container, backgroundColor: 'moccasin' }}>
    <Button
      testID="simple-native-stack-go-to-detail"
      title="Go to detail"
      onPress={() => navigation.navigate('Detail')}
    />
    <Button onPress={() => navigation.pop()} title="🔙 Back to Examples" />
  </View>
);

interface DetailScreenProps {
  navigation: NativeStackNavigationProp<StackParamList, 'Detail'>;
}

const DetailScreen = ({ navigation }: DetailScreenProps): React.JSX.Element => {
  const [backButtonik, setBackButtonik] = React.useState(false);

  return (
    <View style={{ ...styles.container, backgroundColor: 'thistle' }}>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
        testID="simple-native-stack-detail-go-back"
      />
      <Button
        title="Switch"
        onPress={() => {
          setBackButtonik(prev => !prev);
          navigation.setOptions({
            // headerBackVisible: !backButtonik,
            headerLeft: backButtonik
              ? () => (
                  <View
                    style={{ width: 20, height: 20, backgroundColor: 'green' }}
                  />
                )
              : undefined,
          });
        }}
      />
    </View>
  );
};

const Stack = createNativeStackNavigator<StackParamList>();

interface Props {
  color?: string;
  size?: number;
}

const Square = ({ size = 100, color = 'red' }: Props): React.JSX.Element => (
  <View style={{ width: size, height: size, backgroundColor: color }} />
);

const App = (): React.JSX.Element => (
  <Stack.Navigator
    screenOptions={
      {
        // headerBackVisible: false,
      }
    }>
    <Stack.Screen
      name="Main"
      component={MainScreen}
      options={{ title: 'Simple Native Stack' }}
    />
    <Stack.Screen
      name="Detail"
      component={DetailScreen}
      options={{
        headerLeft: () => <Square color="green" size={20} />,
      }}
    />
  </Stack.Navigator>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 10,
  },
});

export default App;

Thanks!