title: Passing state via react navigation
body: <h1>UPDATE</h1>
  <p>OK, so I got a bit further. I made it work, but it's ugly and buggy :)</p>
  <p><strong>What I want to do</strong> - I'm trying to share a search field between two screens. Almost identical to the way Yelp works, actually. The first screen is the map with the search field on top. When you click the search field, it should move into the second search screen where you type the search term or select some default search category.</p>
  <p>I have an expo app with <strong>bottom tab navigator</strong> (TS). Let me paste only the important parts:</p>
  <pre><code>export default function BottomTabNavigator() {
    return (
      &lt;BottomTab.Navigator initialRouteName=&quot;Search&quot;&gt;
        &lt;BottomTab.Screen
          name=&quot;Search&quot;
          component={SearchNavigator}
          ...
  </code></pre>
  <p>and then</p>
  <pre><code>const SearchStack = createStackNavigator&lt;SearchParamList&gt;();
  
  function SearchNavigator() {
    return (
      &lt;SearchStack.Navigator headerMode=&quot;none&quot;&gt;
        &lt;SearchStack.Screen name=&quot;SearchScreen&quot; component={SearchScreen} /&gt;
        &lt;SearchStack.Screen name=&quot;SearchFocusScreen&quot; component={SearchFocusScreen} /&gt;
      &lt;/SearchStack.Navigator&gt;
    );
  }
  </code></pre>
  <p><strong>SearchScreen</strong></p>
  <pre><code>  const [searchQuery, setSearchQuery] = useState('');
  
    // If we returned from the second search screen with a search term, set it in state.
    useEffect(() =&gt; {
      if (route.params) {
        setSearchQuery(route.params.searchTerm);
      }
    }, [route]);
  
    const searchRef = useRef(null);
    const onFocus = () =&gt; {
      // If we have a search term, pass it to screen 2, then blur the input so we don't loop back.
      if (route.params) {
        setSearchQuery(route.params.searchTerm);
        navigation.navigate('SearchFocusScreen', { searchTerm: searchQuery });
      } else {
        navigation.navigate('SearchFocusScreen');
      }
      searchRef.current.blur();
    };
  
    return (
      &lt;View&gt;
        &lt;MapView ... /&gt;
        &lt;View&gt;
          &lt;SafeAreaView&gt;
            &lt;Searchbar
              ref={searchRef}
              placeholder=&quot;Search&quot;
              value={searchQuery}
              onSubmitEditing={() =&gt; {
                initSearch({ searchQuery, region });
              }}
              onFocus={onFocus}
            /&gt;
  </code></pre>
  <p><strong>Second search screen</strong></p>
  <pre><code>  const [searchQuery, setSearchQuery] = useState('');
  
    const searchRef = useRef(null);
    useEffect(() =&gt; {
      searchRef.current.focus();
      if (route.params) {
        setSearchQuery(route.params.searchTerm);
      }
    }, [route]);
  
    return (
      &lt;SafeAreaView&gt;
        &lt;View&gt;
          &lt;Searchbar
            ref={searchRef}
            placeholder=&quot;Search&quot;
            onChangeText={(query) =&gt; setSearchQuery(query)}
            value={searchQuery}
            onSubmitEditing={() =&gt; {
              navigation.navigate('SearchScreen', { searchTerm: searchQuery }); // Pass the search query back to Search page 1
            }}
            ...
  </code></pre>
  <p>Does it work? Yes. But it feels wrong. Also - there's an issue that when I type with an error into the search field in search screen 2, I get auto-correct suggestions. If I then quickly click Search, it auto corrects the typo <strong>after</strong> sending the error to search screen 1. And it's visible.</p>
  <p>If you guys have a better strategy to achieve this, please do share.</p>