title: Undefined is not an object evaluating route.params.input. ERROR when passing data between components. REACT NATIVE
body: <p>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?</p>
  <p>Here I am navigating on Screen : Opci Podaci where the text input is located and also displaying data {input}:</p>
  <pre><code>import React, {useContext, useState} from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import { Text, View, ScrollView} from &quot;react-native&quot;;
  import {List} from &quot;react-native-paper&quot;;
  import { OpciPodaciOglasInput } from &quot;../../components/iznajmljivanje.PodaciInput/opciPodaciInput&quot;;
  
      export const IznajmiScreen = ({navigation, route}) =&gt; {
        const { input } = route.params;
      
        return (
          &lt;&gt;
          &lt;SectionContainer&gt;
            &lt;ScrollView&gt;
          &lt;List.Accordion
                title=&quot;Detalji Oglasa&quot;
                left={(props) =&gt; &lt;List.Icon {...props} icon=&quot;car-sports&quot; /&gt;}
                expanded={detaljiExpanded}
                onPress={() =&gt; setDetaljiExpanded(!detaljiExpanded)}
              &gt;
                &lt;List.Item  title=&quot;Unesi Opis...&quot;
                onPress={()=&gt;navigation.navigate(&quot;Opci Podaci&quot;)} /&gt;
                &lt;List.Item /&gt;
            &lt;/List.Accordion&gt;
      
            &lt;Text&gt;{input}&lt;/Text&gt;
      
            &lt;/ScrollView&gt;
          &lt;/SectionContainer&gt;
          &lt;/&gt;
        );
        };
  </code></pre>
  <p>Text input screen(Opci podaci in the code):</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import {TextInput, View, StyleSheet, Text, Button} from &quot;react-native&quot;;
  
  export const OpciPodaciOglasInput = ({navigation}) =&gt; {
  const [input, setInput] = useState(&quot;&quot;);
  
  return( 
      &lt;&gt;
      &lt;Button title=&quot;Save&quot;
      onPress={()=&gt;navigation.navigate(&quot;Rent a car&quot;, {input})}/&gt;
     &lt;InputContainer&gt;
     &lt;Text&gt;Unesi Podatke&lt;/Text&gt;
     &lt;TextInput style={styles.input} 
      placeholder=&quot;300 rijeci maximum&quot;
      multiline = {true}
      maxLength={300}
      onChangeText={(text)=&gt; setInput(text)}
      returnKeyType='done'
      value={input}
      onSubmitEditing={()=&gt;{
        navigation.navigate('Rent a car',{input});
        setInput(&quot;&quot;);
      }}
      /&gt;
      &lt;/InputContainer&gt;  
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>And my navigation:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Button } from &quot;react-native&quot;;
  import {createStackNavigator, CardStyleInterpolators} from &quot;@react-navigation/stack&quot;;
  
  import { IznajmiScreen } from &quot;../screens/tabNavigation.screens/iznajmiScreen&quot;;
  import { OpciPodaciOglasInput } from &quot;../components/iznajmljivanje.PodaciInput/opciPodaciInput&quot;;
  
  const IznajmiStack = createStackNavigator();
  
  export const IznajmiScreenNavigator = ({ route, navigation }) =&gt; {
    return (
      &lt;IznajmiStack.Navigator
        screenOptions=&quot;screen&quot;
        screenOptions={{
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      &gt;
        &lt;IznajmiStack.Screen
        options={{headerRight:()=&gt;(&lt;Button title=&quot;Predaj Oglas&quot;
        onPress={()=&gt;{}}/&gt;)}} //TODO on PRESS
        name=&quot;Rent a car&quot;
        component={IznajmiScreen}
        /&gt;
        &lt;IznajmiStack.Screen name=&quot;Opci Podaci&quot; component={OpciPodaciOglasInput}/&gt;
      &lt;/IznajmiStack.Navigator&gt;
    );
  };
  </code></pre>