toggle modal screen from header react native

Question

Hi I want to toggle a transparent modal screen from the header button, im using hooks

Heres my stack component

function MyStack(props) {

  const [modalvisble, setModalvisble] = useState(false)
  ToggleModal = () => {
    console.log(modalvisble)
    setModalvisble(!modalvisble)
  }
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="MyTabs"
        screenOptions={{
          header: ({ ToggleModal }) => {
            return (
              <Header
              ToggleModal={()=>ToggleModal} 
              />
            )
          },
          cardStyle: { backgroundColor: 'rgba(52, 52, 52, 0.8)',},
          cardStyleInterpolator: ({ current: { progress } }) => ({
            cardStyle: {
              opacity: progress.interpolate({
                inputRange: [0, 0.5, 0.9, 1],
                outputRange: [0, 0.25, 0.7, 1],
              }),
              overlayStyle: {
                opacity: progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, .5],
                  extrapolate: 'identity',
                })
              }
            }
          })
        }}
        mode='modal'
      >
        <Stack.Screen
          name="MyTabs"
          component={MyTabs}
          options={{
          }}
        />
        <Stack.Screen name="ModalScreen" component={ModalBar} modalvisble={modalvisble} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Header Component

function Header({ ToggleModal }) {

  //const navigation = useNavigation();
  // const toggleIsFocused = () => {
  //   selected ? navigation.navigate('Mytab') : navigation.navigate('ModalScreen')
  //   return toggleSelected;
  //  }
  return (
    <View>
        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 30, marginRight: 20, }}>
          <Text style={{ color: 'white', margin: 10, fontSize: 13 }}>User Name</Text>
          <TouchableOpacity

            //onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}            
            onPress={ ToggleModal}
          />

        </View>         
    </View>
  )
}

export default Header;

Modal Screen

function ModalBar({modalvisble}) {
  return (
    <Modal style={{ flex: 1, }} visible={modalvisble} />
  )
}

I try to pass function from parent component to child / or reverse, but still, do not work. Goal is like using the user name icon to open modal screen for some info, and press again to close modal screen, with same button. Thanks!!

Answer 1

First, ToggleModal={()=>ToggleModal} this won't actually call ToggleModal function. Instead you should write ToggleModal={() => ToggleModal()} , or just ToggleModal={ToggleModal} .

Second, you dont need to pass ({ ToggleModal }) => {...} as an argument. ToggleModal function is already defined and visible.

Last, you need to use setState(prevState => nextState) form of setState , because otherwise modalVisible will always be seen as true in that function (it won't update, unless you use useCallback ) and the function will always set it to false . Here's the code setModalVisible(modalVisible => { return !modalVisible }) .