Hardware button on android stops working when dismissing Dialog

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"

[rasck]

I can confirmed it is fixed: Tried upgrading my snack with the alpha version, "react-native-paper": "4.12.0-alpha.0", https://snack.expo.dev/MtcQOT4hZ

And it works! 🎉

[rasck]

I think a PR has just been merged to fix this: #3049