upgrade to [email protected] & [email protected]

Author: nihgwu

.eslintrc

@@ -25,6 +25,7 @@
     "no-mixed-operators": 0,
     "no-use-before-define": 0,
     "radix": 0,
+    "react/destructuring-assignment": 0,
     "react/jsx-filename-extension": 0,
     "react/prop-types": 0,
     "semi": [2, "never"]

.flowconfig

@@ -51,4 +51,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 [version]
-^0.63.0
+^0.67.0

.gitignore

@@ -51,3 +51,6 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle

README.md

@@ -18,7 +18,7 @@ We provide a cli for react-native-dva-starter, for more usages and infomation cl
 
 The builtin router of **dva** (not **react-router v4**), doesn't support React Native, we have to integrate other router components, such as **Navigator**, **ExperimentalNavigation**, **react-native-router-flux** and **react-navigation**. Since the former two will be depreciated in flavor of **react-navigation**, which is also be recommended by official, so I choose it to be the navigator.
 
-In this starter, I provide a router model to control the default action flow of **react-navigation** to workaround a known [issue](https://github.com/react-community/react-navigation/issues/271). If you don't need this, the integration will be much simpler, you can simply remove the router model and pass **routerReducer** to **extraReducer** of dva `extraReducers: { router: routerReducer }`. Read [Redux Integration](https://reactnavigation.org/docs/guides/redux) and [dva's API](https://github.com/dvajs/dva/blob/master/docs/API.md) for more information.
+<del>In this starter, I provide a router model to control the default action flow of **react-navigation** to workaround a known [issue](https://github.com/react-community/react-navigation/issues/271). If you don't need this, the integration will be much simpler, you can simply remove the router model and pass **routerReducer** to **extraReducer** of dva `extraReducers: { router: routerReducer }`. Read [Redux Integration](https://reactnavigation.org/docs/guides/redux) and [dva's API](https://github.com/dvajs/dva/blob/master/docs/API.md) for more information.</del>
 
 Also there is another workaround for a missing feature https://github.com/react-community/react-navigation/issues/232, so I use two **StackNavigators** to contain the screens with different transition animations, you can create you own transition animations via **transitionConfig**, see https://github.com/react-community/react-navigation/pull/99
 

android/app/src/main/AndroidManifest.xml

@@ -1,20 +1,14 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.dvastarter"
-    android:versionCode="1"
-    android:versionName="1.0">
+    package="com.dvastarter">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
-    <uses-sdk
-        android:minSdkVersion="16"
-        android:targetSdkVersion="22" />
-
     <application
       android:name=".MainApplication"
-      android:allowBackup="true"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
+      android:allowBackup="false"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

app/containers/Account.js

@@ -9,7 +9,6 @@ import { createAction, NavigationActions } from '../utils'
 @connect(({ app }) => ({ ...app }))
 class Account extends Component {
   static navigationOptions = {
-    title: 'Account',
     tabBarLabel: 'Account',
     tabBarIcon: ({ focused, tintColor }) => (
       <Image

app/containers/Detail.js

@@ -12,18 +12,13 @@ class Detail extends Component {
     title: 'Detail',
   }
 
-  gotoDetail = () => {
-    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
-  }
-
   goBack = () => {
     this.props.dispatch(NavigationActions.back({ routeName: 'Account' }))
   }
 
   render() {
     return (
       <View style={styles.container}>
-        <Button text="Goto Detail" onPress={this.gotoDetail} />
         <Button text="Go Back" onPress={this.goBack} />
       </View>
     )

app/containers/Home.js

@@ -9,7 +9,6 @@ import { NavigationActions } from '../utils'
 @connect()
 class Home extends Component {
   static navigationOptions = {
-    title: 'Home',
     tabBarLabel: 'Home',
     tabBarIcon: ({ focused, tintColor }) => (
       <Image

app/containers/Login.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { StyleSheet, View, Text, ActivityIndicator } from 'react-native'
+import { StyleSheet, View, Image, ActivityIndicator } from 'react-native'
 import { connect } from 'react-redux'
 
 import { Button, Touchable } from '../components'
@@ -30,8 +30,11 @@ class Login extends Component {
           <Button text="Login" onPress={this.onLogin} />
         )}
         {!fetching && (
-          <Touchable style={styles.close} text="Close" onPress={this.onClose}>
-            <Text>Close</Text>
+          <Touchable style={styles.close} onPress={this.onClose}>
+            <Image
+              style={styles.icon}
+              source={require('../images/close.png')}
+            />
           </Touchable>
         )}
       </View>
@@ -47,8 +50,13 @@ const styles = StyleSheet.create({
   },
   close: {
     position: 'absolute',
-    right: 20,
-    top: 40,
+    right: 10,
+    top: 30,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    tintColor: 'gray',
   },
 })
 

app/images/close.png

@@ -2,14 +2,13 @@ import React from 'react'
 import { AppRegistry } from 'react-native'
 
 import dva from './utils/dva'
-import Router, { routerMiddleware } from './router'
-
+import Router, { routerMiddleware, routerReducer } from './router'
 import appModel from './models/app'
-import routerModel from './models/router'
 
 const app = dva({
   initialState: {},
-  models: [appModel, routerModel],
+  models: [appModel],
+  extraReducers: { router: routerReducer },
   onAction: [routerMiddleware],
   onError(e) {
     console.log('onError', e)

app/index.js

@@ -22,14 +22,7 @@ export default {
       yield put(createAction('updateState')({ fetching: true }))
       const login = yield call(authService.login, payload)
       if (login) {
-        yield put(
-          // NavigationActions.reset can't use at react-navigation 2.0.1
-          // should use StackActions, but now is ineffective
-          NavigationActions.reset({
-            index: 0,
-            actions: [NavigationActions.navigate({ routeName: 'Main' })],
-          })
-        )
+        yield put(NavigationActions.back())
       }
       yield put(createAction('updateState')({ login, fetching: false }))
       Storage.set('login', login)

app/models/app.js

@@ -1,15 +1,14 @@
 import React, { PureComponent } from 'react'
 import { BackHandler, Animated, Easing } from 'react-native'
 import {
-  StackNavigator,
-  TabNavigator,
-  TabBarBottom,
+  createStackNavigator,
+  createBottomTabNavigator,
   NavigationActions,
 } from 'react-navigation'
 import {
-  initializeListeners,
-  createReduxBoundAddListener,
+  reduxifyNavigator,
   createReactNavigationReduxMiddleware,
+  createNavigationReducer,
 } from 'react-navigation-redux-helpers'
 import { connect } from 'react-redux'
 
@@ -19,21 +18,20 @@ import Home from './containers/Home'
 import Account from './containers/Account'
 import Detail from './containers/Detail'
 
-const HomeNavigator = TabNavigator(
-  {
-    Home: { screen: Home },
-    Account: { screen: Account },
-  },
-  {
-    tabBarComponent: TabBarBottom,
-    tabBarPosition: 'bottom',
-    swipeEnabled: false,
-    animationEnabled: false,
-    lazyLoad: false,
+const HomeNavigator = createBottomTabNavigator({
+  Home: { screen: Home },
+  Account: { screen: Account },
+})
+
+HomeNavigator.navigationOptions = ({ navigation }) => {
+  const { routeName } = navigation.state.routes[navigation.state.index]
+
+  return {
+    headerTitle: routeName,
   }
-)
+}
 
-const MainNavigator = StackNavigator(
+const MainNavigator = createStackNavigator(
   {
     HomeNavigator: { screen: HomeNavigator },
     Detail: { screen: Detail },
@@ -43,7 +41,7 @@ const MainNavigator = StackNavigator(
   }
 )
 
-const AppNavigator = StackNavigator(
+const AppNavigator = createStackNavigator(
   {
     Main: { screen: MainNavigator },
     Login: { screen: Login },
@@ -81,39 +79,38 @@ const AppNavigator = StackNavigator(
   }
 )
 
-function getCurrentScreen(navigationState) {
+export const routerReducer = createNavigationReducer(AppNavigator)
+
+export const routerMiddleware = createReactNavigationReduxMiddleware(
+  'root',
+  state => state.router
+)
+
+const App = reduxifyNavigator(AppNavigator, 'root')
+
+function getActiveRouteName(navigationState) {
   if (!navigationState) {
     return null
   }
   const route = navigationState.routes[navigationState.index]
   if (route.routes) {
-    return getCurrentScreen(route)
+    return getActiveRouteName(route)
   }
   return route.routeName
 }
 
-export const routerMiddleware = createReactNavigationReduxMiddleware(
-  'root',
-  state => state.router
-)
-const addListener = createReduxBoundAddListener('root')
-
 @connect(({ app, router }) => ({ app, router }))
 class Router extends PureComponent {
   componentWillMount() {
     BackHandler.addEventListener('hardwareBackPress', this.backHandle)
   }
 
-  componentDidMount() {
-    initializeListeners('root', this.props.router)
-  }
-
   componentWillUnmount() {
     BackHandler.removeEventListener('hardwareBackPress', this.backHandle)
   }
 
   backHandle = () => {
-    const currentScreen = getCurrentScreen(this.props.router)
+    const currentScreen = getActiveRouteName(this.props.router)
     if (currentScreen === 'Login') {
       return true
     }
@@ -125,20 +122,11 @@ class Router extends PureComponent {
   }
 
   render() {
-    const { dispatch, app, router } = this.props
+    const { app, dispatch, router } = this.props
     if (app.loading) return <Loading />
 
-    const navigation = {
-      dispatch,
-      state: router,
-      addListener,
-    }
-    return <AppNavigator navigation={navigation} />
+    return <App dispatch={dispatch} state={router} />
   }
 }
 
-export function routerReducer(state, action = {}) {
-  return AppNavigator.router.getStateForAction(action, state)
-}
-
 export default Router

app/models/router.js

@@ -1,4 +1,4 @@
-export { NavigationActions } from 'react-navigation'
+export { NavigationActions, StackActions } from 'react-navigation'
 
 export { default as Storage } from './storage'
 

app/router.js

@@ -1 +1,8 @@
 import './app/index'
+
+console.ignoredYellowBox = [
+  'Warning: componentWillMount is deprecated',
+  'Warning: componentWillReceiveProps is deprecated',
+  'Warning: componentWillUpdate is deprecated',
+  'Warning: isMounted(...) is deprecated',
+]