Fix example project

packages/react-navigation/examples/NavigationPlayground/app.json

@@ -12,7 +12,7 @@
       "icon": "./assets/icons/react-navigation.png",
       "hideExponentText": false
     },
-    "sdkVersion": "23.0.0",
+    "sdkVersion": "24.0.0",
     "entryPoint": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
     "packagerOpts": {
       "assetExts": [

packages/react-navigation/examples/NavigationPlayground/js/App.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react';
-import { ScreenOrientation } from 'expo';
+import { Constants, ScreenOrientation } from 'expo';
 
 ScreenOrientation.allow(ScreenOrientation.Orientation.ALL);
 
@@ -11,6 +11,7 @@ import {
   StyleSheet,
   TouchableOpacity,
   Text,
+  StatusBar,
   View,
 } from 'react-native';
 import { SafeAreaView, StackNavigator } from 'react-navigation';
@@ -44,11 +45,11 @@ const ExampleRoutes = {
     description: 'Android-style drawer navigation',
     screen: Drawer,
   },
-  MultipleDrawer: {
+  // MultipleDrawer: {
-    name: 'Multiple Drawer Example',
+  //   name: 'Multiple Drawer Example',
-    description: 'Add any drawer you need',
+  //   description: 'Add any drawer you need',
-    screen: MultipleDrawer,
+  //   screen: MultipleDrawer,
-  },
+  // },
   TabsInDrawer: {
     name: 'Drawer + Tabs Example',
     description: 'A drawer combined with tabs',
@@ -104,34 +105,47 @@ const ExampleRoutes = {
   },
 };
 
-const MainScreen = ({ navigation }) => (
+class MainScreen extends React.Component<*> {
-  <ScrollView style={{ flex: 1 }} contentInsetAdjustmentBehavior="automatic">
+  render() {
-    <Banner />
+    const { navigation } = this.props;
-    {Object.keys(ExampleRoutes).map((routeName: string) => (
+
-      <TouchableOpacity
+    return (
-        key={routeName}
+      <View style={{ flex: 1 }}>
-        onPress={() => {
+        <ScrollView style={{ flex: 1 }}>
-          const { path, params, screen } = ExampleRoutes[routeName];
+          <Banner />
-          const { router } = screen;
+          {Object.keys(ExampleRoutes).map((routeName: string) => (
-          const action = path && router.getActionForPathAndParams(path, params);
+            <TouchableOpacity
-          navigation.navigate(routeName, {}, action);
+              key={routeName}
-        }}
+              onPress={() => {
-      >
+                const { path, params, screen } = ExampleRoutes[routeName];
-        <SafeAreaView
+                const { router } = screen;
-          style={styles.itemContainer}
+                const action =
-          forceInset={{ vertical: 'never' }}
+                  path && router.getActionForPathAndParams(path, params);
-        >
+                navigation.navigate(routeName, {}, action);
-          <View style={styles.item}>
+              }}
-            <Text style={styles.title}>{ExampleRoutes[routeName].name}</Text>
+            >
-            <Text style={styles.description}>
+              <SafeAreaView
-              {ExampleRoutes[routeName].description}
+                style={styles.itemContainer}
-            </Text>
+                forceInset={{ vertical: 'never' }}
-          </View>
+              >
-        </SafeAreaView>
+                <View style={styles.item}>
-      </TouchableOpacity>
+                  <Text style={styles.title}>
-    ))}
+                    {ExampleRoutes[routeName].name}
-  </ScrollView>
+                  </Text>
-);
+                  <Text style={styles.description}>
+                    {ExampleRoutes[routeName].description}
+                  </Text>
+                </View>
+              </SafeAreaView>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+        <StatusBar barStyle="light-content" />
+        <View style={styles.statusBarUnderlay} />
+      </View>
+    );
+  }
+}
 
 const AppNavigator = StackNavigator(
   {
@@ -171,6 +185,14 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     resizeMode: 'contain',
   },
+  statusBarUnderlay: {
+    backgroundColor: '#673ab7',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: Constants.statusBarHeight,
+  },
   title: {
     fontSize: 16,
     fontWeight: 'bold',

packages/react-navigation/examples/NavigationPlayground/js/Banner.js

@@ -22,6 +22,7 @@ export default Banner;
 const styles = StyleSheet.create({
   bannerContainer: {
     backgroundColor: '#673ab7',
+    paddingTop: 20,
   },
   banner: {
     flexDirection: 'row',

packages/react-navigation/examples/NavigationPlayground/js/CustomTabs.js

@@ -8,6 +8,7 @@ import {
   Platform,
   ScrollView,
   StyleSheet,
+  StatusBar,
   Text,
   TouchableOpacity,
   View,
@@ -32,6 +33,7 @@ const MyNavScreen = ({ navigation, banner }) => (
         title="Go back"
       />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/CustomTransitioner.js

@@ -1,12 +1,13 @@
 import React, { Component, PropTypes } from 'react';
 import {
-  StyleSheet,
-  Platform,
-  Easing,
-  View,
   Animated,
-  Image,
   Button,
+  Easing,
+  Image,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
 } from 'react-native';
 import {
   Transitioner,
@@ -30,6 +31,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       )}
 
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </SafeAreaView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/Drawer.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, Platform, ScrollView } from 'react-native';
+import { Button, Platform, ScrollView, StatusBar } from 'react-native';
 import { DrawerNavigator, SafeAreaView } from 'react-navigation';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import SampleText from './SampleText';
@@ -18,6 +18,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 
@@ -57,6 +58,9 @@ const DrawerExample = DrawerNavigator(
     },
   },
   {
+    drawerOpenRoute: 'DrawerOpen',
+    drawerCloseRoute: 'DrawerClose',
+    drawerToggleRoute: 'DrawerToggle',
     initialRouteName: 'Drafts',
     contentOptions: {
       activeTintColor: '#e91e63',

packages/react-navigation/examples/NavigationPlayground/js/ModalStack.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView, Text } from 'react-native';
+import { Button, ScrollView, StatusBar, Text } from 'react-native';
 import { SafeAreaView, StackNavigator } from 'react-navigation';
 import SampleText from './SampleText';
 
@@ -36,6 +36,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       )}
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/MultipleDrawer.js

@@ -55,6 +55,9 @@ const DrawerExample = DrawerNavigator(
     },
   },
   {
+    drawerOpenRoute: 'DrawerOpen',
+    drawerCloseRoute: 'DrawerClose',
+    drawerToggleRoute: 'DrawerToggle',
     initialRouteName: 'Drafts',
     contentOptions: {
       activeTintColor: '#e91e63',
@@ -67,8 +70,9 @@ const MainDrawerExample = DrawerNavigator({
     screen: DrawerExample,
   },
 }, {
-  drawerOpenRoute: 'FooDrawerOpen',
+    drawerOpenRoute: 'DrawerOpen',
-  drawerCloseRoute: 'FooDrawerClose',
+    drawerCloseRoute: 'DrawerClose',
+    drawerToggleRoute: 'DrawerToggle',
 });
 
 const styles = StyleSheet.create({

packages/react-navigation/examples/NavigationPlayground/js/SimpleStack.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView } from 'react-native';
+import { Button, ScrollView, StatusBar } from 'react-native';
 import { StackNavigator, SafeAreaView } from 'react-navigation';
 import SampleText from './SampleText';
 
@@ -19,6 +19,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to a photos screen"
     />
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </SafeAreaView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/SimpleTabs.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, Platform, ScrollView, View } from 'react-native';
+import { Button, Platform, ScrollView, StatusBar, View } from 'react-native';
 import { SafeAreaView, TabNavigator } from 'react-navigation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import SampleText from './SampleText';
@@ -20,6 +20,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to settings tab"
     />
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </SafeAreaView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/StacksInTabs.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView } from 'react-native';
+import { Button, ScrollView, StatusBar } from 'react-native';
 import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -27,6 +27,8 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/StacksOverTabs.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView } from 'react-native';
+import { Button, ScrollView, StatusBar } from 'react-native';
 import { SafeAreaView, StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -27,6 +27,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       />
       <Button onPress={() => navigation.goBack(null)} title="Go back" />
     </SafeAreaView>
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

packages/react-navigation/examples/NavigationPlayground/js/TabAnimations.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { Button, ScrollView, Animated } from 'react-native';
+import { Animated, Button, ScrollView, StatusBar } from 'react-native';
 import { StackNavigator, TabNavigator } from 'react-navigation';
 
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -25,6 +25,7 @@ const MyNavScreen = ({ navigation, banner }) => (
       title="Go to settings tab"
     />
     <Button onPress={() => navigation.goBack(null)} title="Go back" />
+    <StatusBar barStyle="default" />
   </ScrollView>
 );
 

packages/react-navigation/examples/NavigationPlayground/package.json

@@ -12,19 +12,19 @@
     "test": "node node_modules/jest/bin/jest.js"
   },
   "dependencies": {
-    "expo": "^23.0.0",
+    "expo": "^24.0.2",
     "react": "16.0.0",
-    "react-native": "^0.50.3",
+    "react-native": "^0.51.0",
     "react-navigation": "file:../.."
   },
   "devDependencies": {
     "babel-jest": "^21.0.0",
     "flow-bin": "^0.56.0",
     "jest": "^21.0.1",
-    "jest-expo": "^23.0.0",
+    "jest-expo": "^24.0.0",
     "react-addons-test-utils": "16.0.0-alpha.3",
     "react-native-scripts": "^1.5.0",
-    "react-test-renderer": "16.0.0-alpha.12"
+    "react-test-renderer": "16.0.0-alpha.3"
   },
   "jest": {
     "preset": "jest-expo",