migrated navigation from react-native-router-flux to new react-navigation solution

Author: ttraenkler

js/app.js

@@ -12,7 +12,7 @@ import {
     View,
     StatusBar
 } from 'react-native';
-import { Router, Scene } from 'react-native-router-flux';
+import { StackNavigator } from 'react-navigation';
 import Map from './meetups/map';
 import List from './meetups/list';
 import { createStore, combineReducers } from 'redux';
@@ -21,33 +21,30 @@ import rootReducer from './reducers/';
 
 const store = createStore(rootReducer, {});
 
+const Router = StackNavigator({
+        List: { screen: List },
+        Map: { screen: Map },
+    },
+    {
+        navigationOptions: {
+            header: {
+                style:{
+                    backgroundColor: '#5555FF'
+                },
+                tintColor: 'white'
+            }
+        }
+    }
+)
+
 export class App extends Component {
 
     render() {
         return (
             <Provider store={store}>
                 <View style={{flex:1}}>
                     <StatusBar barStyle="light-content"/>
-                    <Router>
-                        <Scene key="root">
-                            <Scene
-                                navigationBarStyle={styles.navBar}
-                                backButtonImage={require('./../assets/back_chevron.png')}
-                                titleStyle={styles.navBarText}
-                                key="map"
-                                component={Map}
-                                title="Meetup Location"
-                            />
-                            <Scene
-                                navigationBarStyle={styles.navBar}
-                                titleStyle={styles.navBarText}
-                                key="list"
-                                component={List}
-                                title="Meetups"
-                                initial={true}
-                            />
-                        </Scene>
-                    </Router>
+                    <Router/>
                 </View>
             </Provider>
         );

js/meetups/list.js

@@ -18,13 +18,16 @@ import {
   Linking,
   Alert
 } from 'react-native';
-import { Actions } from 'react-native-router-flux';
 import moment from 'moment';
 import meetupApiConfig from '../../config/meetup-api'
 import * as eventActionCreators from '../actions/events'
 
 class List extends Component {
 
+  static navigationOptions = {
+    title : 'Meetups'
+  }
+
   static defaultProps = {
     isRefreshing: false
   };
@@ -41,10 +44,10 @@ class List extends Component {
   }
 
   _pressRow(rowData) {
-    Actions.map({
+    this.props.navigation.navigate('Map', {
       longitude: rowData.venue.lon,
       latitude: rowData.venue.lat
-    });
+    })
   }
 
   _renderRow(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
@@ -149,7 +152,7 @@ let styles = {
     justifyContent: 'flex-end',
     flex: 1,
     backgroundColor: 'white',
-    marginTop: 63,
+    //marginTop: 63,
   },
   title: {
     fontSize: 14,

js/meetups/map.js

@@ -21,8 +21,13 @@ const person = {
 }
 
 export default class Map extends Component {
+
+  static navigationOptions = {
+    title : 'Meetup Locations'
+  }
+
   render() {
-    const latitude = this.props.latitude, longitude = this.props.longitude;
+    const {longitude, latitude}  = this.props.navigation.state.params;
     return (
       <View style={styles.container}>
         <MapView

jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

package.json

@@ -12,7 +12,7 @@
     "react": "15.3.2",
     "react-native": "0.37.0",
     "react-native-maps": "^0.11.0",
-    "react-native-router-flux": "^3.37.0",
+    "react-navigation": "^1.0.0-beta.7",
     "react-redux": "^5.0.2",
     "redux": "^3.6.0"
   },