Statusbar turns white when the modal is open (only on certain devices)

Environment

Diagnostics

Steps to Reproduce

Create a new Expo app and just show a modal with the transparent prop set to true.

Expected Behavior

The modal should open and show the statusbar beneath it.

Actual Behavior

The modal opens and shows a white statusbar. Screenshot example

Reproducible Demo

import React from "react";
import { Modal, View } from "react-native";

export default class App extends React.Component<{}> {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Modal transparent={true} style={{ flex: 1 }}>
          <View style={{ backgroundColor: "blue", flex: 1 }} />
        </Modal>
      </View>
    );
  }
}

The issue has been reported multiple time here.

The following devices have the issue:

• Google Nexus 9 - 6.0.0 - API 23
• Google Nexus 5 - 5.1.0 - API 22

The following devices work as expected:

• 10.1_WGXA_Tablet_API_26

I guess it might be related to the API then, as the StatusBar Expo docs suggest.

Please notices that apps created using react-native (react-native init AppName) work correctly on all devices mentioned above, only Expo apps have the issue.

Let me know if you need further infos!

[GollyJer]

Hi. Was troubleshooting this today and landed here. Someone did come up with a fix but their package requires react-native link.

Maybe the code can inspire a fix on the Expo side? https://github.com/listenzz/react-native-modal-translucent

[AdamJNavarro]

Hey @mmazzarolo,

In an effort to clean up and gain more clarity over our issues, we’re closing old issues that may no longer apply to our currently supported versions. If you are able to still repro this, please open a new issue with a repro case and we’ll be happy to investigate.

Cheers,
Adam