React native navigating using a button

Question

I want to navigate between pages using react-native. I have total three pages. I can navigate from first -> second -> third page.

However, from the third page, when I try to go back to the first page I am getting an error "undefined is not an object (evaluating'_this2.props.navigation.navigate).

In the third page, unlike the other two pages, I imported a class to navigate back to the first page but it's giving me an error. Below is my code.

This is my App.js:

import React, {Component} from 'react'
import {View,Text,StyleSheet,ScrollView,Image,Button} from "react-native"
import FirstScreen from './FirstScreen'
import SecondScreen from './SecondScreen'
import ThirdScreen from './ThirdScreen'
import {StackNavigator} from 'react-navigation'

class App extends Component {
  render(){
    return(
    <MyApp/>
    )
  }
}

const MyApp = StackNavigator({
  Frist:FirstScreen,
  Second:SecondScreen,
  Third:ThirdScreen
})

export default App

This is my first screen code:

import React, {Component} from 'react'
import{ View,StyleSheet,Button} from 'react-native'

class FirstScreen extends Component{
  render() {
    return(
      <View style={styles.container}>
            <Button title="go to Second screen"
               onPress={()=>this.props.navigation.navigate('Second')}>
            </Button>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default FirstScreen

This is my second screen code:

import React, {Component} from 'react'
import{ View, StyleSheet,Button} from 'react-native'
import CardDetail from './Components/CardDetail'

class SecondScreen extends Component {
  render(){
    return(
      <View style={styles.container}>

        <Button title="go to Third screen"
            onPress={()=>this.props.navigation.navigate('Third')}/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    paddingTop:20,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default SecondScreen

This is my third screen code:

import React, {Component} from 'react'
import{ View,Button,StyleSheet} from 'react-native'
import CardDetail from './Components/CardDetail'

class ThirdScreen extends Component{
  render() {
    return(
      <View style={styles.container}>
            <CardDetail/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default ThirdScreen

And this is the class I imported:

import React, {Component} from 'react'
import {View,
  StyleSheet,
  Button} from 'react-native'

class CardDetail extends Component{
  render() {
    return(
      <View style={styles.container}>
            <Button title="go back to First screen"
                    onPress={()=>this.props.navigation.navigate('First')}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})
export default CardDetail

Anthony · Accepted Answer · 2018-07-05 16:06:25Z

1

<CardDetail /> is not provided the navigation prop i.e.

<CardDetail navigation={this.props.navigation} />

react-navigation will provide the navigation prop automatically to screens specified in the navigator creation, but if you want children components on those screens to use it, you would need to give it to them via context or manually as above.

answered Jul 5, 2018 at 16:06

Anthony

6,5122 gold badges20 silver badges36 bronze badges

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

2 Comments

kirimi Over a year ago

I changed the <CardDetail /> to <CardDetail navigation={this.props.navigation} />. This made the error go away, however, this won't navigate me back to other screens. Nothing happens when I click the button.

kirimi Over a year ago

Nope, I made a mistake. You are right it works great!

codingGeneral · Accepted Answer · 2018-07-05 18:06:10Z

0

try looking into BrowserRouter

here is an example:

 <Route path="/name" exact strict render={
        ()=> {
          return (
            <div> your code </div> ....

answered Jul 5, 2018 at 18:06

codingGeneral

611 silver badge10 bronze badges

Collectives™ on Stack Overflow

React native navigating using a button

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related