Merge pull request #1160 from StoDevX/react-navigation-take2

Migrate to React-Navigation

Author: hawkrives

.flowconfig

@@ -21,8 +21,7 @@
 .*/Libraries/react-native/ReactNative.js
 
 ; Ignore other things
-.*/node_modules/jest-runtime/build/__tests__/.*
-.*/node_modules/babel-plugin-flow-react-proptypes/src/__test__/.*
+.*/node_modules/.*/__tests?__/.*
 .*/node_modules/.*/examples/.*
 .*/node_modules/react-native-mock/.*
 

package.json

@@ -72,6 +72,7 @@
     "react-native-button": "1.8.2",
     "react-native-communications": "2.2.1",
     "react-native-custom-tabs": "0.1.4",
+    "react-native-datepicker": "1.5.1",
     "react-native-device-info": "0.10.2",
     "react-native-google-analytics-bridge": "5.0.1",
     "react-native-keychain": "1.2.0",
@@ -84,9 +85,9 @@
     "react-native-safari-view": "2.0.0",
     "react-native-search-bar": "3.0.0",
     "react-native-sortable-list": "github:hawkrives/react-native-sortable-list#a46c78161e0a1a8d3a45f2fef69d98af3e911b6d",
-    "react-native-tab-view": "0.0.66",
     "react-native-tableview-simple": "0.16.5",
     "react-native-vector-icons": "4.2.0",
+    "react-navigation": "1.0.0-beta.11",
     "react-redux": "5.0.5",
     "redux": "3.6.0",
     "redux-logger": "3.0.6",

source/app.js

@@ -4,164 +4,39 @@
  * Index view
  */
 
-// Tweak the global fetch
 import './globalize-fetch'
 import './setup-moment'
-import {tracker} from './analytics'
 import OneSignal from 'react-native-onesignal'
 
 import React from 'react'
-import {Navigator, BackAndroid, StyleSheet, Platform} from 'react-native'
 import {Provider} from 'react-redux'
 import {store} from './flux'
-import * as c from './views/components/colors'
-import {
-  Title,
-  LeftButton,
-  RightButton,
-  configureScene,
-} from './views/components/navigation'
-
-import CalendarView, {EventDetail as EventDetailView} from './views/calendar'
-import {ContactsView} from './views/contacts'
-import {DictionaryView, DictionaryDetailView} from './views/dictionary'
-import {HomeView, EditHomeView} from './views/home'
-import StreamingView from './views/streaming'
-import {MenusView} from './views/menus'
-import {BonAppHostedMenu} from './views/menus/menu-bonapp'
-import {FilterView} from './views/components/filter'
-import NewsView from './views/news'
-import NewsItemView from './views/news/news-item'
-import SISView from './views/sis'
-import JobDetailView from './views/sis/student-work/detail'
-import {
-  BuildingHoursView,
-  BuildingHoursDetailView,
-} from './views/building-hours'
-import TransportationView from './views/transportation'
-import SettingsView from './views/settings'
-import SISLoginView from './views/settings/login'
-import CreditsView from './views/settings/credits'
-import PrivacyView from './views/settings/privacy'
-import LegalView from './views/settings/legal'
-import {StudentOrgsView, StudentOrgsDetailView} from './views/student-orgs'
-import {FaqView} from './views/faqs'
-import {SnapshotsView} from './storybook'
-import HelpView from './views/help'
-
-import NoRoute from './views/components/no-route'
-
-// Render a given scene
-function renderScene(route, navigator) {
-  let props = {route, navigator, ...(route.props || {})}
-  tracker.trackScreenView(route.id)
+import {tracker} from './analytics'
+import {AppNavigator} from './navigation'
+import type {NavigationState} from 'react-navigation'
 
-  switch (route.id) {
-    case 'HomeView':
-      return <HomeView {...props} />
-    case 'MenusView':
-      return <MenusView {...props} />
-    case 'BonAppHostedMenu':
-      return <BonAppHostedMenu {...props} />
-    case 'FilterView':
-      return <FilterView {...props} />
-    case 'CalendarView':
-      return <CalendarView {...props} />
-    case 'EventDetailView':
-      return <EventDetailView {...props} />
-    case 'ContactsView':
-      return <ContactsView {...props} />
-    case 'DictionaryView':
-      return <DictionaryView {...props} />
-    case 'DictionaryDetailView':
-      return <DictionaryDetailView {...props} />
-    case 'StreamingView':
-      return <StreamingView {...props} />
-    case 'NewsView':
-      return <NewsView {...props} />
-    case 'NewsItemView':
-      return <NewsItemView {...props} />
-    case 'BuildingHoursView':
-      return <BuildingHoursView {...props} />
-    case 'BuildingHoursDetailView':
-      return <BuildingHoursDetailView {...props} />
-    case 'SISView':
-      return <SISView {...props} />
-    case 'JobDetailView':
-      return <JobDetailView {...props} />
-    case 'TransportationView':
-      return <TransportationView {...props} />
-    case 'SettingsView':
-      return <SettingsView {...props} />
-    case 'SISLoginView':
-      return <SISLoginView {...props} />
-    case 'CreditsView':
-      return <CreditsView {...props} />
-    case 'PrivacyView':
-      return <PrivacyView {...props} />
-    case 'LegalView':
-      return <LegalView {...props} />
-    case 'EditHomeView':
-      return <EditHomeView {...props} />
-    case 'StudentOrgsView':
-      return <StudentOrgsView {...props} />
-    case 'StudentOrgsDetailView':
-      return <StudentOrgsDetailView {...props} />
-    case 'FaqView':
-      return <FaqView {...props} />
-    case 'SnapshotsView':
-      return <SnapshotsView {...props} />
-    case 'HelpView':
-      return <HelpView {...props} />
-    default:
-      return <NoRoute {...props} />
+// gets the current screen from navigation state
+function getCurrentRouteName(navigationState: NavigationState): ?string {
+  if (!navigationState) {
+    return null
+  }
+  const route = navigationState.routes[navigationState.index]
+  // dive into nested navigators
+  if (route.routes) {
+    return getCurrentRouteName(route)
   }
+  return route.routeName
 }
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: Platform.OS === 'ios' ? 64 : 56,
-    flex: 1,
-    backgroundColor: Platform.OS === 'ios'
-      ? c.iosLightBackground
-      : c.androidLightBackground,
-  },
-  navigationBar: {
-    backgroundColor: c.olevilleGold,
-    ...Platform.select({
-      ios: {
-        shadowOffset: {width: 0, height: StyleSheet.hairlineWidth},
-        shadowColor: 'rgb(100, 100, 100)',
-        shadowOpacity: 0.5,
-        shadowRadius: StyleSheet.hairlineWidth,
-      },
-      android: {
-        elevation: 4,
-      },
-    }),
-  },
-})
-
 export default class App extends React.Component {
   componentDidMount() {
-    tracker.trackEvent('app', 'launch')
-    BackAndroid.addEventListener(
-      'hardwareBackPress',
-      this.registerAndroidBackButton,
-    )
-
     OneSignal.addEventListener('received', this.onReceived)
     OneSignal.addEventListener('opened', this.onOpened)
     OneSignal.addEventListener('registered', this.onRegistered)
     OneSignal.addEventListener('ids', this.onIds)
   }
 
   componentWillUnmount() {
-    BackAndroid.removeEventListener(
-      'hardwareBackPress',
-      this.registerAndroidBackButton,
-    )
-
     OneSignal.removeEventListener('received', this.onReceived)
     OneSignal.removeEventListener('opened', this.onOpened)
     OneSignal.removeEventListener('registered', this.onRegistered)
@@ -187,40 +62,22 @@ export default class App extends React.Component {
     console.log('Device info:', device)
   }
 
-  _navigator: Navigator
+  trackScreenChanges(
+    prevState: NavigationState,
+    currentState: NavigationState,
+  ) {
+    const currentScreen = getCurrentRouteName(currentState)
+    const prevScreen = getCurrentRouteName(prevState)
 
-  registerAndroidBackButton = () => {
-    if (this._navigator && this._navigator.getCurrentRoutes().length > 1) {
-      this._navigator.pop()
-      return true
+    if (currentScreen !== prevScreen) {
+      tracker.trackScreenView(currentScreen)
     }
-    return false
   }
 
   render() {
     return (
       <Provider store={store}>
-        <Navigator
-          ref={nav => (this._navigator = nav)}
-          navigationBar={
-            <Navigator.NavigationBar
-              style={styles.navigationBar}
-              routeMapper={{
-                LeftButton,
-                RightButton,
-                Title,
-              }}
-            />
-          }
-          initialRoute={{
-            id: 'HomeView',
-            title: 'All About Olaf',
-            index: 0,
-          }}
-          renderScene={renderScene}
-          sceneStyle={styles.container}
-          configureScene={configureScene}
-        />
+        <AppNavigator onNavigationStateChange={this.trackScreenChanges} />
       </Provider>
     )
   }

source/navigation.js

@@ -0,0 +1,75 @@
+// @flow
+
+import {StackNavigator} from 'react-navigation'
+import * as c from './views/components/colors'
+
+import CalendarView, {EventDetail as EventDetailView} from './views/calendar'
+import {ContactsView} from './views/contacts'
+import {DictionaryView, DictionaryDetailView} from './views/dictionary'
+import {HomeView, EditHomeView} from './views/home'
+import StreamingView from './views/streaming'
+import {MenusView} from './views/menus'
+import {FilterView} from './views/components/filter'
+import NewsView from './views/news'
+import NewsItemView from './views/news/news-item'
+import SISView from './views/sis'
+import JobDetailView from './views/sis/student-work/detail'
+import {
+  BuildingHoursView,
+  BuildingHoursDetailView,
+  BuildingHoursProblemReportView,
+  BuildingHoursScheduleEditorView,
+} from './views/building-hours'
+import TransportationView, {BusMapView} from './views/transportation'
+import SettingsView from './views/settings'
+import SISLoginView from './views/settings/login'
+import CreditsView from './views/settings/credits'
+import PrivacyView from './views/settings/privacy'
+import LegalView from './views/settings/legal'
+import {StudentOrgsView, StudentOrgsDetailView} from './views/student-orgs'
+import {FaqView} from './views/faqs'
+// import {SnapshotsView} from './storybook'
+import HelpView from './views/help'
+
+export const AppNavigator = StackNavigator(
+  {
+    HomeView: {screen: HomeView},
+    BuildingHoursDetailView: {screen: BuildingHoursDetailView},
+    BuildingHoursView: {screen: BuildingHoursView},
+    BuildingHoursProblemReportView: {screen: BuildingHoursProblemReportView},
+    BuildingHoursScheduleEditorView: {screen: BuildingHoursScheduleEditorView},
+    CalendarView: {screen: CalendarView},
+    ContactsView: {screen: ContactsView},
+    CreditsView: {screen: CreditsView},
+    DictionaryDetailView: {screen: DictionaryDetailView},
+    DictionaryView: {screen: DictionaryView},
+    EditHomeView: {screen: EditHomeView},
+    EventDetailView: {screen: EventDetailView},
+    FaqView: {screen: FaqView},
+    FilterView: {screen: FilterView},
+    HelpView: {screen: HelpView},
+    JobDetailView: {screen: JobDetailView},
+    LegalView: {screen: LegalView},
+    MenusView: {screen: MenusView},
+    NewsItemView: {screen: NewsItemView},
+    NewsView: {screen: NewsView},
+    PrivacyView: {screen: PrivacyView},
+    SettingsView: {screen: SettingsView},
+    SISLoginView: {screen: SISLoginView},
+    SISView: {screen: SISView},
+    // SnapshotsView: {screen: SnapshotsView},
+    StreamingView: {screen: StreamingView},
+    StudentOrgsDetailView: {screen: StudentOrgsDetailView},
+    StudentOrgsView: {screen: StudentOrgsView},
+    TransportationView: {screen: TransportationView},
+    BusMapView: {screen: BusMapView},
+  },
+  {
+    navigationOptions: {
+      headerStyle: {
+        backgroundColor: c.olevilleGold,
+      },
+      headerTintColor: c.white,
+    },
+  },
+)

source/storybook/index.js

@@ -79,6 +79,10 @@ const Nav = ({children}: {children?: Function}) =>
   />
 
 export class SnapshotsView extends React.Component {
+  static navigationOptions = {
+    title: 'Snapshot Time',
+  }
+
   state = {
     viewPath: 'streaming.radio',
   }