From 85a6b131d9ddd8a17d080ea0cabdf9b10994aa42 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Wed, 20 Dec 2017 13:35:35 -0800 Subject: [PATCH] Fix example project --- .../examples/NavigationPlayground/app.json | 2 +- .../examples/NavigationPlayground/js/App.js | 90 +- .../NavigationPlayground/js/Banner.js | 1 + .../NavigationPlayground/js/CustomTabs.js | 2 + .../js/CustomTransitioner.js | 12 +- .../NavigationPlayground/js/Drawer.js | 6 +- .../NavigationPlayground/js/ModalStack.js | 3 +- .../NavigationPlayground/js/MultipleDrawer.js | 8 +- .../NavigationPlayground/js/SimpleStack.js | 3 +- .../NavigationPlayground/js/SimpleTabs.js | 3 +- .../NavigationPlayground/js/StacksInTabs.js | 4 +- .../NavigationPlayground/js/StacksOverTabs.js | 3 +- .../NavigationPlayground/js/TabAnimations.js | 3 +- .../NavigationPlayground/package.json | 8 +- .../examples/NavigationPlayground/yarn.lock | 1670 ++++++++--------- 15 files changed, 905 insertions(+), 913 deletions(-) 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 }) => ( )}