I have a modal.

const RenderModal = ({
    modalActive,
}) => {
    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalActive}
        >
        </Modal>
    )
}

I render my modal in my parent view like this;

<RenderModal
    modalActive={modalActive}
/>

I activate my modal in my parent view like this;

<TouchableOpacity
    onPress={() => {
        setModalActive(true)
    }}
>
</TouchableOpacity>

When modal is active, bottom tabs navigator is still visible.

I want to change bottom tabs navigator visibility dynamically.

To achive this I added below to my parent view;

import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();

Then I activate my modal like this;

<TouchableOpacity
    onPress={() => {
        navigation.setOptions({ tabBarVisible: false });
        setModalActive(true)
    }}
>
</TouchableOpacity>

navigation.setOptions({ tabBarVisible: false }) is not working.

How can I hide my bottom tabs navigator dynamically?

Edit:

Below is not working also.

useEffect(() => {
  navigation.setOptions({tabBarVisible: !modalActive});
}, [modalActive])