🚧 WIP android upgrades

- Upgrade deps to make the app build again
- Rely on autolinking for android packages
- Icons where removed from native-base, so start switching to icons from
    react-native-vector-icons
- Start reimplementing navigation

index.js

@@ -1,12 +1,12 @@
-import App from './src/App';
-import { AppRegistry } from "react-native";
-import { Sentry } from 'react-native-sentry';
+import { AppRegistry } from 'react-native';
+import * as Sentry from '@sentry/react-native';
 import Config from 'react-native-config';
+import App from './src/App';
 
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
-if(Config.SENTRY_DSN) {
-    Sentry.config(Config.SENTRY_DSN).install();
+if (Config.SENTRY_DSN) {
+  Sentry.init({ dsn: Config.SENTRY_DSN });
 }
 
 AppRegistry.registerComponent(appName, () => App);

package.json

@@ -18,24 +18,31 @@
     "@apollo/client": "^3.4.14",
     "@react-native-async-storage/async-storage": "^1.15.8",
     "@react-navigation/native": "^6.0.4",
+    "@react-navigation/native-stack": "^6.2.2",
+    "@sentry/react-native": "^3.1.1",
+    "@testing-library/react-native": "^7.2.0",
     "email-validator": "^2.0.4",
     "graphql": "^15.6.0",
     "moment": "^2.24.0",
-    "native-base": "^2.12.1",
+    "native-base": "^3.2.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
+    "react-is": "^17.0.2",
     "react-native": "0.66.0-rc.4",
     "react-native-confetti": "^0.1.0",
     "react-native-config": "^0.11.7",
     "react-native-gesture-handler": "^1.2.1",
     "react-native-htmlview": "^0.14.0",
-    "react-native-screens": "^1.0.0-alpha.22",
-    "react-native-sentry": "^0.42.0",
-    "react-native-vector-icons": "^6.4.2",
+    "react-native-safe-area-context": "^3.3.2",
+    "react-native-screens": "^3.7.2",
+    "react-native-svg": "^12.1.1",
+    "react-native-vector-icons": "^8.1.0",
     "react-redux": "^7.2.5",
     "redux": "^4.1.1",
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
+    "styled-components": "^5.3.1",
+    "styled-system": "^5.1.5",
     "tipsi-stripe": "^7.5.0"
   },
   "devDependencies": {
@@ -48,6 +55,7 @@
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jest": "^24.4.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.0",

src/Dusken.js

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Root } from 'native-base';
+import { NativeBaseProvider } from 'native-base';
 
-import DuskenNavigation from './navigation';
+import DuskenNavigation from './Navigation';
 import { logout as logoutAction, registerUserSuccess as registerUserSuccessAction } from './actions';
 import { migrateReduxPersistFourToFive } from './utils';
 
@@ -20,9 +20,9 @@ const DuskenContainer = ({ registerUserSuccess, userToken, user, logout }) => {
   });
 
   return (
-    <Root>
+    <NativeBaseProvider>
       <DuskenNavigation />
-    </Root>
+    </NativeBaseProvider>
   );
 };
 

src/Navigation.js

@@ -0,0 +1,93 @@
+import React from 'react';
+// import { Platform, StyleSheet } from 'react-native';
+// import { createBottomTabNavigator, getActiveChildNavigationOptions } from 'react-navigation';
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+// import EventListScreen from './screens/EventListScreen';
+import AboutScreen from './screens/AboutScreen';
+// import EventDetailScreen from './screens/EventDetailScreen';
+// import LoginScreen from './screens/LoginScreen';
+// import MembershipScreen from './screens/MembershipScreen';
+// import UserRegisterScreen from './screens/UserRegisterScreen';
+
+// const tabBarRoutes = {
+//   EventList: EventListScreen,
+//   Membership: MembershipScreen,
+//   About: AboutScreen,
+// };
+
+// const tabBarOptions = {
+//   tabBarPosition: 'bottom',
+//   tabBarOptions: {
+//     style: {
+//       ...Platform.select({
+//         android: {
+//           backgroundColor: '#fff',
+//           borderTopWidth: StyleSheet.hairlineWidth,
+//           borderTopColor: 'rgba(0, 0, 0, 0.2)',
+//         },
+//       }),
+//     },
+//     indicatorStyle: {
+//       backgroundColor: '#f58220',
+//     },
+//     activeTintColor: '#f58220',
+//     inactiveTintColor: '#333333',
+//     labelStyle: {
+//       fontSize: 12,
+//       ...Platform.select({
+//         android: {
+//           marginBottom: 4,
+//         },
+//         ios: {
+//           marginBottom: 0,
+//         },
+//       }),
+//     },
+//   },
+//   navigationOptions: ({ navigation, screenProps }) => ({
+//     // get header title from active child screen
+//     ...getActiveChildNavigationOptions(navigation, screenProps),
+//     headerStyle: {
+//       backgroundColor: '#f58220',
+//     },
+//     headerTitleStyle: {
+//       color: 'white',
+//     },
+//     headerTintColor: 'white',
+//   }),
+// };
+
+// const tabNav = createBottomTabNavigator(tabBarRoutes, tabBarOptions);
+// const DuskenNavigation = createStackNavigator(
+//   {
+//     Root: tabNav,
+//     Login: LoginScreen,
+//     UserRegister: UserRegisterScreen,
+//     EventDetail: EventDetailScreen,
+//   },
+//   {
+//     defaultNavigationOptions: {
+//       headerStyle: {
+//         backgroundColor: '#f58220',
+//       },
+//       headerTitleStyle: {
+//         color: 'white',
+//       },
+//       headerTintColor: 'white',
+//     },
+//   }
+// );
+const Stack = createNativeStackNavigator();
+
+const DuskenNavigation = () => (
+  <NavigationContainer>
+    <Stack.Navigator>
+      <Stack.Screen name="About" component={AboutScreen} />
+      {/* <Stack.Screen name="EventList" component={EventListScreen} /> */}
+    </Stack.Navigator>
+  </NavigationContainer>
+);
+export default DuskenNavigation;

src/__tests__/app.js

@@ -0,0 +1,10 @@
+import 'react-native';
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import App from '../App';
+
+it('renders correctly', () => {
+  const { toJSON } = render(<App />);
+  expect(toJSON()).toBeTruthy();
+});

src/modules/about/About.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Text, View, Platform, StyleSheet, Image, Linking, TouchableOpacity } from 'react-native';
-import { ScrollView } from 'react-navigation';
+import { Text, View, Platform, StyleSheet, Image, Linking, TouchableOpacity, ScrollView } from 'react-native';
 
-import { Button, Text as NBText, Icon } from 'native-base';
+import { Button, Text as NBText } from 'native-base';
+import FAIcon from 'react-native-vector-icons/FontAwesome5';
+import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
 import theme from '../../theme';
 
 const CHATEAU_NEUF_ADDRESS = 'Det Norske Studentersamfund, Slemdalsveien 15, 0369 Oslo';
@@ -73,11 +74,11 @@ export default class About extends Component {
           <Text style={styles.header}>Følg oss på</Text>
           <View style={[styles.section, { flex: 1, flexDirection: 'row' }]}>
             <TouchableOpacity style={styles.someBtn} onPress={this.openFacebook}>
-              <Icon name="logo-facebook" style={styles.largeIcon} />
+              <FAIcon name="facebook" size={40} color="black" />
               <NBText>Facebook</NBText>
             </TouchableOpacity>
             <TouchableOpacity style={styles.someBtn} onPress={this.openInstagram}>
-              <Icon name="logo-instagram" style={styles.largeIcon} />
+              <FAIcon name="instagram" size={40} color="black" />
               <NBText>Instagram</NBText>
             </TouchableOpacity>
           </View>
@@ -88,14 +89,14 @@ export default class About extends Component {
           </Text>
           <View style={styles.section}>
             <Button iconLeft onPress={this.openMap}>
-              <Icon name="map" style={styles.icon} />
+              <SimpleIcon name="map" style={styles.icon} />
               <NBText> Vis i kart</NBText>
             </Button>
           </View>
           <Text style={styles.header}>Åpningstider</Text>
           <View style={styles.section}>
             <Button iconLeft onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')}>
-              <Icon name="time" style={styles.icon} />
+              <SimpleIcon name="clock" style={styles.icon} />
               <NBText>Vis Åpningstider</NBText>
             </Button>
           </View>
@@ -103,7 +104,7 @@ export default class About extends Component {
           <View style={[styles.section, { flex: 1, flexDirection: 'row' }]}>
             <View>
               <Button iconLeft onPress={() => Linking.openURL('tel:+4794430002')} style={{ marginHorizontal: 10 }}>
-                <Icon name="call" style={styles.icon} />
+                <SimpleIcon name="phone" style={styles.icon} />
                 <NBText>Ring</NBText>
               </Button>
             </View>
@@ -113,7 +114,7 @@ export default class About extends Component {
                 onPress={() => Linking.openURL('mailto:ledelsen@studentersamfundet.no')}
                 style={{ marginHorizontal: 10 }}
               >
-                <Icon name="mail" style={styles.icon} />
+                <SimpleIcon name="envelope" style={styles.icon} />
                 <NBText>Send e-post</NBText>
               </Button>
             </View>
@@ -121,7 +122,9 @@ export default class About extends Component {
 
           <Text style={styles.header}>Chateau Neuf</Text>
           <Image
-            source={{ uri: 'https://studentersamfundet.no/wp-content/uploads/2015/04/26_KUL_Chateauneuf-1280x720.jpg' }}
+            source={{
+              uri: 'https://studentersamfundet.no/wp/wp-content/uploads/2015/04/26_KUL_Chateauneuf-1280x720.jpg',
+            }}
             style={styles.featuredImage}
             resizeMode="contain"
           />

src/navigation.js

@@ -1,86 +0,0 @@
-import { Platform, StyleSheet } from 'react-native';
-import {
-  createBottomTabNavigator,
-  createStackNavigator,
-  createAppContainer,
-  getActiveChildNavigationOptions,
-} from 'react-navigation';
-
-import AboutScreen from './screens/AboutScreen';
-import EventDetailScreen from './screens/EventDetailScreen';
-import EventListScreen from './screens/EventListScreen';
-import LoginScreen from './screens/LoginScreen';
-import MembershipScreen from './screens/MembershipScreen';
-import UserRegisterScreen from './screens/UserRegisterScreen';
-
-const tabBarRoutes = {
-  EventList: EventListScreen,
-  Membership: MembershipScreen,
-  About: AboutScreen,
-};
-
-const tabBarOptions = {
-  tabBarPosition: 'bottom',
-  tabBarOptions: {
-    style: {
-      ...Platform.select({
-        android: {
-          backgroundColor: '#fff',
-          borderTopWidth: StyleSheet.hairlineWidth,
-          borderTopColor: 'rgba(0, 0, 0, 0.2)',
-        },
-      }),
-    },
-    indicatorStyle: {
-      backgroundColor: '#f58220',
-    },
-    activeTintColor: '#f58220',
-    inactiveTintColor: '#333333',
-    labelStyle: {
-      fontSize: 12,
-      ...Platform.select({
-        android: {
-          marginBottom: 4,
-        },
-        ios: {
-          marginBottom: 0,
-        },
-      }),
-    },
-  },
-  navigationOptions: ({ navigation, screenProps }) => ({
-    // get header title from active child screen
-    ...getActiveChildNavigationOptions(navigation, screenProps),
-    headerStyle: {
-      backgroundColor: '#f58220',
-    },
-    headerTitleStyle: {
-      color: 'white',
-    },
-    headerTintColor: 'white',
-  }),
-};
-
-const tabNav = createBottomTabNavigator(tabBarRoutes, tabBarOptions);
-
-const DuskenNavigation = createStackNavigator(
-  {
-    Root: tabNav,
-    Login: LoginScreen,
-    UserRegister: UserRegisterScreen,
-    EventDetail: EventDetailScreen,
-  },
-  {
-    defaultNavigationOptions: {
-      headerStyle: {
-        backgroundColor: '#f58220',
-      },
-      headerTitleStyle: {
-        color: 'white',
-      },
-      headerTintColor: 'white',
-    },
-  }
-);
-
-export default createAppContainer(DuskenNavigation);

src/screens/AboutScreen.js

@@ -1,15 +1,9 @@
 import React from 'react';
 import Icon from 'react-native-vector-icons/SimpleLineIcons';
-import { StyleProvider } from 'native-base';
 
 import AboutContainer from '../modules/about/AboutContainer';
-import getTheme from '../../native-base-theme/components';
 
-const AboutScreen = () => (
-  <StyleProvider style={getTheme()}>
-    <AboutContainer />
-  </StyleProvider>
-);
+const AboutScreen = () => <AboutContainer />;
 
 const TabBarIcon = ({ tintColor }) => <Icon name="info" size={16} color={tintColor} style={{ marginTop: 5 }} />;
 

src/screens/EventListScreen.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import Icon from 'react-native-vector-icons/SimpleLineIcons';
 import { StyleProvider } from 'native-base';
-import { useNavigation } from 'react-navigation-hooks';
+import { useNavigation } from '@react-navigation/native';
 import EventListContainer from '../modules/events/EventListContainer';
-import getTheme from '../../native-base-theme/components';
+// FIXME: theme
+// https://docs.nativebase.io/setup-provider#add-custom-theme-optional
+// import getTheme from '../../native-base-theme/components';
 
 const EventsScreen = () => {
   const { navigate } = useNavigation();
   return (
-    <StyleProvider style={getTheme()}>
+    <StyleProvider>
       <EventListContainer
         showEvent={(item) => {
           navigate('EventDetail', { item });

src/theme.js

@@ -1,8 +1,7 @@
 import { Platform } from 'react-native';
-import platform from 'native-base/src/theme/variables/platform';
 
 const colors = {
-  danger: platform.btnDangerBg,
+  danger: '#d9534f',
 };
 
 const card = {