⬆️ Major bumps! Move to RN 0.59

- ⬆️ Bump all dependencies
- ⬆️ react-native 0.59.x using the the `react-native eject` method
- ⬆️ react 16.8.x
- ⬆️ react-navigation 3.x
- ⬆️ tipsi-stripe 7.x
- 📝 Add section on linking native dependencies to README
- 🔥 Remove bitrise android build support
- 🐛 Add a 10 second timeout to all API requests and stop persisting HTTP request state fixing requests hangs

src/App.js

@@ -1,10 +1,6 @@
 import React, {Component} from 'react';
 import {Provider} from 'react-redux';
-import {applyMiddleware, createStore} from 'redux';
-import logger from 'redux-logger';
-import thunk from 'redux-thunk';
-import {autoRehydrate, persistStore} from 'redux-persist'
-import {AsyncStorage} from 'react-native'
+import {PersistGate} from 'redux-persist/es/integration/react'
 import Config from 'react-native-config';
 import {ApolloClient} from 'apollo-client';
 import {HttpLink} from 'apollo-link-http';
@@ -12,15 +8,9 @@ import {InMemoryCache} from 'apollo-cache-inmemory';
 import {ApolloProvider} from "react-apollo";
 
 import Dusken from "./Dusken";
-import duskenApp from "./reducers";
+import {store, persistor} from './reduxStore';
 
 
-let store = createStore(
-    duskenApp,
-    applyMiddleware(...[logger, thunk]),
-    autoRehydrate()
-);
-
 const apolloClient = new ApolloClient({
     link: new HttpLink({uri: `${Config.DUSKEN_API_URL}/api/graphql/`}),
     cache: new InMemoryCache()
@@ -30,13 +20,12 @@ export default class App extends Component {
     render() {
         return (
             <Provider store={store}>
-                <ApolloProvider client={apolloClient}>
-                    <Dusken />
-                </ApolloProvider>
+                <PersistGate loading={null} persistor={persistor}>
+                    <ApolloProvider client={apolloClient}>
+                        <Dusken />
+                    </ApolloProvider>
+                </PersistGate>
             </Provider>
         )
     }
 }
-
-// begin periodically persisting the store
-persistStore(store, {storage: AsyncStorage});

src/api.js

@@ -6,13 +6,14 @@ import {
     userDataFailure, userDataRequest, userDataSuccess,
     membershipChargeFailure, membershipChargeRequest, membershipChargeSuccess,
 } from "./actions";
+import { fetchWithTimeout } from "./utils";
 
 export function requestLogin(username, password) {
     return (dispatch) => {
         // We are now logging in
         dispatch(loginRequest());
 
-        return fetch(`${Config.DUSKEN_API_URL}/auth/obtain-token/`, {
+        return fetchWithTimeout(`${Config.DUSKEN_API_URL}/auth/obtain-token/`, {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
@@ -47,7 +48,7 @@ export function requestUserData(auth_token) {
         // We are now fetching user data
         dispatch(userDataRequest());
 
-        return fetch(`${Config.DUSKEN_API_URL}/api/me/`, {
+        return fetchWithTimeout(`${Config.DUSKEN_API_URL}/api/me/`, {
             method: 'GET',
             headers: {
                 'Accept': 'application/json',
@@ -77,7 +78,7 @@ export function requestRegisterUser(firstName, lastName, email, phoneNumber, pas
     return (dispatch) => {
         dispatch(registerUserRequest());
 
-        return fetch(`${Config.DUSKEN_API_URL}/api/user/register/`, {
+        return fetchWithTimeout(`${Config.DUSKEN_API_URL}/api/user/register/`, {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',
@@ -113,7 +114,7 @@ export function requestMembershipCharge(auth_token, stripe_token, membership_typ
     return (dispatch) => {
         dispatch(membershipChargeRequest());
 
-        return fetch(`${Config.DUSKEN_API_URL}/api/membership/charge/`, {
+        return fetchWithTimeout(`${Config.DUSKEN_API_URL}/api/membership/charge/`, {
             method: 'POST',
             headers: {
                 'Accept': 'application/json',

src/modules/events/EventList.js

@@ -1,4 +1,5 @@
-import {StyleSheet, View, SectionList, Platform} from "react-native";
+import {StyleSheet, View, Platform} from "react-native";
+import {SectionList} from 'react-navigation';
 import {Card, ListItem, CardItem, Body, Text as Text, Left, Right, Icon, Button, Content, Spinner} from 'native-base';
 import React, { Component } from 'react';
 import moment from "moment";
@@ -118,4 +119,4 @@ const styles = StyleSheet.create({
     listHeader: {
         paddingTop: 8,
     }
-});
+});

src/modules/membership/ProofContainer.js

@@ -9,7 +9,7 @@ import Proof from "./Proof";
 import {requestMembershipCharge} from "../../api";
 
 
-stripe.init({
+stripe.setOptions({
     publishableKey: Config.STRIPE_PUBLISHABLE_KEY || '',
 });
 

src/modules/register/UserRegister.js

@@ -261,4 +261,4 @@ const styles = StyleSheet.create({
         paddingTop: 2,
         paddingBottom: 12,
     }
-});
+});

src/modules/register/UserRegisterContainer.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import {connect} from "react-redux";
+
 import UserRegister from "./UserRegister";
 import {requestRegisterUser} from "../../api";
 
@@ -45,4 +46,4 @@ function storeToProps(store) {
 export default connect(
     storeToProps,
     {requestRegisterUser}
-)(UserRegisterContainer);
+)(UserRegisterContainer);

src/navigation.js

@@ -1,5 +1,5 @@
 import {Platform, StyleSheet} from 'react-native';
-import {TabNavigator, StackNavigator} from "react-navigation";
+import {createBottomTabNavigator, createStackNavigator, createAppContainer, getActiveChildNavigationOptions} from "react-navigation";
 
 import AboutScreen from "./screens/AboutScreen";
 import EventDetailScreen from "./screens/EventDetailScreen";
@@ -9,9 +9,9 @@ import MembershipScreen from "./screens/MembershipScreen";
 import UserRegisterScreen from "./screens/UserRegisterScreen";
 
 const tabBarRoutes = {
-    EventList: { screen: EventListScreen },
-    Membership: { screen: MembershipScreen },
-    About: { screen: AboutScreen },
+    EventList: EventListScreen,
+    Membership: MembershipScreen,
+    About: AboutScreen,
 };
 
 const tabBarOptions = {
@@ -41,16 +41,27 @@ const tabBarOptions = {
                 }
             }),
         },
-    }
+    },
+    navigationOptions: ({ navigation, screenProps }) => ({
+        // get header title from active child screen
+        ...getActiveChildNavigationOptions(navigation, screenProps),
+        headerStyle: {
+            backgroundColor: '#f58220',
+        },
+        headerTitleStyle: {
+            color: 'white',
+        },
+        headerTintColor: 'white',
+    })
 };
 
-const tabNav = TabNavigator(tabBarRoutes, tabBarOptions);
+const tabNav = createBottomTabNavigator(tabBarRoutes, tabBarOptions);
 
-const DuskenNavigation = StackNavigator({
-    Root: { screen: tabNav },
-    Login: { screen: LoginScreen },
-    UserRegister: { screen: UserRegisterScreen },
-    EventDetail: { screen: EventDetailScreen },
+const DuskenNavigation = createStackNavigator({
+    Root: tabNav,
+    Login: LoginScreen,
+    UserRegister: UserRegisterScreen,
+    EventDetail: EventDetailScreen,
 });
 
-export default DuskenNavigation;
+export default createAppContainer(DuskenNavigation);

src/reduxStore.js

@@ -0,0 +1,26 @@
+import { applyMiddleware, createStore } from 'redux';
+import { persistStore, persistReducer } from 'redux-persist';
+import AsyncStorage from '@react-native-community/async-storage';
+import thunk from "redux-thunk";
+
+import rootReducer from './reducers'
+
+
+const persistConfig = {
+  key: 'root',
+  storage: AsyncStorage,
+  blacklist: [
+    'isLoggingIn',
+    'isFetchingUserData',
+    'isRegisteringUser',
+    'isChargingMembership'
+  ]
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export let store = createStore(
+  persistedReducer,
+  applyMiddleware(...[thunk])
+);
+export let persistor = persistStore(store);

src/screens/AboutScreen.js

@@ -8,13 +8,6 @@ import getTheme from '../../native-base-theme/components';
 export default class AboutScreen extends Component {
     static navigationOptions = {
         title: 'Om oss',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
         tabBarIcon: ({ tintColor }) => (
             <Icon name="info" size={16} color={tintColor} style={{marginTop: 5}} />
         ),
@@ -26,4 +19,4 @@ export default class AboutScreen extends Component {
                 <AboutContainer />
             </StyleProvider>);
     }
-}
+}

src/screens/EventListScreen.js

@@ -7,13 +7,6 @@ import getTheme from '../../native-base-theme/components';
 export default class EventsScreen extends Component {
     static navigationOptions = {
         title: 'Program',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
         tabBarIcon: ({ tintColor }) => (
             <Icon name="event" size={16} color={tintColor} style={{marginTop: 5}}/>
         ),
@@ -31,4 +24,4 @@ export default class EventsScreen extends Component {
             </StyleProvider>
         );
     }
-}
+}

src/screens/MembershipScreen.js

@@ -7,13 +7,6 @@ import getTheme from '../../native-base-theme/components';
 export default class MembershipScreen extends Component {
     static navigationOptions = {
         title: 'Medlemskap',
-        headerStyle: {
-            backgroundColor: '#f58220',
-        },
-        headerTitleStyle: {
-            color: 'white',
-        },
-        headerTintColor: 'white',
         tabBarIcon: ({ tintColor }) => (
             <Icon name="user" size={16} color={tintColor} style={{marginTop: 5}} />
         ),
@@ -41,4 +34,4 @@ export default class MembershipScreen extends Component {
             </StyleProvider>
         )
     }
-}
+}

src/utils.js

@@ -1,3 +1,14 @@
 export function snakeToCamelCase(val) {
     return val.replace(/_([a-z])/g, function (g) { return g[1].toUpperCase(); });
 }
+
+export function fetchWithTimeout(url, options, timeout=10000) {
+    /** Wraps fetch to allow it to time out */
+    // FIXME: show timeout message in UI
+    return Promise.race([
+        fetch(url, options),
+        new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Fetch request timed out')), timeout)
+        )
+    ]);
+}