Update react and move to react-navigation

Nhacsam · Nhacsam · commit 551fa9e4b72e · 2017-08-06T10:22:45.000+02:00
diff --git a/example/Pages/Avignon.js b/example/Pages/Avignon.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text, Image, TouchableOpacity, View, Dimensions } from 'react-native';
-import { NavigationBar } from '@exponent/ex-navigation';
 
+import { Header } from 'react-navigation';
 import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
 
-const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+const MIN_HEIGHT = Header.HEIGHT;
 const MAX_HEIGHT = 200;
 
 class BasicUsage extends React.Component {
@@ -41,7 +41,6 @@ class BasicUsage extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: -MIN_HEIGHT,
     flex: 1,
   },
   image: {
diff --git a/example/Pages/BasicUsage.js b/example/Pages/BasicUsage.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { StyleSheet, Text, Image, TouchableOpacity, View, Dimensions } from 'react-native';
-import { NavigationBar } from '@exponent/ex-navigation';
 
+import { Header } from 'react-navigation';
 import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
 
-const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+const MIN_HEIGHT = Header.HEIGHT;
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: -MIN_HEIGHT,
     flex: 1,
   },
   image: {
@@ -47,14 +46,4 @@ class BasicUsage extends React.Component {
   }
 }
 
-BasicUsage.route = {
-  navigationBar: {
-    tintColor: 'white',
-    backgroundColor: 'transparent',
-    borderBottomWidth: 0,
-    statusBarHeight: 0,
-    elevation: 0,
-  },
-};
-
 export default BasicUsage;
diff --git a/example/Pages/Colors.js b/example/Pages/Colors.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, Image, View, Dimensions } from 'react-native';
-import { NavigationBar } from '@exponent/ex-navigation';
 
+import { Header } from 'react-navigation';
 import HeaderImageScrollView from 'react-native-image-header-scroll-view';
 
-const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+const MIN_HEIGHT = Header.HEIGHT;
 
 const styles = StyleSheet.create({
   image: {
@@ -16,7 +16,7 @@ const styles = StyleSheet.create({
 class ColorsPage extends React.Component {
   render() {
     return (
-      <View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
+      <View style={{ flex: 1 }}>
         <HeaderImageScrollView
           maxHeight={150}
           minHeight={80}
@@ -39,14 +39,4 @@ class ColorsPage extends React.Component {
   }
 }
 
-ColorsPage.route = {
-  navigationBar: {
-    tintColor: 'white',
-    backgroundColor: 'transparent',
-    borderBottomWidth: 0,
-    statusBarHeight: 0,
-    elevation: 0,
-  },
-};
-
 export default ColorsPage;
diff --git a/example/Pages/Menu.js b/example/Pages/Menu.js
@@ -9,9 +9,6 @@ import {
   ScrollView,
   Dimensions,
 } from 'react-native';
-import { withNavigation } from '@exponent/ex-navigation';
-import { Router } from '../main';
-
 import tvShowContent from '../assets/tvShowContent';
 
 const styles = StyleSheet.create({
@@ -43,14 +40,14 @@ const styles = StyleSheet.create({
   },
 });
 
-@withNavigation class Button extends React.Component {
+class Button extends React.Component {
   render() {
     const props = this.props;
     return (
       <TouchableOpacity
         activeOpacity={0.7}
         onPress={() => {
-          this.props.navigator.push(Router.getRoute(props.target));
+          this.props.navigation.navigate(props.target);
         }}
       >
         <Image style={styles.button} source={props.image}>
@@ -63,13 +60,13 @@ const styles = StyleSheet.create({
   }
 }
 
-const Menu = () => (
+const Menu = (props) => (
   <ScrollView style={styles.page} contentContainerStyle={styles.pageContent}>
     <StatusBar />
-    <Button image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
-    <Button image={tvShowContent.image} text="TV Show" target="tvShow" />
-    <Button image={require('../assets/cutecat.jpg')} text="Cute cat" target="colors" />
-    <Button image={require('../assets/avignon.jpg')} text="Forms and buttons" target="avignon" />
+    <Button {...props} image={require('../assets/NZ.jpg')} text="BasicUsage" target="basicUsage" />
+    <Button {...props} image={tvShowContent.image} text="TV Show" target="tvShow" />
+    <Button {...props} image={require('../assets/cutecat.jpg')} text="Cute cat" target="colors" />
+    <Button {...props} image={require('../assets/avignon.jpg')} text="Forms and buttons" target="avignon" />
   </ScrollView>
 );
 
diff --git a/example/Pages/TvShow.js b/example/Pages/TvShow.js
@@ -8,13 +8,12 @@ import {
   StatusBar,
 } from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import { NavigationBar } from '@exponent/ex-navigation';
-
+import { Header } from 'react-navigation';
 
 import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';
 import tvShowContent from '../assets/tvShowContent';
 
-const MIN_HEIGHT = NavigationBar.DEFAULT_HEIGHT;
+const MIN_HEIGHT = Header.HEIGHT;
 const MAX_HEIGHT = 250;
 
 const styles = StyleSheet.create({
@@ -96,7 +95,7 @@ class TvShow extends Component {
 
   render() {
     return (
-      <View style={{ flex: 1, marginTop: -MIN_HEIGHT }}>
+      <View style={{ flex: 1 }}>
         <StatusBar barStyle="light-content" />
         <HeaderImageScrollView
           maxHeight={MAX_HEIGHT}
@@ -150,14 +149,4 @@ class TvShow extends Component {
   }
 }
 
-TvShow.route = {
-  navigationBar: {
-    tintColor: 'white',
-    backgroundColor: 'transparent',
-    borderBottomWidth: 0,
-    statusBarHeight: 0,
-    elevation: 0,
-  },
-};
-
 export default TvShow;
diff --git a/example/main.js b/example/main.js
@@ -1,26 +1,37 @@
-import React from 'react';
-import { AppRegistry, Text, View } from 'react-native';
-
-import { createRouter, NavigationProvider, StackNavigation } from '@exponent/ex-navigation';
+import { StackNavigator } from 'react-navigation';
 
 import { Menu, TvShow, BasicUsage, ColorsPage, Avignon } from './Pages';
 
-export const Router = createRouter(() => ({
-  menu: () => Menu,
-  tvShow: () => TvShow,
-  basicUsage: () => BasicUsage,
-  colors: () => ColorsPage,
-  avignon: () => Avignon,
-}));
-
-class App extends React.Component {
-  render() {
-    return (
-      <NavigationProvider router={Router}>
-        <StackNavigation initialRoute={Router.getRoute('menu')} />
-      </NavigationProvider>
-    );
-  }
-}
+export const App = StackNavigator({
+  menu: {
+    screen: Menu,
+  },
+  tvShow: {
+    screen: TvShow,
+  },
+  basicUsage: {
+    screen: BasicUsage,
+  },
+  colors: {
+    screen: ColorsPage,
+  },
+  avignon: {
+    screen: Avignon,
+  },
+}, {
+  navigationOptions: {
+    headerTintColor: 'white',
+    headerStyle: {
+      position: 'absolute',
+      top: 0,
+      elevation: 0,
+      shadowColor: 'transparent',
+      shadowRadius: 0,
+      shadowOffset: {
+        height: 0,
+      },
+    },
+  },
+});
 
 export default App;
diff --git a/example/package.json b/example/package.json
@@ -6,12 +6,12 @@
 		"start": "node node_modules/react-native/local-cli/cli.js start"
 	},
 	"dependencies": {
-		"@exponent/ex-navigation": "^2.9.1",
 		"babel-preset-react-native-stage-0": "^1.0.1",
-		"react": "~15.4.1",
+		"react": "16.0.0-alpha.12",
 		"react-native": "^0.47.1",
 		"react-native-animatable": "^1.1.0",
-		"react-native-image-header-scroll-view": "^0.6.1"
+		"react-native-image-header-scroll-view": "^0.6.1",
+		"react-navigation": "^1.0.0-beta.11"
 	},
 	"devDependencies": {
 		"babel-jest": "19.0.0",
diff --git a/example/yarn.lock b/example/yarn.lock
