diff --git a/Libraries/Components/StatusBar/StatusBar.js b/Libraries/Components/StatusBar/StatusBar.js index 52e6a764d..f6dd6884a 100644 --- a/Libraries/Components/StatusBar/StatusBar.js +++ b/Libraries/Components/StatusBar/StatusBar.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. * * @format - * @flow + * @flow strict-local */ 'use strict'; @@ -103,13 +103,56 @@ type Props = $ReadOnly<{| barStyle?: ?('default' | 'light-content' | 'dark-content'), |}>; +type StackEntryProps = {| + /** + * The background color of the status bar. + * + * @platform android + */ + backgroundColor: {| + value: ?string, + animated: ?boolean, + |}, + /** + * Sets the color of the status bar text. + */ + barStyle: {| + value: ?string, + animated: ?boolean, + |}, + /** + * 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. + */ + translucent: ?boolean, + /** + * + */ + hidden: {| + value: ?boolean, + animated: boolean, + transition: ?('slide' | 'fade'), + |}, + /** + * If the network activity indicator should be visible. + * + * @platform ios + */ + networkActivityIndicatorVisible: ?boolean, +|}; + /** * Merges the prop stack with the default values. */ function mergePropsStack( - propsStack: Array, - defaultValues: Object, -): Object { + propsStack: $ReadOnlyArray, + defaultValues: StackEntryProps, +): StackEntryProps { + const init: StackEntryProps = { + ...defaultValues, + }; + return propsStack.reduce((prev, cur) => { for (const prop in cur) { if (cur[prop] != null) { @@ -117,39 +160,31 @@ function mergePropsStack( } } return prev; - }, Object.assign({}, defaultValues)); + }, init); } /** * Returns an object to insert in the props stack from the props * and the transition/animation info. */ -function createStackEntry(props: any): any { +function createStackEntry(props: Props): StackEntryProps { return { - backgroundColor: - props.backgroundColor != null - ? { - value: props.backgroundColor, - animated: props.animated, - } - : null, - barStyle: - props.barStyle != null - ? { - value: props.barStyle, - animated: props.animated, - } - : null, - translucent: props.translucent, - hidden: - props.hidden != null - ? { - value: props.hidden, - animated: props.animated, - transition: props.showHideTransition, - } - : null, - networkActivityIndicatorVisible: props.networkActivityIndicatorVisible, + backgroundColor: { + value: props.backgroundColor, + animated: props.animated, + }, + barStyle: { + value: props.barStyle, + animated: props.animated, + }, + translucent: props.translucent || false, + hidden: { + value: props.hidden, + animated: props.animated || false, + transition: props.showHideTransition, + }, + networkActivityIndicatorVisible: + props.networkActivityIndicatorVisible || false, }; } @@ -193,9 +228,9 @@ function createStackEntry(props: any): any { * `currentHeight` (Android only) The height of the status bar. */ class StatusBar extends React.Component { - static _propsStack = []; + static _propsStack: Array = []; - static _defaultProps = createStackEntry({ + static _defaultProps: StackEntryProps = createStackEntry({ animated: false, showHideTransition: 'fade', backgroundColor: 'black', @@ -230,10 +265,9 @@ class StatusBar extends React.Component { * changing the status bar hidden property. */ static setHidden(hidden: boolean, animation?: StatusBarAnimation) { - animation = animation || 'none'; StatusBar._defaultProps.hidden.value = hidden; if (Platform.OS === 'ios') { - StatusBarManager.setHidden(hidden, animation); + StatusBarManager.setHidden(hidden, animation || 'none'); } else if (Platform.OS === 'android') { StatusBarManager.setHidden(hidden); } @@ -245,10 +279,9 @@ class StatusBar extends React.Component { * @param animated Animate the style change. */ static setBarStyle(style: StatusBarStyle, animated?: boolean) { - animated = animated || false; StatusBar._defaultProps.barStyle.value = style; if (Platform.OS === 'ios') { - StatusBarManager.setStyle(style, animated); + StatusBarManager.setStyle(style, animated || false); } else if (Platform.OS === 'android') { StatusBarManager.setStyle(style); } @@ -279,9 +312,8 @@ class StatusBar extends React.Component { console.warn('`setBackgroundColor` is only available on Android'); return; } - animated = animated || false; StatusBar._defaultProps.backgroundColor.value = color; - StatusBarManager.setColor(processColor(color), animated); + StatusBarManager.setColor(processColor(color), animated || false); } /**