Header buttons in Stack Navigators broken from 0.66.18-0.67.0

[AdaData]

Problem Description

I initially wrote this issue on react-navigation but after further testing it looks like specifically going from react-native-windows 0.66.18 to 0.67.0 reproduces the issue with no changes to your react-navigation version.

The issue description, just to save time following a link, is: If you start on the root screen of a stack navigator, navigate to a different screen, then hit the back button (or navigate to the start by any other means), any header buttons on the root screen will become unclickable. Other screens seem unaffected.

Steps To Reproduce

1. Upgrade to react-native-windows 0.67.0
2. Have a stack navigator with at least 2 screens and a button in the header
3. From screen 1, navigate to screen 2, then navigate back to screen 1
4. Click the button in the header - it won't work

Expected Results

Header button always works

CLI version

5.0.1

Environment

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19044
    CPU: (2) x64 Intel(R) Xeon(R) Gold 6226 CPU @ 2.70GHz
    Memory: 899.62 MB / 6.00 GB
  Binaries:
    Node: 14.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.16299.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.10.31410.357 (Visual Studio Professional 2019)
  Languages:
    Java: 17.0.3.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.2 => 0.67.2
    react-native-windows: 0.67.0 => 0.67.0
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

No response

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Release

Snack, code example, screenshot, or link to a repository

Minimal repro that is also my example code: - Note that you can't see the issue happen here, because you can't select windows! From a default react-native-windows installation, you also need to run

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/stack react-native-elements react-native-vector-icons

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator, StackScreenProps } from "@react-navigation/stack";
import React, { useState, useCallback } from "react";
import { Alert, Modal, StyleSheet, Text, Pressable, View, LayoutAnimation } from "react-native";
import { Button } from "react-native-elements";
const Stack = createStackNavigator();

export const Screen1 = ({
  navigation,
  route,
}) => {
  return <View style={styles.screens}><Button style={styles.navButtons} title="Click me to go to screen 2!" onPress={() => navigation.navigate('Screen2')} /></View>;
}

export const Screen2 = ({
  navigation,
  route,
}) => {
  return <View style={styles.screens}><Button style={styles.navButtons} title="Click me to go to screen 1!" onPress={() => navigation.navigate('Screen1')} />
  <Button style={styles.navButtons} title="Click me to go to screen 3!" onPress={() => navigation.navigate('Screen3')} /></View>;
};

export const Screen3 = ({
  navigation,
  route,
}) => {
  return <View style={styles.screens}><Button style={styles.navButtons} title="Click me to go to screen 1!" onPress={() => navigation.navigate('Screen1')} /><Button style={styles.navButtons} title="Click me to go to screen 2!" onPress={() => navigation.navigate('Screen2')} /></View>;
};

const App = () => {
  const headerButton = <Button title={"Do I work?"} style={styles.doIWorkButton} onPress={() => alert("I do!") } />;
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ header: () => headerButton, headerMode: "screen", headerStyle: {height: 500}}} detachInactiveScreens={false}>
        <Stack.Screen name="Screen1" component={Screen1} />
        <Stack.Screen name="Screen2" component={Screen2} />
        <Stack.Screen name="Screen3" component={Screen3} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  screens: { flex: 1, alignItems: 'center' },
  navButtons: { height: 100, width: 250, color: 'white' },
  doIWorkButton: {}
});

export default App;

[chrisglein]

Next actions: Repro with a min RNW app (thanks for providing the Snack!), see if repro is still there on 0.68 and/or 0.69 (in case other pointer fixes affected this).

[AdaData]

For what it's worth, I tried on 0.68 and was still hitting the issue, haven't tried 0.69 though.

[ryfow]

@TatianaKapos I stuck a reproducing rnw app at https://github.com/ryfow/NavProb

I couldn't get things completely running with 0.69 but I'm not familiar with running pre-release versions so it was probably my mistake.

[m-cartmell]

@chrisglein @TatianaKapos I can confirm the issue is resolved in 0.69.0-preview.1, but persists in 0.68.3. Can anyone confirm when 0.69 will be released?

[gillpeacegood]

If anyone knows what change fixed it and whether it can be backported to 0.67 we would love to know!

[chiaramooney]

@m-cartmell 0.69 should be released by the end of June.