React Native: Implementing navigation in composite component

Question

A react native newbie here. I have in my App.js following implementation:

<View style={styles.container}>
        <BackgroundHeader
          style={[this.state.tab == 0 ? styles.bg : styles.bg1]}
        />
        <ScrollView style={styles.scrollView}>
          {this.state.tab == 0 && (
            <HomeScreen/>
          )}
          {this.state.tab == 1 && (
            <SearchScreen/>
          )}
        </ScrollView>
        <BottomTab
          selected={this.state.tab}
          onSelected={
            //(index) => setTab(index)
            index => {
              this.setState({tab: index});
              console.log('DEBUG: App.js: Tab clicked with index: ', index);
            }
          }
        />
      </View>

In here I am keeping BackgroundHeader and BottomTab fixed in my View and based on what user clicks in BottomTab viz. either HomeScreen or SearchScreen I just show that component in ScrollView. So far, it's working as expected.

Now, I want to implement Navigation using @react-native/native and @react-native/stack so that from SearchScreen I can come back to HomeScreen through keypad back button only. (Using a Button onPress= and changing tab state I can do this, which is not I am looking for). But not sure, where/how to implement in such case of components nested inside. Examples, available online are for simple case of standalone components. Please help!