Error when using navigate (React Native)

I have my seuginte main:

  <View style={AppStyle.container}>
    <View style={AppStyle.topBar}>
      <HeaderBar/>
    </View>
    <AppStackNavigator/>
    <View style={AppStyle.botBar}>
      <BottomBar/>
    </View>
  </View>

It will load my topbar (which does nothing) on top, the body of the application that is the AppStackNavigator and finally the botbar on the bottom. My AppStackNavigator looks like this:

export default AppStackNavigator = createStackNavigator({
  Articles: ArticlesScreen,
  Profile: ProfileScreen,
  Article: ArticleScreen,
})

My doubts are as follows, within these pages Article , Articles , Profile I can navigate between the pages using the following command: this.props.navigation.navigate('Profile') . That is, inside the Articles page if I want to create a button like this:

<Button
  onPress={()=> this.props.navigation.navigate('Profile')}
  title="Profile"
  color="red"
  style={{width: 50 , height: 50}}
/>

And push the button, I will go to the profile page. But I want this button to be inside botbar, because my bar will have the option to navigate between the pages. When creating this button inside botbar it gives an error message saying this.props.navigation.navigate('Profile') is undefined, because there is no navigation in the props. How do I execute this command inside a module that does not inherit navigation?