CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
kirimi
kirimi

Reputation: 1400

React native navigating using a button

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

Upvotes: 0

Views: 95

Answers (2)

codingGeneral
codingGeneral

Reputation: 61

try looking into BrowserRouter

here is an example: 

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

Upvotes: 0

Anthony
Anthony

Reputation: 6502

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

<CardDetail navigation={this.props.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.

Upvotes: 1

Related Questions