Stack Navigators from v4 not working with 0.64.2

[NicholasIoanJones]

Environment

System: OS: macOS 11.4 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Memory: 118.86 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.16.2 - /usr/local/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.1, 30.0.2, 31.0.0 System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.2 AI-202.7660.26.42.7322048 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: 1.8.0_211 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.2 => 0.64.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Things I’ve done to figure out my issue

Given some components explicit heights and colors and sometimes they show up, though not where they are supposed to be. Frankly I don't know what to try. Something fundamental has changed.

Upgrading version

0.64.2

Description

Upgrading from 0.63.4 to 0.64.2. We use react-navigation 4.3.9 My initial screen (first screen in a switchNavigator) displays normally When I navigate to the next screen (which is a stackNavigator), nothing appears on the screen except some text from the headerRight component, and that is in the wrong place It feels as if something fundamental is broken between react-navigation 4 and react native 64 - is that the case?

Reproducible demo

Not a demo, sorry but the key parts of the navigation ` const WalkthroughNavigation = createBottomTabNavigator({ step1: { screen: WalkthroughScreen }, step2: { screen: WalkthroughScreen }, step3: { screen: WalkthroughScreen }, }, { tabBarComponent: TabBar, tabBarPosition: 'bottom', });

const AppNavigation = createSwitchNavigator({ gettingStarted: { screen: GettingStartedScreen }, authNavigation: { screen: AuthNavigation }, mainTab: { screen: tabNavigation, }, walkthroughNavigation: { // Wrap the walktrough (tab navigator) in a stack navigator so it has a visible header screen: createStackNavigator({ walkthroughNavigation: { screen: WalkthroughNavigation,

            navigationOptions: {
                title: 'afds',
                headerTitle: (<HeaderLogo />),
                headerRight: (<SkipButton />),
            },
        },
    }, {
        cardStyle: ApplicationStyles.screen.mainCard,
        headerMode: Platform.OS === 'ios' ? 'float' : 'screen',
        headerLayoutPreset: 'center',
        initialRouteName: 'walkthroughNavigation',
    }),
},
welcome: WelcomeScreen,

}, { initialRouteName: 'gettingStarted', }); `