Hardware button on android stops working when dismissing Dialog #3075
Description
Current behaviour
When we dismiss a dialog by pressing outside the dialog the hardware back button on android stops working, but pressing back on the navigation header works.
Expected behaviour
When we dismiss a dialog by pressing outside the dialog e.g. by setting visible to false, we still expect the hardware back button on android to work
{visible && <TestDialog visible={visible} onDismiss={onDismiss} />}
Code sample
Full code sample
Expo snack
A summary of the code:
const TestDialog = ({ visible, onDismiss } : { visible: boolean, onDismiss: () => void }) => {
return (
<Dialog
visible={visible}
onDismiss={onDismiss}
style={{ padding: 30}}
>
<View>
<Text style={{ fontSize: 20 }}>
Hello to the dialog
</Text>
</View>
</Dialog>
);
};
export default function ModalScreen() {
const [visible, setVisible] = useState(false);
const onDismiss = useCallback(() => { setVisible(false) }, [])
return (
<View style={styles.container}>
<Pressable onPress={() => setVisible(vis => !vis)}>
<Text style={styles.title}>Toggle dialog</Text>
</Pressable>
{visible && <TestDialog visible={visible} onDismiss={onDismiss} />}
</View>
);
}
What have you tried
If i change
{visible && <TestDialog visible={visible} onDismiss={onDismiss} />}
to
<TestDialog visible={visible} onDismiss={onDismiss} />
it works.
But we have some cases where we would like to able to just do like this
{visible && <TestDialog visible={visible} onDismiss={onDismiss} />}
Your Environment
Moto G7 Android Version 10
we used a virtual hardware button in this example. But our customers have the issue as well on devices with real hardware buttons
Deps from the expo snack:
"react-native-paper": "4.9.2",
"@expo/vector-icons": "^12.0.0",
"expo-constants": "~12.1.3",
"@react-navigation/native": "6.0.2",
"@react-navigation/stack": "6.0.7",
"react-native-gesture-handler": "~1.10.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"expo-web-browser": "~10.0.3",
"expo-font": "~10.0.3",
"expo-splash-screen": "~0.13.5",
"expo-status-bar": "~1.1.0",
"@react-navigation/bottom-tabs": "*",
"@react-navigation/native-stack": "*",
"@babel/core": "^7.12.9",
"@types/react": "~17.0.21",
"@types/react-native": "0.64.12",
"typescript": "~4.3.5",
"expo-linking": "~2.4.2",
"react-native": "0.64.3",
"react-native-vector-icons" : "unknown",
"expo": "43.0.0"