Props #
animated bool #
If the transition between status bar property changes should be animated. + </View>
Imperative API #
For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the compoment for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render.
Props #
animated bool #
If the transition between status bar property changes should be animated. Supported for backgroundColor, barStyle and hidden.
hidden bool #
If the status bar is hidden.
androidtranslucent bool #
If the status bar is translucent. When translucent is set to true, the app will draw under the status bar. This is useful when using a semi transparent status bar color.
iosbarStyle enum('default', 'light-content') #
Sets the color of the status bar text.
iosnetworkActivityIndicatorVisible bool #
If the network activity indicator should be visible.
iosshowHideTransition enum('fade', 'slide') #
The transition effect when showing and hiding the status bar using the hidden
@@ -62,12 +66,16 @@ const showHideTransitions = 'slide',
];
+function getValue(values: Array<any>, index: number): any {
+ return values[index % values.length];
+}
+
const StatusBarExample = React.createClass({
getInitialState(): State {
return {
animated: true,
- backgroundColor: this._getValue(colors, 0),
- showHideTransition: this._getValue(showHideTransitions, 0),
+ backgroundColor: getValue(colors, 0),
+ showHideTransition: getValue(showHideTransitions, 0),
};
},
@@ -75,10 +83,6 @@ const StatusBarExample = React 0,
_showHideTransitionIndex: 0,
- _getValue(values: Array<any>, index: number): any {
- return values[index % values.length];
- },
-
render() {
return (
<View>
@@ -115,10 +119,10 @@ const StatusBarExample = React={styles.wrapper}
onPress={() => {
this._barStyleIndex++;
- this.setState({barStyle: this._getValue(barStyles, this._barStyleIndex)});
+ this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
}}>
<View style={styles.button}>
- <Text>style: '{this._getValue(barStyles, this._barStyleIndex)}'</Text>
+ <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
</View>
</TouchableHighlight>
</View>
@@ -143,13 +147,13 @@ const StatusBarExample = Reactthis._showHideTransitionIndex++;
this.setState({
showHideTransition:
- this._getValue(showHideTransitions, this._showHideTransitionIndex),
+ getValue(showHideTransitions, this._showHideTransitionIndex),
});
}}>
<View style={styles.button}>
<Text>
showHideTransition:
- '{this._getValue(showHideTransitions, this._showHideTransitionIndex)}'
+ '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
</Text>
</View>
</TouchableHighlight>
@@ -160,10 +164,10 @@ const StatusBarExample = React={styles.wrapper}
onPress={() => {
this._colorIndex++;
- this.setState({backgroundColor: this._getValue(colors, this._colorIndex)});
+ this.setState({backgroundColor: getValue(colors, this._colorIndex)});
}}>
<View style={styles.button}>
- <Text>backgroundColor: '{this._getValue(colors, this._colorIndex)}'</Text>
+ <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
</View>
</TouchableHighlight>
</View>
@@ -186,11 +190,116 @@ const StatusBarExample = React},
});
+const StatusBarStaticExample = React.createClass({
+ _colorIndex: 0,
+ _barStyleIndex: 0,
+ _showHideTransitionIndex: 0,
+
+ getInitialState() {
+ return {
+ backgroundColor: getValue(colors, 0),
+ barStyle: getValue(barStyles, 0),
+ hidden: false,
+ networkActivityIndicatorVisible: false,
+ translucent: false,
+ };
+ },
+
+ render() {
+ return (
+ <View>
+ <View>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => {
+ const hidden = !this.state.hidden;
+ StatusBar.setHidden(hidden, 'slide');
+ this.setState({hidden});
+ }}>
+ <View style={styles.button}>
+ <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
+ </View>
+ </TouchableHighlight>
+ </View>
+ <Text style={styles.title}>iOS</Text>
+ <View>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => {
+ this._barStyleIndex++;
+ const barStyle = getValue(barStyles, this._barStyleIndex);
+ StatusBar.setBarStyle(barStyle, true);
+ this.setState({barStyle});
+ }}>
+ <View style={styles.button}>
+ <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
+ </View>
+ </TouchableHighlight>
+ </View>
+ <View>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => {
+ const networkActivityIndicatorVisible = !this.state.networkActivityIndicatorVisible;
+ StatusBar.setNetworkActivityIndicatorVisible(networkActivityIndicatorVisible);
+ this.setState({networkActivityIndicatorVisible});
+ }}>
+ <View style={styles.button}>
+ <Text>
+ networkActivityIndicatorVisible:
+ {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
+ </Text>
+ </View>
+ </TouchableHighlight>
+ </View>
+ <Text style={styles.title}>Android</Text>
+ <View>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => {
+ this._colorIndex++;
+ const backgroundColor = getValue(colors, this._colorIndex);
+ StatusBar.setBackgroundColor(backgroundColor, true);
+ this.setState({backgroundColor});
+ }}>
+ <View style={styles.button}>
+ <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
+ </View>
+ </TouchableHighlight>
+ </View>
+ <View>
+ <TouchableHighlight
+ style={styles.wrapper}
+ onPress={() => {
+ const translucent = !this.state.translucent;
+ const backgroundColor = !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black';
+ StatusBar.setTranslucent(translucent);
+ StatusBar.setBackgroundColor(backgroundColor, true);
+ this.setState({
+ translucent,
+ backgroundColor,
+ });
+ }}>
+ <View style={styles.button}>
+ <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
+ </View>
+ </TouchableHighlight>
+ </View>
+ </View>
+ );
+ },
+});
+
exports.examples = [{
- title: 'Status Bar',
+ title: 'StatusBar',
render() {
return <StatusBarExample />;
},
+}, {
+ title: 'StatusBar static API',
+ render() {
+ return <StatusBarStaticExample />;
+ },
}];
var styles = StyleSheet.create({
diff --git a/releases/next/docs/statusbarios.html b/releases/next/docs/statusbarios.html
index a90c7547595..79f5654d5c5 100644
--- a/releases/next/docs/statusbarios.html
+++ b/releases/next/docs/statusbarios.html
@@ -1,4 +1,4 @@
-
React NativeStatusBarIOS # | Edit on GitHub |
Methods #
Examples # | Edit on GitHub |
StatusBarIOS # | Edit on GitHub |
Deprecated. Use StatusBar instead.
Methods #
Examples # | Edit on GitHub |