Hide Bottom Tabs Navigator Dynamically

Question

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])

Answer 1

You have to change tabbar style.

tabBarOptions: {{
 style: {
   height: isShow?140:0,
   overflow: isShow?'visible':'hidden'
 }
}}