I created the following component in react-native:

import { TouchableWithoutFeedback, Keyboard } from "react-native";

export default function DismissKeyboard({ children }) {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      {children}
    </TouchableWithoutFeedback>
  );
}

It works fine if I use it in a screen rendered by App.js, like this:

export default function StartGameScreen(props) {
  return (
    <DismissKeyboard>
      <View style={styles.container}>
        <Text style={styles.text}>Guess my Number</Text>
        <NumberInput onSet={(number) => props.onSet(number)} />
      </View>
    </DismissKeyboard>
  );
}

But it doesn't work if I use it directly in App.js, like this:

export default function App() {
  
  [...]

  return (
    <DismissKeyboard>
      <>
        <StatusBar style="auto" />
        {screen}
      </>
    </DismissKeyboard>
  );
}

Any idea of why it doesn't work in App.js?