ddzirt / TestModal

React native modal and statusbar inconsistency showcase

Showcase of React Native modal behaviour inconsistency between iOS and Android.

Project is using Yarn but NPM works as well.

First video is showing how it works with StatusBar translucent={true}
https://vimeo.com/339975862

Second video is showing how it works with StatusBar translucent={false}
https://vimeo.com/339976598

To reproduce:

yarn install
yarn start
react-native run-ios

Notice text positioning, proceed by pressing on Press me to open the modal and notice text positioning
Edit App.tsx on line 41 or 42, switching translucent from true to false
Refresh the app and try again!
On iOS translucent has no effect because there is no StatusBar.translucent property

Now run app on android emulator/device assuming you have it running/connected:

react-native run-android

Notice text positioning, proceed by pressing on Press me to open the modal and notice text positioning
Also you will notice icon color change
Edit App.tsx on line 41 or 42, switching translucent from false to true
Refresh the app and try again. This is where you will see the text positioning issue.