React Navigation Nested No Route Params v5

Question

I can't seem to get any route params in my nested navigator. The params are present in the parent navigator, but they are not reachable in the child navigator.

So the child navigator does render the correct screen, but it does not have any params in the route (namely a category or product id).

It feels like I am misusing some syntax, but I can't quite figure out which one. Here is the stack of code, edited down a bit to make it easier to read.

Snack on Expo

Thank you.

Note: These are separate files so the includes are off.

import * as React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator, DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer'
import { createStackNavigator } from '@react-navigation/stack'
import { AppearanceProvider } from 'react-native-appearance'

const Drawer = createDrawerNavigator()
const Stack = createStackNavigator()

const HomeScreen = ({ navigation, route }) => {
  return(
    <View style={styles.container}>
      <Text>Home Screen </Text>
    </View>
  )
}

const CategoryScreen = ({ navigation, route }) => {
  return(
    <View>
      <Text>Category Screen </Text>
      <Text>{JSON.stringify(route)}</Text>
    </View>
  )
}

const ProductScreen = ({ navigation, route }) => {
  return(
    <View>
      <Text>Product Screen </Text>
      <Text>{JSON.stringify(route)}</Text>
    </View>
  )
}

const CustomDrawerContent = ({ props }) => {

  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Home"
        onPress={() => props.navigation.navigate('Home')}
      />
      <DrawerItem
        label="Category 1"
        onPress={() =>
          props.navigation.navigate('Main', {
            Screen: 'Category',
            params: { id: 1 },
          })
        }
      />
      <DrawerItem
        label="Category 2"
        onPress={() =>
          props.navigation.navigate('Main', {
            Screen: 'Category',
            params: { id: 101 },
          })
        }
      />
    </DrawerContentScrollView>
  )
}

const MainNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Category" component={CategoryScreen} />
      <Stack.Screen name="Product" component={ProductScreen} />
    </Stack.Navigator>
  )
}

const ApplicationNavigator = () => {

  return (
    <NavigationContainer initialRouteName="Home">
      <Drawer.Navigator
        drawerContent={(props) => {
          return <CustomDrawerContent props={props} />
        }}
      >
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
        />
        <Drawer.Screen
          name="Main"
          component={MainNavigator}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}

export default function App() {
  return <ApplicationNavigator />
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    padding: 8,
    backgroundColor: '#FFFFFF',
  },
});

UPDATE

I have noted that if I initialize the params (blank, with values, whichever) outside of the custom drawer content first, the above code begins to work as expected.

Romuloux Romuloux · Accepted Answer · 2021-01-11T20:41:31

Very simple and silly fix that a rubber duck could solve.

Screen !== screen. I was passing in an unknown param to navigate.

React Navigation Nested No Route Params v5

1 Answers