title: How can you use hooks in different components in React Native and have them show the same values?
body: <p>I am using hooks to set and change a value inside two different components. When I update the value in one of the components, it is not updated in the other, and if navigate out of the component and then back the value is reset. The code for the first component is below:</p>
  <pre><code>import React, {useState} from 'react';
  import {View, Text, StyleSheet, Button, TextInput} from 'react-native';
  import useWord from '../hooks/useWord';
  
  const TextComponent = () =&gt; {
    const [changeWord, word, errorMessage] = useWord();
    const [text, onChangeText] = useState('');
  
    return (
      &lt;View&gt;
        &lt;Text&gt;Text Component&lt;/Text&gt;
        &lt;TextInput
          value={text}
          autoCapitalize=&quot;none&quot;
          autoCorrect={false}
          onChangeText={onChangeText}
        /&gt;
        &lt;Button title={'Add text'} onPress={() =&gt; changeWord(text)} /&gt;
        {errorMessage ? &lt;Text&gt;{errorMessage}&lt;/Text&gt; : null}
        &lt;Text&gt;{word}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = StyleSheet.create({});
  
  export default TextComponent;
  </code></pre>
  <p>The code for the second component is:</p>
  <pre><code>import React from 'react';
  import {View, Text, StyleSheet, Button} from 'react-native';
  import useWord from '../hooks/useWord';
  
  const OverviewComponent = props =&gt; {
    const [changeWord, word, errorMessage] = useWord();
  
    return (
      &lt;View&gt;
        &lt;Text&gt;Overview Component&lt;/Text&gt;
  
        &lt;Button
          title={'Go to text demo'}
          onPress={() =&gt; props.navigation.navigate('Text')}
        /&gt;
        {errorMessage ? &lt;Text&gt;{errorMessage}&lt;/Text&gt; : null}
        &lt;Text&gt;{word}&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = StyleSheet.create({});
  
  export default OverviewComponent;
  </code></pre>
  <p>The code for the hook is:</p>
  <pre><code>import {useEffect, useState} from 'react';
  
  export default () =&gt; {
    const [word, setWord] = useState(['B']);
    const [errorMessage, setErrorMessage] = useState('');
  
    const changeWord = async letter =&gt; {
      console.log('Hi there');
      try {
        setWord([...word, letter]);
      } catch (err) {
        setErrorMessage('Something went wrong');
      }
    };
  
    useEffect(() =&gt; {
      changeWord('B');
    }, []);
  
    return [changeWord, word, errorMessage];
  };
  </code></pre>
  <p>How can I update the value inside one of the components and then navigate to the other component and see the updated value?</p>