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);

Answer

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.

Leave a Reply

Your email address will not be published. Required fields are marked *