Stop <Modal> from incorrectly darkening translucent status bars
Summary: When using a translucent status bar using `<StatusBar />` and a `<Modal transparent />` the dialog layer applies its own translucent status bar color on top causing the status bar to darken. This is especially problematic when the modal is a menu and nothing on the screen is supposed to darken. I've collected screenshots of the status bar in various situations before and after this change to show the change and demonstrate that it doesn't have any bad side effects for the other status bar and modal types (non-translucent status bars / non-transparent modals). * "**Before**" row: RN 0.43.1 unmodified * "**After**" row: This modification applied * **Translucent**: Translucent status bar `<StatusBar backgroundColor='rgba(0, 0, 0, 0.2)' translucent />` (modal closed) * **Alpha Colored**: Coloured translucent status bar `<StatusBar backgroundColor='rgba(255, 0, 255, 0.2)' translucent />` (modal closed) * **Not Translu...**: Non-translucent status bar `translucent={false}` (modal closed) * **w/modal**: Same as image to the left but with the Modal opened * **Opaque Modal**: Translucent status bar with open but opaque/dim modal (`<Modal transparent={false} />`) ![Screenshot Matrix](https://cloud.githubusercontent.com/assets/53399/25305992/d4bca728-2739-11e7-8801-a31424e3bf50.png) Closes https://github.com/facebook/react-native/pull/13629 Differential Revision: D4985349 Pulled By: astreet fbshipit-source-id: 4d3614a07bb15cb52f220d9444b898d15be7b4dc
This commit is contained in:
parent
91ff2159d9
commit
41518caa3d
|
@ -6,7 +6,8 @@
|
|||
<item name="android:windowNoTitle">true</item>
|
||||
<item name="android:windowIsFloating">false</item>
|
||||
<item name="android:windowBackground">@android:color/transparent</item>
|
||||
<item name="android:windowTranslucentStatus">true</item>
|
||||
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
|
||||
<item name="android:statusBarColor">@android:color/transparent</item>
|
||||
</style>
|
||||
|
||||
<style name="Theme.FullScreenDialogAnimatedSlide" parent="Theme.FullScreenDialog">
|
||||
|
|
Loading…
Reference in New Issue