CODEWITHSUNDEEP
react-nativereact-native-navigation
Chetan
Chetan

Reputation: 489

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

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>
)}

Upvotes: 0

Views: 259

Answers (1)

jtmarmon
jtmarmon

Reputation: 6179

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>
)}

Upvotes: 3

Related Questions