Hide android navigation bar react native

import React, { useState, useEffect } from 'react';
import { View, Text, Modal, Button } from 'react-native';
import Immersive from 'react-native-immersive';

const YourComponent = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  useEffect(() => {
    // Enable immersive mode when the component mounts
    Immersive.on();
    return () => {
      // Disable immersive mode when the component unmounts
      Immersive.off();
    };
  }, []);

  const openModal = () => {
    setModalVisible(true);
    // Disable immersive mode when the modal is opened
    Immersive.off();
  };

  const closeModal = () => {
    setModalVisible(false);
    // Enable immersive mode when the modal is closed
    Immersive.on();
  };

  return (
    <View>
      <Button title="Open Modal" onPress={openModal} />
      <Modal visible={isModalVisible} animationType="slide">
        <View>
          <Text>Your Modal Content</Text>
          <Button title="Close Modal" onPress={closeModal} />
        </View>
      </Modal>
    </View>
  );
};

export default YourComponent;