Undefined is not an object evaluating route.params.input. ERROR when passing data between components-CodePudding

I am getting the above error when passing the text input from one screen to another. Interestingly error is there when the app is launched and it is crashing the app. However, if I delete the line in the below code : const { input } = route.params; run the app. It will not crash. So, I can navigate to the screen with text input. Put some text in. And then add back the line const { input } = route.params; the app works, and data is passing from screen to screen. If I refresh the app, it crashes. I tried to hard code some data, so the Textinput is not empty when the app is launching. It did not work, app is still crashing on launch. Below is my code? Any ideas why mentioned behaviour is occurring?

Here I am navigating on Screen : Opci Podaci where the text input is located and also displaying data {input}:

import React, {useContext, useState} from "react";
import styled from "styled-components";
import { Text, View, ScrollView} from "react-native";
import {List} from "react-native-paper";
import { OpciPodaciOglasInput } from "../../components/iznajmljivanje.PodaciInput/opciPodaciInput";

    export const IznajmiScreen = ({navigation, route}) => {
      const { input } = route.params;
    
      return (
        <>
        <SectionContainer>
          <ScrollView>
        <List.Accordion
              title="Detalji Oglasa"
              left={(props) => <List.Icon {...props} icon="car-sports" />}
              expanded={detaljiExpanded}
              onPress={() => setDetaljiExpanded(!detaljiExpanded)}
            >
              <List.Item  title="Unesi Opis..."
              onPress={()=>navigation.navigate("Opci Podaci")} />
              <List.Item />
          </List.Accordion>
    
          <Text>{input}</Text>
    
          </ScrollView>
        </SectionContainer>
        </>
      );
      };

Text input screen(Opci podaci in the code):

import React, {useState} from "react";
import styled from "styled-components";
import {TextInput, View, StyleSheet, Text, Button} from "react-native";

export const OpciPodaciOglasInput = ({navigation}) => {
const [input, setInput] = useState("");

return( 
    <>
    <Button title="Save"
    onPress={()=>navigation.navigate("Rent a car", {input})}/>
   <InputContainer>
   <Text>Unesi Podatke</Text>
   <TextInput style={styles.input} 
    placeholder="300 rijeci maximum"
    multiline = {true}
    maxLength={300}
    onChangeText={(text)=> setInput(text)}
    returnKeyType='done'
    value={input}
    onSubmitEditing={()=>{
      navigation.navigate('Rent a car',{input});
      setInput("");
    }}
    />
    </InputContainer>  
    </>
  );
};

And my navigation:

import React from "react";
import { Button } from "react-native";
import {createStackNavigator, CardStyleInterpolators} from "@react-navigation/stack";

import { IznajmiScreen } from "../screens/tabNavigation.screens/iznajmiScreen";
import { OpciPodaciOglasInput } from "../components/iznajmljivanje.PodaciInput/opciPodaciInput";

const IznajmiStack = createStackNavigator();

export const IznajmiScreenNavigator = ({ route, navigation }) => {
  return (
    <IznajmiStack.Navigator
      screenOptions="screen"
      screenOptions={{
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
      }}
    >
      <IznajmiStack.Screen
      options={{headerRight:()=>(<Button title="Predaj Oglas"
      onPress={()=>{}}/>)}} //TODO on PRESS
      name="Rent a car"
      component={IznajmiScreen}
      />
      <IznajmiStack.Screen name="Opci Podaci" component={OpciPodaciOglasInput}/>
    </IznajmiStack.Navigator>
  );
};

CodePudding user response：

The issue is the line const { input } = route.params; - before react-navigation populates the route object, you will get an error trying to reference its nested properties. Safely accessing the route object will prevent this, i.e.

const { input } = route?.params || {};