title: React navigation with hooks and header function - state is not updating
body: <p>Trying to use react navigation with hooks and a button in the navigation header.</p>
  
  <p>I can pass the handleShowModalLogin function to the navigation header and I can see the button is clicked, but the problem is the setShowLoginModal is not updating the showLoginModal state to true.  Not sure why this is not working.</p>
  
  <pre><code>import React, { useState, useEffect, useLayoutEffect } from "react";
  import {
    Image,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
    Button,
  } from 'react-native';
  
  import LoginModal from './users/LoginModal';
  
  const HomeScreen = ({navigation}, props) =&gt; {
  
    const [showLoginModal, setShowLoginModal] = useState(false);
  
    const handleShowModalLogin = (value) =&gt; {
      console.log("showLoginModal button clicked: ", value)
      if(value === "on"){
        setShowLoginModal(true);
      }else{
        setShowLoginModal(false);
      }
    }
  
    useEffect(() =&gt; {
      console.log('navigation handler set with showLoginModal set:', showLoginModal)
      navigation.setParams({ handleShowModalLogin: handleShowModalLogin });
    }, []);
  
    useEffect(() =&gt; {
      console.log("showLoginModal value changed: ", showLoginModal), [showLoginModal]
    })
  
    return (
      &lt;View style={styles.container}&gt;
  
        &lt;LoginModal showLoginModal={showLoginModal} /&gt;
  
        &lt;ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}&gt;
  
        &lt;/ScrollView&gt;
  
      &lt;/View&gt;
    );
  
  };
  
  HomeScreen.navigationOptions = ({ navigation }) =&gt; ({
    title: "Home",
    headerRight: (
      &lt;View style={styles.headerComContainer}&gt;
        &lt;Button
          onPress={() =&gt; {
            navigation.getParam('handleShowModalLogin')('on')
          }}
          title="Login"
          color="#841584"
          accessibilityLabel="Login" /&gt;
      &lt;/View&gt;
    )
  });
  </code></pre>
  
  <p>Here's the login modal component.</p>
  
  <pre><code>import React, { useState } from "react";
  import { Text, TouchableOpacity, View, ScrollView } from "react-native";
  import Modal from 'modal-enhanced-react-native-web';
  
  export default function LoginModal(props){
  
    const [visibleModal, setModalVisible] = useState(props.showLoginModal);
  
    return (
      &lt;View&gt;
  
        &lt;Modal
          isVisible={visibleModal}
          onBackdropPress={() =&gt; setModalVisible(false)}
        &gt;
          &lt;View&gt;
            &lt;Text&gt;Hello!&lt;/Text&gt;
            &lt;TouchableOpacity onPress={() =&gt; setModalVisible(false)}&gt;
              &lt;View&gt;
                &lt;Text&gt;Close&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/Modal&gt;
  
      &lt;/View&gt;
    );
  
  }
  </code></pre>