status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Expose StatusBar height and fix StatusBar example - T13591448 

Reviewed By: achen1

Differential Revision: D5624514

fbshipit-source-id: edc1ebe9758bd6a67e79a60128553414fb1424d3
This commit is contained in:
David Vacca 2017-08-15 10:47:52 -07:00 committed by Facebook Github Bot
parent 66da0d27da
commit 6f60f2bf67
4 changed files with 32 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js
View File

@ -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({

2
Libraries/Components/StatusBar/StatusBar.js
View File

@ -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.
*/

3
RNTester/js/StatusBarExample.js
View File

@ -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 />;
},

54
ReactAndroid/src/main/java/com/facebook/react/modules/statusbar/StatusBarModule.java
View File

@ -19,7 +19,6 @@ import android.support.v4.view.ViewCompat;
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.MapBuilder;
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 class StatusBarModule extends ReactContextBaseJavaModule {
}
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);
}
}
}
});
});
}
}