Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stack Navigator - on Windows, after navigating to a stack and back, header elements cannot be clicked #10553

Closed
2 of 11 tasks
AdaData opened this issue Apr 27, 2022 · 1 comment

Comments

@AdaData
Copy link

AdaData commented Apr 27, 2022

Current behavior

I'm currently only seeing this on Windows, we have a MacOS application (via Catalyst so technically an iOS application) that is unaffected and the snack I linked doesn't actually demo the issue since it doesn't allow you to run on Windows.

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.

This seems similar to #7052 but since this is Windows only I figured I'd make a separate issue.

Minimal repro that is also my example code:

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

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

};

const App = () => {
const headerButton = <Button title={"Do I work?"} onPress={() => alert("I do!") } />;
return (

<Stack.Navigator screenOptions={{ headerMode: 'screen', headerRight: () => headerButton}}>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>

);
};

export default App;

Screen.Recording.2022-04-27.at.5.40.03.PM.mov

Expected behavior

The obvious, but that header buttons work on the root screen

Reproduction

https://snack.expo.dev/_dbMNoLpW

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

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

Environment

  • I've removed the packages that I don't use
package version
@react-navigation/native 6.0.10
@react-navigation/bottom-tabs 6.3.1
@react-navigation/drawer 6.4.1
@react-navigation/stack 6.2.1
react-native-safe-area-context 3.3.2
react-native-screens 3.10.2
react-native-gesture-handler 2.2.0
react-native-reanimated 1.13.4
react-native 0.67.2
node 17.6.0
npm or yarn 1.22.17 (yarn)
@MaxPMagee
Copy link

This issue was fixed in 0.67.14! Hooray!

microsoft/react-native-windows#9977 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants