Nesting react native navigation

Question

I am learning react native and trying to make an app that as a Tab Navigator as the main navigator and I am trying to use Stack Navigation to show single page view.

Here is my App.js

  import TopMovies from './components/TopMovies';
  import { StyleSheet, Text, View, Image, ViewPagerAndroid, TextInput, ScrollView, Button, Alert } from 'react-native';
  import { TabNavigator } from 'react-navigation';
  import Ionicons from 'react-native-vector-icons/Ionicons';

  const MainScreenPage = () => (
   <View>
      <TopMovies />
   </View>
   )

 const SearchPage = () => (
  <View style={{alignItems: 'center', justifyContent: 'center'}}>
  </View>
  )

  const RootTabs = TabNavigator({
  MSPage: {
    screen: MainScreenPage,
    navigationOptions: {
      tabBarLabel: 'Top Movies',
      tabBarIcon: ({ tintColor, focused } )=>(
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: tintColor }}
      />
      ),
    },
  },
  SPage: {
    screen: SearchPage,
    navigationOptions: {
      tabBarLabel: 'Search',
      tabBarIcon: ({ tintColor, focused } )=>(
        <Ionicons
        name={focused ? 'ios-home' : 'ios-home-outline'}
        size={26}
        style={{ color: tintColor }}
      />
      ),
    },
  },
  });

So I have two Screens named MainScreenPage and SearchPage. Now inside the MainScreenPage I have a component called TopMovies where I fetch API and render the data in a loop.

Here is my TopMovies component.

  import React from 'react';
  import { StyleSheet, Text, View, Image, FlatList, Alert, Button } from 'react-native';
  import { StackNavigator } from 'react-navigation';

  class DetailsPage extends React.Component {
    render() {
      return(
        <View>
           <Text>details</Text>
        </View>
          )
      }
   }

export default class TopMovies extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
        apiTopLoaded: false,
        topPopularMovies: [],    
    }
    this.conditionalTopPopular = this.conditionalTopPopular.bind(this);
 }


  componentDidMount() {
   fetch('someurl')
    .then((response)=>{
        response.json()
            .then((popularMovies) => {
                this.setState({
                    apiTopLoaded: true,
                    topPopularMovies: popularMovies.results,
                })
            })
         })
       }

  conditionalTopPopular() {
    if(this.state.apiTopLoaded===true) {
        return(
            <View>
                <FlatList
                    data={this.state.topPopularMovies}
                    renderItem={({ item }) => (
                    <View>
                        <Text>{item.original_title}</Text>
                        <Button onPress={()=>this.props.navigation.navigate("Details")} title="See Details"/>
                    </View>
                    )}
                    keyExtractor={item => item.id}
                />
            </View>
        )       
      }
     }

  render() {
    return (
      <View>
        {this.conditionalTopPopular()}
      </View>
     );
   }
  }


  const StackConst = StackNavigator ({
   Details : {
     screen: DetailsPage,
       }
     })

  export default StackConst;

There is a button in the flatlist, when clicked, should open a new screen called "Details". But I get an error that says "undefined is not an object (evaluating '_this4.props.navigation.navigate') on the onPress Button line. I dont know what is causing this. Is it because my stack navigation is inside the tab navigation and I need to somehow link them? Also, another problem I am having is not being able to export the StackConst. I cannot export it because I am already exporting TopMovies component as default and when I try to do export default StackConst, it says I can only export one default per module. Please help.

Answer 1

Could you please try passing navigation props to the component Topmovies ?

`

const MainScreenPage=(props)=>(
   <View>
      <TopMovies navigation={props.navigation}/>
   </View>
 )

`