title: React Navigation: passing parameters to a route: TyperError
body: <p>I have a list of profiles on my Screen "NerdList" built using ListItems (react-native-element) and a Flatlist. When you click on a profile from the list, the app should navigate to the "Profile" screen and pass a test parameter with it.
  NerdList Screen:</p>
  
  <pre><code>import React from "react";
  import { withNavigation } from '@react-navigation/compat';
  import { StyleSheet, FlatList} from "react-native";
  import { ListItem } from "react-native-elements";
  import nerdProfiles from '../constants/nerdProfiles';
  import { Block, Text } from 'galio-framework';
  import argonTheme from "../constants/Theme";
  import { TouchableOpacity } from "react-native-gesture-handler";
  
  class NerdList extends React.Component {
      renderItem = ({item}) =&gt; (
      &lt;TouchableOpacity
      onPress={() =&gt; this.props.navigation.navigate('Profile', {test: 'Hello'})}
      &gt;
        &lt;ListItem 
          title={
            &lt;Block&gt;
            &lt;Text style={styles.names}&gt;
            {item.name}
            &lt;/Text&gt;
          &lt;/Block&gt;
          }
          subtitle={
            &lt;Block&gt;
              &lt;Text style={styles.descriptions}&gt;
              {item.shortDescription}
              &lt;/Text&gt;
            &lt;/Block&gt;
          }
          leftAvatar={{ source: { uri: item.image } }}
          bottomDivider
          chevron
              /&gt;
      &lt;/TouchableOpacity&gt;
      );
  
      render() {
      return (
        &lt;FlatList 
          data={nerdProfiles.bios}
          renderItem={this.renderItem}
          keyExtractor={item =&gt; item.id}
        /&gt;
      );
    };
  };
  export default withNavigation(NerdList);
  </code></pre>
  
  <p>The navigation alone works, but when I try to pass a parameter, I receive a TypeError: undefined is not an object (evaluating '_ref3.route').</p>
  
  <p>Here is the code I am using to receive the route on the "Profile" screen:</p>
  
  <pre><code>const {test} = route.params;
  </code></pre>
  
  <p>Full Profile Screen Code:</p>
  
  <pre><code>import React from "react";
  import {
    StyleSheet,
    Dimensions,
    ScrollView,
    Image,
    ImageBackground,
    Platform
  } from "react-native";
  import { Block, Text, theme } from "galio-framework";
  
  import { Button } from "../components";
  import { Images, argonTheme } from "../constants";
  import { HeaderHeight } from "../constants/utils";
  import { FlatList, TouchableWithoutFeedback } from "react-native-gesture-handler";
  import nerdProfiles from "../constants/nerdProfiles";
  import ArticleCard from "../components/ArticleCard";
  import VideoCard from "../components/VideoCard";
  
  
  const { width, height } = Dimensions.get("screen");
  
  const thumbMeasure = (width - 48 - 32) / 3;
  
  //keyExtractor = (item, index) =&gt; index.toString()
  
  class Profile extends React.Component {
    renderVideoItem = ({item}) =&gt; {
      return(
        &lt;Block style={{ marginRight: theme.SIZES.BASE }}&gt;
          &lt;TouchableWithoutFeedback&gt;
          &lt;VideoCard
            item={item}
            imageStyle={{ width: "auto", height: 94 }}
            style={{ width: width / 3.75}}
          /&gt;
          &lt;/TouchableWithoutFeedback&gt;
        &lt;/Block&gt;
      );
    };
  
    renderArticleItem = ({item}) =&gt; {
      return(
        &lt;Block style={{ marginRight: theme.SIZES.BASE }}&gt;
          &lt;TouchableWithoutFeedback&gt;
          &lt;ArticleCard
            item={item}
            imageStyle={{ width: "auto", height: 94 }}
            style={{ width: width / 3.75}}
          /&gt;
          &lt;/TouchableWithoutFeedback&gt;
        &lt;/Block&gt;
      );
    };
  
    render() {
      const { params } = this.props.navigation.state;
      const test= params ? params.test: null;
      return (
        &lt;Block flex style={styles.profile}&gt;
          &lt;Block flex&gt;
            &lt;ImageBackground
              source={Images.ProfileBackground}
              style={styles.profileContainer}
              imageStyle={styles.profileBackground}
            &gt;
              &lt;ScrollView
                showsVerticalScrollIndicator={false}
                style={{ width, marginTop: "25%" }}
              &gt;
                &lt;Block flex style={styles.profileCard}&gt;
                  &lt;Block middle style={styles.avatarContainer}&gt;
                    &lt;Image
                      source={{uri: nerdProfiles.bios[0].image}}
                      style={styles.avatar}
                    /&gt;
                  &lt;/Block&gt;
                  &lt;Block style={styles.info}&gt;
                    &lt;Block
                      middle
                      row
                      space="evenly"
                      style={{ marginTop: 20, paddingBottom: 24 }}
                    &gt;
                      &lt;Button
                        small
                        style={{ backgroundColor: argonTheme.COLORS.DEFAULT }}
                      &gt;
                        FOLLOW
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                    &lt;Block row space="between"&gt;
                      &lt;Block middle&gt;
                        &lt;Text
                          size={18}
                          color="#525F7F"
                          style={{ marginBottom: 4, fontFamily: 'open-sans-bold' }}
                        &gt;
                          2K
                        &lt;/Text&gt;
                        &lt;Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.TEXT}&gt;Followers&lt;/Text&gt;
                      &lt;/Block&gt;
                      &lt;Block middle&gt;
                        &lt;Text
                          color="#525F7F"
                          size={18}
                          style={{ marginBottom: 4, fontFamily: 'open-sans-bold' }}
                        &gt;
                          10
                        &lt;/Text&gt;
                        {test}
                        &lt;Text style={{ fontFamily: 'open-sans-regular' }} size={12} color={argonTheme.COLORS.TEXT}&gt;Content&lt;/Text&gt;
                      &lt;/Block&gt;
                    &lt;/Block&gt;
                  &lt;/Block&gt;
                  &lt;Block flex&gt;
                    &lt;Block middle style={styles.nameInfo}&gt;
                      &lt;Text style={{ fontFamily: 'open-sans-regular' }} size={28} color="#32325D"&gt;
                        {test}
                      &lt;/Text&gt;
                      &lt;Text size={16} color="#32325D" style={{ marginTop: 10, fontFamily: 'open-sans-light' }}&gt;
                        {nerdProfiles.bios[0].location}
                      &lt;/Text&gt;
                    &lt;/Block&gt;
                    &lt;Block style={styles.categories}&gt;
                      &lt;Button small&gt;Math&lt;/Button&gt;
                      &lt;Button small&gt;Finance&lt;/Button&gt;
                      &lt;Button small&gt;Physics&lt;/Button&gt;
                    &lt;/Block&gt;
                    &lt;Block middle style={{ marginTop: 30, marginBottom: 16 }}&gt;
                      &lt;Block style={styles.divider} /&gt;
                    &lt;/Block&gt;
                    &lt;Block middle&gt;
                      &lt;Text
                        size={16}
                        color="#525F7F"
                        style={{ textAlign: "center", fontFamily: 'open-sans-regular' }}
                      &gt;
                        {nerdProfiles.bios[0].longDescription}
                      &lt;/Text&gt;
                      &lt;Button
                        color="transparent"
                        textStyle={{
                          color: "#233DD2",
                          fontWeight: "500",
                          fontSize: 16, 
                          fontFamily: 'open-sans-regular'
                        }}
                      &gt;
                        Show more
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                    &lt;Block
                      row
                      style={{ paddingVertical: 14 }}
                      space="between"
                    &gt;
                      &lt;Text bold size={16} color="#525F7F" style={{ marginTop: 3 }}&gt;
                        Video Appearances
                      &lt;/Text&gt;
                      &lt;Button
                        small
                        color="transparent"
                        textStyle={{ color: "#5E72E4", fontSize: 14 }}
                      &gt;
                        View all
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                      &lt;Block style={{ marginHorizontal: theme.SIZES.BASE }}&gt;
                        &lt;FlatList 
                        style={styles.flatlist}
                        keyExtractor={this.keyExtractor}
                        data={nerdProfiles.bios[0].videos}
                        renderItem={this.renderVideoItem}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        /&gt;
                      &lt;/Block&gt;
                      &lt;Block
                      row
                      style={{ paddingVertical: 14 }}
                      space="between"
                    &gt;
                      &lt;Text bold size={16} color="#525F7F" style={{ marginTop: 3 }}&gt;
                        Articles Written
                      &lt;/Text&gt;
                      &lt;Button
                        small
                        color="transparent"
                        textStyle={{ color: "#5E72E4", fontSize: 14 }}
                      &gt;
                        View all
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                      &lt;Block style={{ marginHorizontal: theme.SIZES.BASE }}&gt;
                        &lt;FlatList 
                        style={styles.flatlist}
                        keyExtractor={this.keyExtractor}
                        data={nerdProfiles.bios[0].articles}
                        renderItem={this.renderArticleItem}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        /&gt;
                      &lt;/Block&gt;
                    &lt;Block
                      row
                      style={{ paddingVertical: 14 }}
                      space="between"
                    &gt;
                      &lt;Text bold size={16} color="#525F7F" style={{ marginTop: 3 }}&gt;
                        Podcast Appearances
                      &lt;/Text&gt;
                      &lt;Button
                        small
                        color="transparent"
                        textStyle={{ color: "#5E72E4", fontSize: 14 }}
                      &gt;
                        View all
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                    &lt;Block
                      row
                      style={{ paddingVertical: 14 }}
                      space="between"
                    &gt;
                      &lt;Text bold size={16} color="#525F7F" style={{ marginTop: 3 }}&gt;
                        Live Appearances
                      &lt;/Text&gt;
                      &lt;Button
                        small
                        color="transparent"
                        textStyle={{ color: "#5E72E4", fontSize: 14 }}
                      &gt;
                        View all
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                    &lt;Block
                      row
                      style={{ paddingVertical: 14 }}
                      space="between"
                    &gt;
                      &lt;Text bold size={16} color="#525F7F" style={{ marginTop: 3 }}&gt;
                        Academic Work
                      &lt;/Text&gt;
                      &lt;Button
                        small
                        color="transparent"
                        textStyle={{ color: "#5E72E4", fontSize: 14 }}
                      &gt;
                        View all
                      &lt;/Button&gt;
                    &lt;/Block&gt;
                  &lt;/Block&gt;
                &lt;/Block&gt;
                &lt;Block style={{ marginBottom: 25 }}/&gt;
              &lt;/ScrollView&gt;
            &lt;/ImageBackground&gt;
          &lt;/Block&gt;
        &lt;/Block&gt;
      );
    }
  }
  </code></pre>
  
  <p>NerdList screen (first screen)</p>
  
  <pre><code>import React from "react";
  import { Dimensions } from "react-native";
  
  import { createStackNavigator } from "@react-navigation/stack";
  import { createDrawerNavigator } from "@react-navigation/drawer";
  import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  
  // screens
  import Feed from "../screens/Feed";
  // import Onboarding from "../screens/Onboarding";
  import Pro from "../screens/Pro";
  import Profile from "../screens/Profile";
  import Register from "../screens/Register";
  import Elements from "../screens/Elements";
  import Articles from "../screens/Articles";
  import Search from "../screens/Search";
  import Cart from "../screens/Cart";
  import NerdList from "../screens/NerdList";
  
  // settings
  import SettingsScreen from "../screens/Settings";
  import AgreementScreen from "../screens/Agreement";
  import PrivacyScreen from "../screens/Privacy";
  import AboutScreen from "../screens/About";
  import NotificationsScreen from "../screens/Notifications";
  // Notifications
  import PersonalNotifications from "../screens/PersonalNotifications";
  import SystemNotifications from "../screens/SystemNotifications";
  
  // drawer
  import CustomDrawerContent from "./Menu";
  
  // header for screens
  import { Icon, Header } from "../components";
  import { argonTheme, tabs } from "../constants";
  import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
  
  
  const { width } = Dimensions.get("screen");
  
  export const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();
  const Tab = createBottomTabNavigator();
  
  function NotificationsStack() {
    return (
      &lt;Tab.Navigator
        screenOptions={({ route }) =&gt; ({
          tabBarIcon: ({ color }) =&gt; {
            let iconName;
            if (route.name === "Personal") {
              iconName = "user";
            } else if (route.name === "System") {
              iconName = "database";
            } else if (route.name === "NerdList") {
              iconName = "user"
            }
            // You can return any component that you like here!
            return (
              &lt;Icon
                name={iconName}
                family="entypo"
                size={22}
                color={color}
                style={{ marginTop: 10 }}
              /&gt;
            );
          }
        })}
        tabBarOptions={{
          activeTintColor: argonTheme.COLORS.PRIMARY,
          inactiveTintColor: "gray",
          labelStyle: {
            fontFamily: "open-sans-regular"
          }
        }}
      &gt;
        &lt;Tab.Screen name="Personal" component={PersonalNotifications} navigation /&gt;
        &lt;Tab.Screen name="System" component={SystemNotifications} /&gt;
        &lt;Tab.Screen name="NerdList" component={NerdList} /&gt;
  
      &lt;/Tab.Navigator&gt;
    );
  }
  
  function BottomTabStack() {
    return (
      &lt;Tab.Navigator
        screenOptions={({ route }) =&gt; ({
          tabBarIcon: ({ color }) =&gt; {
            let iconName;
            if (route.name === "Feed") {
              iconName = "user";
            } else if (route.name === "System") {
              iconName = "database";
            } else if (route.name === "NerdList") {
              iconName = "user"
            }
            // You can return any component that you like here!
            return (
              &lt;Icon
                name={iconName}
                family="entypo"
                size={22}
                color={color}
                style={{ marginTop: 10 }}
              /&gt;
            );
          }
        })}
        tabBarOptions={{
          activeTintColor: argonTheme.COLORS.PRIMARY,
          inactiveTintColor: "gray",
          labelStyle: {
            fontFamily: "open-sans-regular"
          }
        }}
      &gt;
        &lt;Tab.Screen name="Feed" component={Feed} /&gt;
        &lt;Tab.Screen name="System" component={SystemNotifications} /&gt;
        &lt;Tab.Screen name="NerdList" component={NerdList} /&gt;
  
      &lt;/Tab.Navigator&gt;
    );
  }
  
  function ElementsStack() {
    return (
      &lt;Stack.Navigator mode="card" headerMode="screen"&gt;
        &lt;Stack.Screen
          name="Elements"
          component={Elements}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header title="Elements" navigation={navigation} scene={scene} /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function NerdListStack() {
    return (
      &lt;Stack.Navigator mode="card" headerMode="screen"&gt;
        &lt;Stack.Screen
          name="NerdList"
          component={NerdList}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header title="NerdList" navigation={navigation} scene={scene} /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Profile"
          component={Profile} 
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                transparent
                white
                title="Profile"
                navigation={navigation}
                scene={scene}
                back={true}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#FFFFFF" },
            headerTransparent: true
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function SettingsStack() {
    return (
      &lt;Stack.Navigator mode="card" headerMode="screen"&gt;
        &lt;Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header title="Settings" scene={scene} navigation={navigation} /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Agreement"
          component={AgreementScreen}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Agreement"
                scene={scene}
                navigation={navigation}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Privacy"
          component={PrivacyScreen}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Privacy"
                scene={scene}
                navigation={navigation}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="About"
          component={AboutScreen}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header back title="About" scene={scene} navigation={navigation} /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="NotificationsSettings"
          component={NotificationsScreen}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Notifications"
                scene={scene}
                navigation={navigation}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Cart"
          component={Cart}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Shopping Cart"
                scene={scene}
                navigation={navigation}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Notifications"
          component={NotificationsStack}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Notifications"
                scene={scene}
                navigation={navigation}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function ArticlesStack() {
    return (
      &lt;Stack.Navigator mode="card" headerMode="screen"&gt;
        &lt;Stack.Screen
          name="Articles"
          component={Articles}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header title="Articles" navigation={navigation} scene={scene} /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function ProfileStack() {
    return (
      &lt;Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen"&gt;
        &lt;Stack.Screen
          name="Profile"
          component={Profile} 
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                transparent
                white
                title="Profile"
                navigation={navigation}
                scene={scene}
                back={true}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#FFFFFF" },
            headerTransparent: true
          }}
        /&gt;
        &lt;Stack.Screen
          name="Cart"
          component={Cart}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Shopping Cart"
                navigation={navigation}
                scene={scene}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#FFFFFF" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Notifications"
          component={NotificationsStack}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                back
                title="Notifications"
                navigation={navigation}
                scene={scene}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#FFFFFF" }
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function FeedStack() {
    return (
      &lt;Stack.Navigator mode="card" headerMode="screen"&gt;
        &lt;Stack.Screen
          name="Feed"
          component={BottomTabStack}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header
                title="Feed"
                navigation={navigation}
                scene={scene}
              /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
        &lt;Stack.Screen
          name="Search"
          component={Search}
          options={{
            header: ({ navigation, scene }) =&gt; (
              &lt;Header title="Search" back navigation={navigation} scene={scene} /&gt;
            ),
            cardStyle: { backgroundColor: "#F8F9FE" }
          }}
        /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function AppStack() {
    return (
      &lt;Drawer.Navigator
        style={{ flex: 1 }}
        drawerContent={props =&gt; &lt;CustomDrawerContent {...props} /&gt;}
        drawerStyle={{
          backgroundColor: "white",
          width: width * 0.8
        }}
        drawerContentOptions={{
          activeTintcolor: "white",
          inactiveTintColor: "#000",
          activeBackgroundColor: "transparent",
          itemStyle: {
            width: width * 0.75,
            backgroundColor: "transparent",
            paddingVertical: 16,
            paddingHorizonal: 12,
            justifyContent: "center",
            alignContent: "center",
            alignItems: "center",
            overflow: "hidden"
          },
          labelStyle: {
            fontSize: 18,
            marginLeft: 12,
            fontWeight: "normal"
          }
        }}
        initialRouteName="Feed"
      &gt;
        &lt;Drawer.Screen name="Feed" component={FeedStack} /&gt;
        &lt;Drawer.Screen name="Profile" component={ProfileStack} /&gt;
        &lt;Drawer.Screen name="Account" component={Register} /&gt;
        &lt;Drawer.Screen name="Elements" component={ElementsStack} /&gt;
        &lt;Drawer.Screen name="Articles" component={ArticlesStack} /&gt;
        &lt;Drawer.Screen name="Settings" component={SettingsStack} /&gt;
        &lt;Drawer.Screen name="NerdList" component={NerdListStack} /&gt;
      &lt;/Drawer.Navigator&gt;
    );
  }
  
  export default function OnboardingStack() {
    return (
      &lt;Stack.Navigator mode="card" headerMode="none"&gt;
        &lt;Stack.Screen
          name="Onboarding"
          component={Pro}
          option={{
            headerTransparent: true
          }}
        /&gt;
        &lt;Stack.Screen name="App" component={AppStack} /&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  </code></pre>