React Native Overlay child component's onPress event for navigating to a different page does NOT work

Question

I am displaying Home component in my overlay and it has a set of links which onPress navigate to different pages, the Home component itself works fine however it doesn't trigger navigation within the overlay.

<Overlay
  overlayStyle={{width:'100%',height:'70%'}}
  fullScreen={false}
  isVisible={overlayVisible}
  onBackdropPress={toggleOverlay}
>
  <Home
    navigation={navigation}
    lang={lang}
    headerVisible={false}
  ></Home>
</Overlay>  

Home Component (not complete code, just a snippet):

const Home = ( {navigation, lang, headerVisible}) => {
  const [language,setLang]=useState(lang);
  const [index, setIndex] = React.useState(0);

return (
  <ScrollView
    contentInsetAdjustmentBehavior="automatic"
    style={backgroundStyle}>
    <View style={{width: '50%'}}>
      {
       langBooks.get(language)?.slice(0,39).map((item, index) => {
         return (
           <Text
             key={index}
             onPress={()=>navigation.navigate("Book",{'book':index, 'chapter':0,language})}
           >{item } -  {chapters[index]}</Text>;
           // return <Text style ={{color:'black'}} key={index}>hi</Text>
      })}
    </View>
  </ScrollView>
);

The Home component displays on the overlay however onPress did not navigate to a different page. How to fix it?

Answer 1

Instead of using navigation from parent component of Home, you can use useNavigation like this:

const Home = ({lang, headerVisible}) => {
  const navigation = useNavigation()

  ...
}