title: How to use react hooks on react-native with react-navigation
body: <p>This is App.js using react-navigation. There are two screens on it called HomeScreen and AddScreen.  </p>
  
  <pre><code>import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  import HomeScreen from './src/HomeScreen';
  import AddScreen from './src/AddScreen';
  
  const Stack = createStackNavigator();
  
  function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator initialRouteName="Home"&gt;
          &lt;Stack.Screen name="Home" component={HomeScreen} /&gt;
          &lt;Stack.Screen name="Add" component={AddScreen} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>And This is home Screen. There is a 'items' in 'useState. It is gived through Add by navigation as props. </p>
  
  <pre><code>import * as React from 'react';
  import PropTypes from 'prop-types';
  import { View, Text, Button } from 'react-native';
  
  
  function HomeScreen({ navigation, route }) {
    const [items, setItems] = React.useState([]);
  
    React.useEffect(() =&gt; {
      if (route.params?.items) {
        // Post updated, do something with `route.params.post`
        // For example, send the post to the server
        console.log('saved');
      }
    }, [route.params?.items]);
  
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Button
          title="Create post"
          onPress={() =&gt; navigation.navigate('Add', { items, setItems })}
        /&gt;
        &lt;View&gt;
          {items.map((item, i) =&gt; {
            return (
              &lt;View&gt;
                &lt;Text&gt;{item.itemName}&lt;/Text&gt;
                &lt;Text&gt;{item.itemPrice}&lt;/Text&gt;
              &lt;/View&gt;
            );
          })}
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  HomeScreen.propTypes = {
    navigation: PropTypes.object.isRequired,
  };
  
  export default HomeScreen;
  </code></pre>
  
  <p>And AddScreen receives 'items' as route.params. <br>
  And it use 'setItems' to push his own data in it.<br>
  After adding, navigation return to HomeScreen with items that is added with new item.</p>
  
  <pre><code>import * as React from 'react';
  import PropTypes from 'prop-types';
  
  import { View, Text, Button, TextInput } from 'react-native';
  
  function AddScreen({ route, navigation }) {
    const { items, setItems } = route.params;
    const [itemName, setItemName] = React.useState('');
    const [itemPrice, setItemPrice] = React.useState('0');
  
    const addItem = () =&gt; {
      setItems([...items, { itemName, itemPrice }]);
      setItemName('');
      setItemPrice('0');
    };
  
    return (
      &lt;View&gt;
        &lt;TextInput
          multiline
          placeholder="What's on your mind?"
          value={itemName}
          onChangeText={setItemName}
        /&gt;
        &lt;TextInput
          multiline
          placeholder="What's on your mind?"
          value={itemPrice}
          onChangeText={setItemPrice}
        /&gt;
        &lt;Button
          title="Done"
          onPress={() =&gt; {
            addItem();
            // Pass params back to home screen
            navigation.navigate('Home', items);
          }}
        /&gt;
      &lt;/View&gt;
    );
  }
  
  AddScreen.propTypes = {
    navigation: PropTypes.object.isRequired,
    route: PropTypes.object.isRequired,
  };
  
  export default AddScreen;
  </code></pre>
  
  <p>It works well on my purpose. <br>
  But I'm not sure whether this way is correct or not using react hooks to give and receive data from parent to child.<bR>
  Could you modify my code ?</p>