React-native-navigation navigate through a different component instead of from a page

Question

My home page contains a View. This view contains a flat list with items. The flat list is being rendered through a different component

I should be able to use something like this.props.navigation.navigate('DetailPage') from the component not from my homePage.

I think i should pass the navigation as a prop to the but not sure how i could do that.

Navigation File

export const HomePageStack = StackNavigator({
      Homepage:{
          screen:homePage,
      },
      DetailPage:{
          screen: DetailPage,
      }

})

Home Page Screen

render(){
   return(
       <View>
           <DetailedArea />
       </View>
)}

Detailed Area

render(){
   return(
      <TouchableHighlight onPress={this.props.navigation.navigate('DetailPage')}>
         <Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
      </TouchableHighlight>
)}

jtmarmon · Accepted Answer · 2017-07-18 18:37:28Z

3

the HomeScreen has this.props.navigation, but it isn't passed down to DetailedArea.

I recommend the following:

HomeScreen

render(){
   return(
       <View>
           <DetailedArea onNavigate={() =>  this.props.navigation.navigate('DetalPage')} />
       </View>
)}

DetailedArea

render(){
   return(
      <TouchableHighlight onPress={this.props.onNavigate}>
         <Text>CLICK HERE TO GO TO DETAIL PAGE</TEXT>
      </TouchableHighlight>
)}

answered Jul 18, 2017 at 18:37

jtmarmon

6,2698 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-native-navigation navigate through a different component instead of from a page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related