How to get the route params using route.params in react native navigation?

Question

I am using react native with react native navigation.When I try to access the route.params it says its an undefined object. I am able to navigate to the PokeDetails screen using the this.props.navigation.navigate method, but I am unable to get the params from route.params.etc..... Please see my code below. Thanks!

//Home.js

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";



class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    }

    render() {
        const showIndicator = this.state.isLoading == true ? <ActivityIndicator size="large" color="#0000ff" /> : null;
        return(
            <View style={GlobalStyles.container}>
                <View style={GlobalStyles.activityIndicator}>{showIndicator}</View>
                <FlatList 
                    numColumns={1}
                    data={this.state.dataSource} 
                    renderItem={({item})=> 
                    <TouchableOpacity onPress={()=> this.props.navigation.navigate("PokeDetails", {item} )}>
                        <PokeDetails imageUrl={`https://projectpokemon.org/images/normal-sprite/${item.name}.gif`} name={item.name} item={item} />
                    </TouchableOpacity>
                    }/>
                <Button onPress={()=> this.props.navigation.navigate("About")} title="Go to about"/>
            </View>
        )
    }
}


export default Home;



// PokeDetails.js

import React from "react";
import { View, Text , Image, Button} from "react-native";
import {GlobalStyles} from "../styles/GlobalStyles";
import { TouchableOpacity } from "react-native-gesture-handler";



const PokeDetails =({route})=> {
    return(
        <View style={GlobalStyles.container}>  
                <Text>{route.params.item}</Text>
                {/* <Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
                <Text style={GlobalStyles.pokeText}>{name}</Text> */}
        </View>
    )
}


export default PokeDetails;


// Root.js

import React from "react"
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import PokeDetails from "../screens/PokeDetails";
import { NavigationContainer } from '@react-navigation/native';



const Root =() => {
    const Stack = createStackNavigator();
    return(
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home}/>
            <Stack.Screen name="PokeDetails" component={PokeDetails}/>
        </Stack.Navigator>
    )
}


export default Root;



// App.js


import 'react-native-gesture-handler';
import React from 'react';
import { View , StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from "@react-navigation/drawer";
import About from "./screens/About";
import Root from "./Route/Root";
import PokeDetails from "./screens/PokeDetails"



const App =()=> {

  const Drawer = createDrawerNavigator();

  return(
    <View style={styles.container}>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={Root}/>
          <Drawer.Screen name="About" component={About}/>
        </Drawer.Navigator>
      </NavigationContainer>
    </View>
  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})



export default App;

Hi again Dushan, I have made edits and added Root.js and App.js above to show the code of the stack navigator and drawer navigator. Basically, Root.js holds the stack navigation container. App.js holds the drawer navigation that nests the stack navigator Root component. Thanks again! — UI Developer, Apr 27 '20 at 19:43

score 5 · Answer 1 · answered Apr 27 '20 at 17:28

5

If you are using React Navigation v5.x you can use useRoute hook.

Documentation here

Example:

import * as React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

function MyText() {
  const route = useRoute();

  return <Text>{route.params.caption}</Text>;
}

answered Apr 27 '20 at 17:28

CevaComic

2,056
2
6
12

1

Thanks for your response! I have done this. After I have implemented this, I console.log const route and the params key is there but value is undefined for some reason. – UI Developer Apr 27 '20 at 18:58
const tagsData = this.props.route?.params?.getAllTages; is not working for me in the class component it is not recieiving the props – Sushil Apr 04 '23 at 03:11

score 2 · Accepted Answer · answered Apr 29 '20 at 10:57

change

const PokeDetails =({route})=> {
    return(
        <View style={GlobalStyles.container}>  
                <Text>{route.params.item}</Text>
                {/* <Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
                <Text style={GlobalStyles.pokeText}>{name}</Text> */}
        </View>
    )
}

to

const PokeDetails =(route)=> {
    return(
        <View>  
                <Text>{route.route.params.item.name}</Text>
                {/* <Image source={{uri: imageUrl}} style={{height: 50, width: 50}}/>
                <Text style={GlobalStyles.pokeText}>{name}</Text> */}
        </View>
    )
}

Hope this helps!

Thanks! I found this to be the answer – UI Developer Apr 29 '20 at 16:29 — UI Developer, Apr 29 '20 at 16:29

How to get the route params using route.params in react native navigation?

2 Answers2