Conditional rendering of a screen shows a blank screen (new arch)

[SpaghettiC0des]

Description

Related to #690

I'm playing around with new architecture and the native stack navigator, and I encountered this issue. It's working properly when using the JS based stack navigator.

I have a simple redux state isLoggedIn which is just a simple boolean flag to simulate an authenticated user. I have a button to toggle the state to replace AuthStack with the MainStack. You know, the classic architecture for auth flow with react-navigation. More info on the official docs.

Steps to reproduce

Just follow the example here https://reactnavigation.org/docs/auth-flow/#define-our-screens

Snack or a link to a repository

https://github.com/karlmarxlopez/rn-navigation-native-stack-new-arch-issue

Screens version

3.18.2

React Native version

0.70.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 Pro

Acknowledgements

Yes

[kkafar]

Hi @karlmarxlopez, the link to reproduction you provided seems to be outdated / invalid (or maybe the repository is private?). Would you mind updating this?

[martinraveglia]

I'm having exactly the same issue here! We are using the New Architecture and for now just 4 screens with a basic auth flow as follows,

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import useIsSignedIn from '../../hooks/isSignIn';
import {appNavOptions, mainStackNavOption} from '../../helpers';
import {Routes, StackParamList} from '../../interfaces';
import TabNavigator from '../tabNavigator';
import {CreateAccount, Login, SelectPlayers} from '../../screens';

export const Stack = createNativeStackNavigator<StackParamList>();

const MainStack = () => {
  const isSignedIn = useIsSignedIn();
  return (
    <Stack.Navigator screenOptions={mainStackNavOption}>
      {isSignedIn ? (
        <>
          <Stack.Screen
            name={Routes.HOME}
            component={TabNavigator}
            options={appNavOptions[Routes.HOME]}
          />
          <Stack.Screen
            name={Routes.SELECT_PLAYERS}
            component={SelectPlayers}
            options={appNavOptions[Routes.SELECT_PLAYERS]}
          />
        </>
      ) : (
        <>
          <Stack.Screen
            name={Routes.LOG_IN}
            component={Login}
            options={appNavOptions[Routes.LOG_IN]}
          />
          <Stack.Screen
            name={Routes.CREATE_ACCOUNT}
            component={CreateAccount}
            options={appNavOptions[Routes.CREATE_ACCOUNT]}
          />
        </>
      )}
    </Stack.Navigator>
  );
};

export default MainStack;

When the isSignedIn state changes, I get a completely blank screen.

For example, if we are logged out, I can see the LogIn screen fully interactive and shown correctly. After we log in, the isSignedIn state changes for the first time, from false to true, a blank screen is shown

[aldiazveGlobant]

I'm having the same issue :'c

[aldiazveGlobant]

@kkafar Hi! I just create a repo reproducing the error: https://github.com/aldiazveGlobant/react-native-screens-stack-error

Is an app using the new architecture, just run it and press the button at the bottom; Android works just fine, but iOS renders an empty view and never recovers.

Let me know if I can help on anything else!

[Onedayago]

RNSScreenStack.mm 代码更改如下

注释下面的代码

// when there is no change we return immediately
// if ([_controller.viewControllers isEqualToArray:controllers]) {
// return;
// }

下面的代码增加
auto screenController = (RNSScreen *)top;
[screenController resetViewToScreen];

上面的更改对我有些，希望作者看下是否有用
@kkafar