React Native Navigation through views

Question

I have a stack navigator as followed:

const screens= {
LoginPage: {  
  screen: Login,
  navigationOptions: {
    headerShown: false
      },
},
RegisterPage: {
  screen: Register,
  navigationOptions: {
  headerShown: false
      },
},
DetailsPage: {
  screen: Details,
  navigationOptions: {
  headerShown: false
    },
},
ProfilePage:{
  screen: Home,
  navigationOptions:{
    headerShown: false
    },
  }
}

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

In App.js I'm calling this. So when I launch the app I'm on the login page. Each view has their own JS file, so I navigate through JS files here. Everything works and I can reach details page with navigation, but then I have a problem. Here is the code of my detailspage view

class DetailsPage extends React.Component {

render() {

    return (
  <View style={{flex: 1}}>
      <TouchableOpacity style={{flex:1}}
                        **onPress={() => this.navigation.navigate('ProfilePage')}**/>                         
  </View>
);

}

I want to go to profilepage (written in my navigator screens) when clicking on the touchable but I have no idea how to write the navigation in OnPress to reach that view ....

Answer 1

As far as I know, there's nothing wrong with the code you've written. Have you tried running it? What is the output/error?