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:
Daniel Friesen 2017-05-02 03:55:44 -07:00 committed by Facebook Github Bot
parent 91ff2159d9
commit 41518caa3d
1 changed files with 2 additions and 1 deletions

View File

@ -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">