CODEWITHSUNDEEP
javascriptreactjsreact-native
Spikes
Spikes

Reputation: 31

React Navigation 5 route.params undefined even though I provide a prop

I am currently stuck on a react navigation problem and I have consulted the docs as well and it seems like I am setting it up correctly but I may be missing something. I have a button that is routing to the main screen and am passing a prop 

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, Picker } from 'react-native';
// not sure if i need to import navigation? It seems to work since it's a screen

const LevelScreen = ({ navigation }) => {
    const [ gridSize, setGridAmount ] = useState(3);

    return (
             // OTHER CODE THAT SHOULDN'T REALLY HAVE AN EFFECT ON THIS

             <Button
                title='Continue'
                // this should navigate to the mainScreen
                // needs to pass in row and column 
                onPress={() => navigation.navigate(
                  'Game', { gridSizeVal: 3 }
                )}
            />

and this is the screen i'm navigating to:

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text, Button, Alert } from 'react-native';
import Grid from '../components/Grid';
import ConsoleBox from '../components/ConsoleBox';
import COLORS from '../core/commonText';
// Not sure if i need to import navigation from react/react-native? 

const GameScreen = ({ route, navigation }) => {
    const { gridSizeValue } = route.params;
    // The rest of my code

but it keeps responding with a TypeError: undefined is not an object (evaluating 'route.params') I attempted to use both route.params.gridSizeValue and route.params.gridSizeValue.name but they all resort to the same error. I am currently on version 5.0.9 for react-navigation/native. I've consulted https://reactnavigation.org/docs/params and it seems like i'm doing everything except I use arrow functions instead of explicit functions and I'm still learning react-native so that might not have any differences? If this is a duplicate question I would gladly go to that question but I can't seem to find anything. Thanks!

EDIT: I ran a console.log(route) and it returned undefined. I also tried to use onPress={() => this.props.navigation.navigate('Game', { gridSizeVal: 3})} but got a typeError: Undefined is not an object (evalutating '_this.props.navigation').

I also figured the my App.js and index.js might have something to do with it so this is the App.js:

import 'react-native-gesture-handler';
import { createAppContainer } from 'react-navigation';
import GameScreen from './src/screens/GameScreen';
import { createStackNavigator } from 'react-navigation-stack';
import LevelScreen from './src/screens/LevelScreen';

const navigator = createStackNavigator(
  {
    Level: LevelScreen,
    Game: GameScreen
  },
  {
    initialRouteName: 'Level',
    defaultNavigationOptions: {
      title: 'Game Of Seasons'
    }
  }
);

export default createAppContainer(navigator);

and my index.js is:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Upvotes: 1

Views: 9390

Answers (3)

cchapin
cchapin

Reputation: 210

You are importing version 4.x of react-navigation but you are following the documentation for 5.x. Destructured {route} was not available in 4.x (instead the passed in parameters came from navigation.state.params).

See the official documentation for more details: https://reactnavigation.org/docs/upgrading-from-4.x

Upvotes: 4

za_ali33
za_ali33

Reputation: 436

If your stack navigator is the root navigator, then you can easily pass the parameters to the other screen (same level as the current screen) as follows.

<Button onPress={() => navigation.navigate('nameComponentInStack', {screen: 'ScreenName', params: {paramName: paramValue}})}

Upvotes: 1

Spikes
Spikes

Reputation: 31

So the answer ended up being navigation.state.params.gridSizeVal and the code block with it was:

const GameScreen = ({ navigation }) => {
    const [ gridSize, setGridSize ] = useState(navigation.state.params.gridSizeVal);

One problem I have is that I wasn't able to assign the prop to a value in this example:

let { gridSizeValue } = navigation.state.params.gridSizeVal;

Console logging the above returned undefined but this worked for my problem of getting the params through the navigation stack.

Upvotes: -2

Related Questions