Can't replace to nested bottom-tabs from native-stack in iOS when new architecture is enabled

[zsien]

Current behavior

My navigation hierarchy is:

Native Stack Navigator
|- Init Screen
|- Bottom Tabs Navigator
   |- First Screen
   |- Second Screen

The Init Screen will use navigation.replace to navigate to the HomeTab after initialization is complete.

When RCT_NEW_ARCH_ENABLED=0, the First Screen can be shown correctly.
When RCT_NEW_ARCH_ENABLED=1, it will show a blank screen, and even the header of the HomeTab is not shown.

Expected behavior

When RCT_NEW_ARCH_ENABLED=1, the page content can be shown correctly.

Reproduction

https://github.com/zsien/RNNavNativeStackToBottomTabs

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.9
@react-navigation/bottom-tabs	6.5.11
@react-navigation/native-stack	6.9.17
react-native-safe-area-context	4.9.0
react-native-screens	3.29.0
react-native	0.73.4
node	20.11.0
npm	10.4.0

[benjeske]

I have the same issue with new architecture. When enabled on iOS we get a blank screen. Disabling new arch and issue is gone

[zsien]

I have the same issue with new architecture. When enabled on iOS we get a blank screen. Disabling new arch and issue is gone

My workaround is use navigate and then reset in the Bottom Tabs Navigator Component

[benjeske]

I have the same issue with new architecture. When enabled on iOS we get a blank screen. Disabling new arch and issue is gone

My workaround is use navigate and then reset in the Bottom Tabs Navigator Component

Sorry I didn't understand what you meant. Can you please elaborate on how you got it to work?

[zsien]

I have the same issue with new architecture. When enabled on iOS we get a blank screen. Disabling new arch and issue is gone

My workaround is use navigate and then reset in the Bottom Tabs Navigator Component

Sorry I didn't understand what you meant. Can you please elaborate on how you got it to work?

Use navigation.navigate instead of navigation.replace in InitScreen:

navigation.navigate('HomeTab');

Reset the history (remove InitScreen) in HomeTabScreen:

useEffect(() => {
  const state = navigation.getState();

  const homeTabIndex = state.routes.findIndex(r => r.name === 'HomeTab');
  if (homeTabIndex <= 0) {
    return;
  }

  if (state.routes[homeTabIndex - 1].name !== 'Init') {
    return;
  }

  state.routes.splice(homeTabIndex - 1, 1);
  const index = state.index - 1;

  navigation.dispatch(
    CommonActions.reset({
      ...state,
      index,
    }),
  );
}, [navigation]);

[ceopaludetto]

The same issue happens on Authentication Flow, when I do something like this (as mentioned in the docs):

isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
);

I got the same blank screen