Skip to content
Browse files

Stop <Modal> from incorrectly darkening translucent status bars

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](
Closes #13629

Differential Revision: D4985349

Pulled By: astreet

fbshipit-source-id: 4d3614a07bb15cb52f220d9444b898d15be7b4dc
  • Loading branch information...
dantman authored and facebook-github-bot committed May 2, 2017
1 parent 91ff215 commit 41518caa3d6959de6028d6874f18dedd12170314
Showing with 2 additions and 1 deletion.
  1. +2 −1 ReactAndroid/src/main/res/views/modal/values/themes.xml
@@ -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 name="Theme.FullScreenDialogAnimatedSlide" parent="Theme.FullScreenDialog">

0 comments on commit 41518ca

Please sign in to comment.
You can’t perform that action at this time.