diff --git a/packages/react-navigation/examples/NavigationPlayground/app.json b/packages/react-navigation/examples/NavigationPlayground/app.json
index 0c8f0f53..6f6615f4 100644
--- a/packages/react-navigation/examples/NavigationPlayground/app.json
+++ b/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": [
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/App.js b/packages/react-navigation/examples/NavigationPlayground/js/App.js
index 231ce14f..052aa324 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/App.js
+++ b/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: {
- name: 'Multiple Drawer Example',
- description: 'Add any drawer you need',
- screen: MultipleDrawer,
- },
+ // MultipleDrawer: {
+ // name: 'Multiple Drawer Example',
+ // description: 'Add any drawer you need',
+ // screen: MultipleDrawer,
+ // },
TabsInDrawer: {
name: 'Drawer + Tabs Example',
description: 'A drawer combined with tabs',
@@ -104,34 +105,47 @@ const ExampleRoutes = {
},
};
-const MainScreen = ({ navigation }) => (
-
-
- {Object.keys(ExampleRoutes).map((routeName: string) => (
- {
- const { path, params, screen } = ExampleRoutes[routeName];
- const { router } = screen;
- const action = path && router.getActionForPathAndParams(path, params);
- navigation.navigate(routeName, {}, action);
- }}
- >
-
-
- {ExampleRoutes[routeName].name}
-
- {ExampleRoutes[routeName].description}
-
-
-
-
- ))}
-
-);
+class MainScreen extends React.Component<*> {
+ render() {
+ const { navigation } = this.props;
+
+ return (
+
+
+
+ {Object.keys(ExampleRoutes).map((routeName: string) => (
+ {
+ const { path, params, screen } = ExampleRoutes[routeName];
+ const { router } = screen;
+ const action =
+ path && router.getActionForPathAndParams(path, params);
+ navigation.navigate(routeName, {}, action);
+ }}
+ >
+
+
+
+ {ExampleRoutes[routeName].name}
+
+
+ {ExampleRoutes[routeName].description}
+
+
+
+
+ ))}
+
+
+
+
+ );
+ }
+}
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',
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/Banner.js b/packages/react-navigation/examples/NavigationPlayground/js/Banner.js
index c392fb68..78ca7b45 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/Banner.js
+++ b/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',
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/CustomTabs.js b/packages/react-navigation/examples/NavigationPlayground/js/CustomTabs.js
index e0b99b73..eee2470c 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/CustomTabs.js
+++ b/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"
/>
+
);
diff --git a/packages/react-navigation/examples/NavigationPlayground/js/CustomTransitioner.js b/packages/react-navigation/examples/NavigationPlayground/js/CustomTransitioner.js
index 3122302b..c41588f7 100644
--- a/packages/react-navigation/examples/NavigationPlayground/js/CustomTransitioner.js
+++ b/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 }) => (
)}