React-native: Using Modal in an app with status bar hidden = true results in status bar being shown
Bug?
RonakKhandelwal
All 22 comments
Please mention your React Native version and platform.
satya164
on 7 Jul 2016
react-native-cli: 0.2.0
react-native: 0.24.1
platform: android
dev platform: macOSX
RonakKhandelwal
on 7 Jul 2016
reproducible????
RonakKhandelwal
on 8 Jul 2016
Can you also post a screenshot? Are you referring to the grey line at the top?
satya164
on 8 Jul 2016
RonakKhandelwal
on 8 Jul 2016
the status bar
RonakKhandelwal
on 8 Jul 2016
I think the StatusBar on Modal can't be controlled and will be a blur one on Android right now.
I remembered there was a PR to add support for translucentStatusBar to Modal but caused test fail, then the PR was not shipped eventually, around 0.27-0.28
nihgwu
on 8 Jul 2016
Well I noticed that you are using RN0.24, so the StatusBar on Modal will always gray and can't be controlled, after 0.28( or 0.27) it will be a translucent one but still can't make it transparent
nihgwu
on 8 Jul 2016
Here it is https://github.com/facebook/react-native/pull/7157 it was introduced in 0.27
nihgwu
on 8 Jul 2016
cc @jemise111
satya164
on 8 Jul 2016
@satya164 do you work for 24 hours a day... find you at any time and everywhere, it's crazy
nihgwu
on 8 Jul 2016
@nihgwu Haha. I try to be online when I can :D
satya164
on 8 Jul 2016
@satya164 It will be so great if you have any time to take a look at this one https://github.com/facebook/react-native/commit/1048e5d3445094393298d4e818ff04c41f4e56a7
It's really a breaking change and i'm sure it will Influence the others
I was trapped by that for days before find the cause and revert that commit manually to avoid the issue #8607
nihgwu
on 8 Jul 2016
actually for this issue, there are two different StatusBar, turn on the hidden prop will hide the StatusBar on the View under the Modal , the showing StatusBar is on Modal and can't be controlled or hidden before RN0.27.
so it's not an issue for the newest version
nihgwu
on 8 Jul 2016
@nihgwu Sorry, I've no context on the code.
satya164
on 8 Jul 2016
Ohk so versio issue I guess
RonakKhandelwal
on 8 Jul 2016
@nihgwu I'm having the same issue with RN0.32.0.
I have a view that hides the status bar and opens a Modal.
The Modal shows the status bar.
You said it's not an issue after RN0.27.0 - what did you mean? Can I control the status bar for the modal view somehow?
Thanks
kfiroo
on 8 Sep 2016
@kfiroo I've explained https://github.com/facebook/react-native/issues/8627#issuecomment-231333690 those are two different StatusBar on View an Modal, you can't control the StatusBar on Modal right now
nihgwu
on 9 Sep 2016
@nihgwu Ok, I thought you meant that there is a way after RN27 :)
Thanks!
kfiroo
on 9 Sep 2016
Just go to styles.xml of android/app/src/main/res/values/styles.xml and put this code in Base application theme
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen">
<!-- Customize your theme here. -->
</style>
After putting code, remove generated folders from android/app/build/generated folder and again do
react-native run-android . It will work
ShaikhKabeer
on 11 Jan 2018
I am still facing the same issue. Is there any react-native solution.
netsmertia
on 3 Mar 2018
@ShaikhKabeer thanks man!. U save me.
thambt
on 16 May 2018
Related issues
WG-Com
路
3Comments
anchetaWern
路
3Comments
madwed
路
3Comments
aniss
路
3Comments
ghost
路
3Comments
Most helpful comment
Just go to styles.xml of android/app/src/main/res/values/styles.xml and put this code in Base application theme
<style name="AppTheme" parent="Theme.ReactNative.AppCompat.Light.NoActionBar.FullScreen"> <!-- Customize your theme here. --> </style>After putting code, remove generated folders from android/app/build/generated folder and again do
react-native run-android . It will work