Use statusBarTranslucent

If your status bar is translucent, you can set statusBarTranslucent to the modal.

Added since React Native 0.62

<Modal {...props} statusBarTranslucent>...</Modal>

Credit: https://github.com/react-native-modal/react-native-modal/issues/50#issuecomment-607535322

We can use the background of StatusBar to solve this problem easily but may not the best.

<Modal transparent>
    {Platform.OS === 'android' ?
         <StatusBar backgroundColor="rgba(0,0,0,0.5)"/>
         : null
    }
    <View style={{backgroundColor: 'rgba(0,0,0,0.5)'}}>
        // ModalContent here
    </View>
</Modal>

Just use the same background and this problem can be solved.

I am actually facing the same issue for some time, I tried many solutions but I didn't get rid of this problem. I also tried to use native Android code to hide the StatusBar for a single component it works in other component but when I use it in modal it just not working. So, at last, I got a solution that works for me. I remove the modal view and replace it with react-navigation to navigate to a specific path and handle the back button using BackHandler component.

i achieve this creating a custom status bar component with a modal prop:

import React from 'react'
import { StatusBar } from 'react-native'

const MyStatusBar = (props) => {

    const { backgroundColor } = props
    const { barStyle } = props
    const { translucent } = props
    const { hidden } = props
    const { showHideTransition } = props
    const { modal } = props;

    (modal !== undefined) ? StatusBar.setHidden(true) : StatusBar.setHidden(false)

    return (
        <StatusBar showHideTransition={showHideTransition} hidden={hidden} translucent={translucent} backgroundColor={backgroundColor} barStyle={barStyle} />
    )
}
export default MyStatusBar

inside my base component modal prop is undefined so custom status bar is shown:

<MyStatusBar backgroundColor={theme.colors.primary} barStyle={'light-content'} />

and then calling inside the component who call the modal:

<MyStatusBar modal={modalVisible ? true : undefined} />

I think the root of my problem is the same, but it appeared a little different than how it is described above.

Expected behaviour: When the Modal becomes visible the StatusBar should hide.

const [showModal, setShowModal] = useState(false)

...

<Modal
  visible={showModal}
>
  <StatusBar hidden={showModal} />
...

Actual bahviour: Sometimes the StatusBardissapears as expected, other times just the StatusBar background color goes away and the actual StatusBar remains.

Workaround: Due to the flickering behaviour I think the problem is a racing condition of the native Android dialog. Therefore, I built a custom Modal component that uses the StatusBar imperative api to make sure the StatusBar hide call is made before the Modal appears. So far the Problem has not reappeared.

Here is the custom Modal component:

const Modal = ({ visible, children, ...rest }) => {
  const [modalVisibility, setModalVisibility] = useState(false);

  useEffect(() => {
    if (visible) {
      StatusBar.setHidden(true);
      setModalVisibility(true);
    } else {
      StatusBar.setHidden(false);
      setModalVisibility(false);
    }
  }, [visible]);

  return (
    <RNModal
      visible={modalVisibility}
      {...rest}
    >
      {children}
    </RNModal>
  );
};

export default Modal;

Hello you can try this

<View style={styles.outerContainer}
      <View style={styles.container}>
        <StatusBar hidden={true}/>
        <View style={styles.content}>
      </View>
      <Modal animation={fade} transparent={true}>
              {/* Contents Here*/}
      </Modal>
    </View>

<StatusBar backgroundColor={'transparent'} translucent={true} />