upgrade to new react-nav packages

Author: ericvicenti

example/App.js

@@ -2,10 +2,8 @@ import React from 'react';
 import Expo from 'expo';
 
 import { View, Button } from 'react-native';
-import {
-  createSwitchNavigator,
-  createNavigationContainer,
-} from 'react-navigation';
+import { createSwitchNavigator } from '@react-navigation/core';
+import { createAppContainer } from '@react-navigation/native';
 import Fade from './src/examples/Fade';
 import Modal from './src/examples/Modal';
 import Gesture from './src/examples/Gesture';
@@ -41,13 +39,13 @@ const AppNavigator = createSwitchNavigator({
   ...EXAMPLES,
 });
 
-const StatefulAppNavigator = createNavigationContainer(AppNavigator);
+const StatefulAppNavigator = createAppContainer(AppNavigator);
 
-// const StatefulAppNavigator = createNavigationContainer(Fade);
-// const StatefulAppNavigator = createNavigationContainer(Modal);
-// const StatefulAppNavigator = createNavigationContainer(Gesture);
-// const StatefulAppNavigator = createNavigationContainer(CardStack);
-// const StatefulAppNavigator = createNavigationContainer(SharedEl);
+// const StatefulAppNavigator = createAppContainer(Fade);
+// const StatefulAppNavigator = createAppContainer(Modal);
+// const StatefulAppNavigator = createAppContainer(Gesture);
+// const StatefulAppNavigator = createAppContainer(CardStack);
+// const StatefulAppNavigator = createAppContainer(SharedEl);
 
 const App = () => (
   <LayoutProvider style={{ flex: 1 }}>

example/package.json

@@ -10,13 +10,10 @@
   },
   "dependencies": {
     "expo": "~30.0.0",
-    "hoist-non-react-statics": "^2.5.0",
-    "prop-types": "^15.6.0",
-    "react": "16.3.1",
     "react-native": "~0.55.4",
-    "react-native-paper": "2.0.0-alpha.4",
-    "react-native-screens": "^1.0.0-alpha.9",
-    "react-navigation": "^2.11.1"
+    "@react-navigation/core": "^3.0.0-alpha.7",
+    "@react-navigation/native": "^3.0.0-alpha.5",
+    "react": "16.3.1"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.0.0",

example/src/FadeTransition.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Animated, { Easing } from 'react-native-reanimated';
-const { Value, timing, interpolate } = Animated;
+const { Value, timing } = Animated;
 
 export default class FadeTransition extends React.Component {
   static navigationOptions = {
@@ -12,7 +12,6 @@ export default class FadeTransition extends React.Component {
       const isVisible = !!toState.routes.find(
         r => r.key === transition.transitionRouteKey
       );
-      console.log('running fade transition! ', isVisible);
       await new Promise(resolve => {
         timing(transition.opacity, {
           toValue: isVisible ? 1 : 0,
@@ -23,19 +22,10 @@ export default class FadeTransition extends React.Component {
     },
   };
   render() {
-    const { transition, navigation } = this.props;
-    const myKey = navigation.state.key;
+    const { transition } = this.props;
     let opacity = 1;
     if (transition) {
       opacity = transition.opacity;
-
-      // const { fromState, toState, progress } = transition;
-      // const fromOpacity = fromState.routes.find(r => r.key === myKey) ? 1 : 0;
-      // const toOpacity = toState.routes.find(r => r.key === myKey) ? 1 : 0;
-      // opacity = interpolate(progress, {
-      //   inputRange: [0, 1],
-      //   outputRange: [fromOpacity, toOpacity],
-      // });
     }
     return (
       <Animated.View style={{ flex: 1, opacity }}>

example/src/examples/CardStack.js

@@ -4,7 +4,7 @@ import {
   Text as UnstyledText,
   View as UnstyledView,
 } from 'react-native';
-import { createNavigator, StackRouter } from 'react-navigation';
+import { createNavigator, StackRouter } from '@react-navigation/core';
 import { Transitioner } from 'react-navigation-transitioner';
 import CardTransition from '../CardTransition';
 
@@ -71,7 +71,8 @@ const App = createNavigator(
   StackRouter({
     HomeScreen,
     ProfileScreen,
-  })
+  }),
+  {}
 );
 
 export default App;

example/src/examples/Fade.js

@@ -4,7 +4,7 @@ import {
   Text as UnstyledText,
   View as UnstyledView,
 } from 'react-native';
-import { createNavigator, StackRouter } from 'react-navigation';
+import { createNavigator, StackRouter } from '@react-navigation/core';
 import { Transitioner } from 'react-navigation-transitioner';
 import FadeTransition from '../FadeTransition';
 
@@ -63,7 +63,8 @@ const App = createNavigator(
   StackRouter({
     HomeScreen,
     ProfileScreen,
-  })
+  }),
+  {}
 );
 
 export default App;

example/src/examples/Gesture.js

@@ -6,7 +6,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
 } from 'react-native';
-import { createNavigator, StackRouter } from 'react-navigation';
+import { createNavigator, StackRouter } from '@react-navigation/core';
 import { Transitioner } from 'react-navigation-transitioner';
 import Animated from 'react-native-reanimated';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
@@ -288,7 +288,8 @@ const App = createNavigator(
   StackRouter({
     HomeScreen,
     ProfileScreen,
-  })
+  }),
+  {}
 );
 
 export default App;

example/src/examples/Modal.js

@@ -6,7 +6,7 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
 } from 'react-native';
-import { createNavigator, StackRouter } from 'react-navigation';
+import { createNavigator, StackRouter } from '@react-navigation/core';
 import { Transitioner } from 'react-navigation-transitioner';
 import Animated, { Easing } from 'react-native-reanimated';
 const { Value, timing, interpolate } = Animated;
@@ -146,7 +146,8 @@ const App = createNavigator(
   StackRouter({
     HomeScreen,
     ProfileScreen,
-  })
+  }),
+  {}
 );
 
 export default App;