Expose StatusBar height and fix StatusBar example - T13591448

Reviewed By: achen1 Differential Revision: D5624514 fbshipit-source-id: edc1ebe9758bd6a67e79a60128553414fb1424d3
facebook · Aug 15, 2017 · 6f60f2b · 6f60f2b
1 parent 66da0d2
commit 6f60f2b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 53 deletions.
diff --git a/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js b/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js
@@ -170,14 +170,6 @@ var DrawerLayoutAndroid = createReactClass({
     return this.refs[INNERVIEW_REF].getInnerViewNode();
   },
 
-  componentDidMount: function() {
-    this._updateStatusBarBackground();
-  },
-
-  componentDidReceiveProps: function() {
-    this._updateStatusBarBackground();
-  },
-
   render: function() {
     var drawStatusBar = Platform.Version >= 21 && this.props.statusBarBackgroundColor;
     var drawerViewWrapper =
@@ -195,7 +187,7 @@ var DrawerLayoutAndroid = createReactClass({
         {drawStatusBar &&
         <StatusBar
           translucent
-          backgroundColor={this.state.statusBarBackgroundColor}
+          backgroundColor={this.props.statusBarBackgroundColor}
         />}
         {drawStatusBar &&
         <View style={[
@@ -290,22 +282,6 @@ var DrawerLayoutAndroid = createReactClass({
     return ReactNative.findNodeHandle(this.refs[RK_DRAWER_REF]);
   },
 
-  // Update the StatusBar component background color one frame after creating the
-  // status bar background View to avoid a white flicker that happens because
-  // the StatusBar background becomes transparent before the status bar View
-  // from this component has rendered.
-  _updateStatusBarBackground: function() {
-    if (Platform.Version >= 21 && this.props.statusBarBackgroundColor) {
-      // Check if the value is not already transparent to avoid an extra render.
-      if (this.state.statusBarBackgroundColor !== 'transparent') {
-        requestAnimationFrame(() => {
-          this.setState({statusBarBackgroundColor: 'transparent'});
-        });
-      }
-    } else {
-      this.setState({statusBarBackgroundColor: undefined});
-    }
-  },
 });
 
 var styles = StyleSheet.create({

diff --git a/Libraries/Components/StatusBar/StatusBar.js b/Libraries/Components/StatusBar/StatusBar.js
@@ -145,7 +145,7 @@ function createStackEntry(props: any): any {
  * set by the static API will get overriden by the one set by the component in
  * the next render.
  *
- * ### Constants
+ * ### Constants
  *
  * `currentHeight` (Android only) The height of the status bar.
  */

diff --git a/RNTester/js/StatusBarExample.js b/RNTester/js/StatusBarExample.js
@@ -29,6 +29,7 @@ const colors = [
   '#ff0000',
   '#00ff00',
   '#0000ff',
+  'rgba(0, 0, 0, 0.4)',
 ];
 
 const barStyles = [
@@ -405,7 +406,7 @@ const examples = [{
   },
   platform: 'android',
 }, {
-  title: 'StatusBar background color',
+  title: 'StatusBar translucent',
   render() {
     return <StatusBarTranslucentExample />;
   },

diff --git a/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.java b/ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.java
@@ -19,7 +19,6 @@
 import android.view.View;
 import android.view.WindowInsets;
 import android.view.WindowManager;
-
 import com.facebook.common.logging.FLog;
 import com.facebook.react.bridge.GuardedRunnable;
 import com.facebook.react.bridge.NativeModule;
@@ -31,9 +30,7 @@
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.PixelUtil;
-
 import java.util.Map;
-
 import javax.annotation.Nullable;
 
 /**
@@ -75,31 +72,36 @@ public void setColor(final int color, final boolean animated) {
     }
 
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-      UiThreadUtil.runOnUiThread(
-        new GuardedRunnable(getReactApplicationContext()) {
-          @TargetApi(Build.VERSION_CODES.LOLLIPOP)
-          @Override
-          public void runGuarded() {
-            if (animated) {
-              int curColor = activity.getWindow().getStatusBarColor();
-              ValueAnimator colorAnimation = ValueAnimator.ofObject(
-                new ArgbEvaluator(), curColor, color);
 
-              colorAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
-                @Override
-                public void onAnimationUpdate(ValueAnimator animator) {
-                  activity.getWindow().setStatusBarColor((Integer) animator.getAnimatedValue());
-                }
-              });
-              colorAnimation
-                .setDuration(300)
-                .setStartDelay(0);
-              colorAnimation.start();
-            } else {
-              activity.getWindow().setStatusBarColor(color);
+      UiThreadUtil.runOnUiThread(
+          new GuardedRunnable(getReactApplicationContext()) {
+            @TargetApi(Build.VERSION_CODES.LOLLIPOP)
+            @Override
+            public void runGuarded() {
+              activity
+                  .getWindow()
+                  .addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
+              if (animated) {
+                int curColor = activity.getWindow().getStatusBarColor();
+                ValueAnimator colorAnimation =
+                    ValueAnimator.ofObject(new ArgbEvaluator(), curColor, color);
+
+                colorAnimation.addUpdateListener(
+                    new ValueAnimator.AnimatorUpdateListener() {
+                      @Override
+                      public void onAnimationUpdate(ValueAnimator animator) {
+                        activity
+                            .getWindow()
+                            .setStatusBarColor((Integer) animator.getAnimatedValue());
+                      }
+                    });
+                colorAnimation.setDuration(300).setStartDelay(0);
+                colorAnimation.start();
+              } else {
+                activity.getWindow().setStatusBarColor(color);
+              }
             }
-          }
-        });
+          });
     }
   }