Update icons in playground app and add some padding to banner

- Escape hatch of `ReactNavigation.SafeAreaView.setStatusBarHeight()`.
- `if (Platform.OS === 'android') { ReactNavigation.SafeAreaView.setStatusBarHeight(0) }` to revert to old behavior.

examples/NavigationPlayground/app.json

@@ -7,10 +7,9 @@
     "privacy": "public",
     "orientation": "portrait",
     "primaryColor": "#cccccc",
-    "icon": "./assets/icons/react-navigation.png",
-    "loading": {
-      "icon": "./assets/icons/react-navigation.png",
-      "hideExponentText": false
+    "icon": "./assets/icons/icon.png",
+    "splash": {
+      "image": "./assets/icons/splash.png"
     },
     "sdkVersion": "24.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",

examples/NavigationPlayground/js/Banner.js

@@ -8,7 +8,7 @@ import { SafeAreaView } from 'react-navigation';
 const Banner = () => (
   <SafeAreaView
     style={styles.bannerContainer}
-    forceInset={{ vertical: 'never' }}
+    forceInset={{ top: 'always' }}
   >
     <View style={styles.banner}>
       <Image source={require('./assets/NavLogo.png')} style={styles.image} />

src/views/SafeAreaView.js

@@ -52,7 +52,26 @@ const isIPad = (() => {
   return true;
 })();
 
+let _customStatusBarHeight = null;
 const statusBarHeight = isLandscape => {
+  if (_customStatusBarHeight !== null) {
+    return _customStatusBarHeight;
+  }
+
+  /**
+   * This is a temporary workaround because we don't have a way to detect
+   * if the status bar is translucent or opaque. If opaque, we don't need to
+   * factor in the height here; if translucent (content renders under it) then
+   * we do.
+   */
+  if (Platform.OS === 'android') {
+    if (global.Expo) {
+      return global.Expo.Constants.statusBarHeight;
+    } else {
+      return 0;
+    }
+  }
+
   if (isIPhoneX) {
     return isLandscape ? 0 : 44;
   }
@@ -77,6 +96,10 @@ const doubleFromPercentString = percent => {
 };
 
 class SafeView extends Component {
+  static setStatusBarHeight = height => {
+    _customStatusBarHeight = height;
+  };
+
   state = {
     touchesTop: true,
     touchesBottom: true,
@@ -100,10 +123,6 @@ class SafeView extends Component {
   render() {
     const { forceInset = false, isLandscape, children, style } = this.props;
 
-    if (Platform.OS !== 'ios') {
-      return <Animated.View style={style}>{this.props.children}</Animated.View>;
-    }
-
     const safeAreaStyle = this._getSafeAreaStyle();
 
     return (

src/views/TabView/TabBarTop.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { TabBar } from 'react-native-tab-view';
 import TabBarIcon from './TabBarIcon';
+import SafeAreaView from '../SafeAreaView';
 
 import type {
   NavigationAction,
@@ -24,6 +25,7 @@ type Props = {
   upperCaseLabel: boolean,
   allowFontScaling: boolean,
   position: Animated.Value,
+  tabBarPosition: string,
   navigation: NavigationScreenProp<NavigationState>,
   jumpToIndex: (index: number) => void,
   getLabel: (scene: TabScene) => ?(React.Node | string),
@@ -53,6 +55,7 @@ export default class TabBarTop extends React.PureComponent<Props> {
   _renderLabel = (scene: TabScene) => {
     const {
       position,
+      tabBarPosition,
       navigation,
       activeTintColor,
       inactiveTintColor,
@@ -81,12 +84,16 @@ export default class TabBarTop extends React.PureComponent<Props> {
     const label = this.props.getLabel({ ...scene, tintColor });
     if (typeof label === 'string') {
       return (
-        <Animated.Text
-          style={[styles.label, { color }, labelStyle]}
-          allowFontScaling={allowFontScaling}
+        <SafeAreaView
+          forceInset={{ top: tabBarPosition === 'top' ? 'always' : 'never' }}
         >
-          {upperCaseLabel ? label.toUpperCase() : label}
-        </Animated.Text>
+          <Animated.Text
+            style={[styles.label, { color }, labelStyle]}
+            allowFontScaling={allowFontScaling}
+          >
+            {upperCaseLabel ? label.toUpperCase() : label}
+          </Animated.Text>
+        </SafeAreaView>
       );
     }
     if (typeof label === 'function') {

src/views/TabView/TabView.js

@@ -145,10 +145,12 @@ class TabView extends React.PureComponent<Props> {
     if (typeof TabBarComponent === 'undefined') {
       return null;
     }
+
     return (
       <TabBarComponent
         {...props}
         {...tabBarOptions}
+        tabBarPosition={this.props.tabBarPosition}
         screenProps={this.props.screenProps}
         navigation={this.props.navigation}
         getLabel={this._getLabel}