Update to new Expo SDK

- removed native-base dependency

App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppLoading } from 'expo';
+import AppLoading from 'expo-app-loading';
 import { Ionicons } from '@expo/vector-icons';
 import * as Font from 'expo-font';
 
@@ -8,7 +8,7 @@ import swimtrackerReducer from './state/Reducer';
 import { createStore } from 'redux';
 import { DeviceReduxCoupling } from './state/DeviceReduxCoupling';
 import { Provider } from 'react-redux';
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { persistStore, persistReducer } from 'redux-persist'
 import hardSet from 'redux-persist/lib/stateReconciler/hardSet'
 import { PersistGate } from 'redux-persist/integration/react'
@@ -22,6 +22,9 @@ import MainMenuView from "./views/MainMenuView";
 import SettingsView from "./views/SettingsView";
 import TrainingView from "./views/TrainingView";
 import LastSessionsView from "./views/LastSessionsView";
+import ConnectingView from './views/ConnectingView';
+import WifiSelectionView from './views/WifiSelectionView';
+import WifiPasswordView from './views/WifiPasswordView';
 
 
 const persistConfig = {
@@ -44,11 +47,11 @@ export default class App extends React.Component {
     }
 
     async componentDidMount() {
-        await Font.loadAsync({
+        /*await Font.loadAsync({
             Roboto: require('native-base/Fonts/Roboto.ttf'),
             Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
             ...Ionicons.font,
-        });
+        });*/
         this.setState({ isReady: true });
         this.device = new DeviceReduxCoupling(store);
     }
@@ -60,6 +63,25 @@ export default class App extends React.Component {
         const screenOptions = {
             headerShown: false,
         };
+        
+        /*
+        return (
+            <Provider store={store}>
+                <PersistGate loading={<AppLoading />} persistor={persistor}>
+                    <NavigationContainer>
+                        <Stack.Navigator initialRouteName="WifiPasswordView">
+                            <Stack.Screen
+                                name="WifiPasswordView"
+                                component={WifiPasswordView}
+                                options={screenOptions}
+                            />
+                        </Stack.Navigator>
+                    </NavigationContainer>
+                </PersistGate>
+            </Provider>
+        );
+        */
+
         return (
             <Provider store={store}>
                 <PersistGate loading={<AppLoading />} persistor={persistor}>

components/CycleView.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Animated, TouchableWithoutFeedback } from 'react-native';
-import { View } from 'native-base';
+import { Animated, TouchableWithoutFeedback, View } from 'react-native';
 import PropTypes from 'prop-types';
 
 

components/IconCard.js

@@ -1,8 +1,19 @@
 import React from 'react';
 import { View, StyleSheet, Text } from 'react-native';
-import { Icon } from "native-base";
+import EntypoIcon from "react-native-vector-icons/Entypo";
+import AntDesignIcon from "react-native-vector-icons/AntDesign";
+import Fa5Icon from "react-native-vector-icons/FontAwesome5";
 
 const IconCard = props => {
+    let iconClass;
+    if (props.iconType === "AntDesign") {
+        iconClass = AntDesignIcon;
+    }
+    else if (props.iconType === "FontAwesome5") {
+        iconClass = Fa5Icon;
+    } else if (props.iconType === "Entypo") {
+        iconClass = EntypoIcon;
+    }
 
     return (
         <View style={styles.card}>
@@ -10,8 +21,8 @@ const IconCard = props => {
             <View style={{ paddingLeft: 20 }}>
                 <Text style={{ color: 'white', fontSize: props.fontSize, textAlign: "center" }}> {props.value}</Text>
             </View>
-            <View style={{ alignItems: 'center', justifyContent: 'center',  paddingLeft: 20 }}>
-                <Icon style={{ color: 'white', fontSize: 40 }} name={props.iconName} type={props.iconType} />
+            <View style={{ alignItems: 'center', justifyContent: 'center', paddingLeft: 20 }}>
+                <iconClass style={{ color: 'white', fontSize: 40 }} name={props.iconName} />
                 <Text style={{ color: 'white', marginTop: 5 }}> {props.label}</Text>
             </View>
         </View>

data_processing/SwimTrackerWebsocketConnection.js

@@ -6,14 +6,17 @@ const OpCodes = {
     SESSION_STARTED: 2,
     SESSION_STOPPED: 3,
     SESSION_NEW_DATA: 4,
+    ANSWER_USER_LIST : 5,
+    ANSWER_SESSION_LIST : 6,
   
     // from frontend to device
-    START_SESSION: 5,
-    STOP_SESSION: 6,
-    TARE: 7
+    START_SESSION: 7,
+    STOP_SESSION: 8,
+    TARE: 9,
+    QUERY_USER_LIST: 10,
+    QUERY_SESSION_LIST: 11
 };
 
-
 export default class SwimTrackerWebsocketConnection {
     constructor(swimTrackerHost, onData, onStarted, onStopped, onConnect, onDisconnect) {
         this.swimTrackerHost = swimTrackerHost;

package.json

@@ -15,33 +15,33 @@
     ]
   },
   "dependencies": {
-    "@react-native-community/async-storage": "^1.12.0",
-    "@react-native-community/masked-view": "0.1.6",
+    "@react-native-async-storage/async-storage": "^1.13.0",
+    "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/native": "^5.4.2",
     "@react-navigation/stack": "^5.3.9",
-    "expo": "^37.0.0",
-    "expo-blur": "~8.1.0",
-    "expo-keep-awake": "^8.1.0",
-    "expo-linear-gradient": "~8.1.0",
+    "expo": "^41.0.0",
+    "expo-app-loading": "^1.0.3",
+    "expo-blur": "~9.0.3",
+    "expo-keep-awake": "~9.1.2",
+    "expo-linear-gradient": "~9.1.0",
     "immutable": "^4.0.0-rc.12",
     "moment": "^2.27.0",
     "msgpack-lite": "^0.1.26",
     "msgpack5": "^4.2.1",
-    "native-base": "2.13.8",
     "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "react-dom": "16.9.0",
-    "react-native": "0.61.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "0.63.4",
     "react-native-chart-kit": "^3.13.0",
-    "react-native-gesture-handler": "~1.6.0",
-    "react-native-reanimated": "~1.7.0",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "~2.2.0",
-    "react-native-svg": "11.0.1",
+    "react-native-gesture-handler": "~1.10.2",
+    "react-native-reanimated": "~2.1.0",
+    "react-native-safe-area-context": "3.2.0",
+    "react-native-screens": "~3.0.0",
+    "react-native-svg": "12.1.0",
     "react-native-svg-web": "^1.0.7",
     "react-native-swipe-list-view": "^3.2.3",
-    "react-native-unimodules": "~0.8.1",
-    "react-native-web": "^0.11.7",
+    "react-native-unimodules": "~0.13.3",
+    "react-native-web": "~0.13.12",
     "react-redux": "^7.2.0",
     "react-xml-parser": "^1.1.6",
     "reconnecting-websocket": "^4.4.0",
@@ -49,8 +49,8 @@
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {
-    "babel-preset-expo": "^8.1.0",
-    "jest-expo": "^37.0.0",
+    "babel-preset-expo": "8.3.0",
+    "jest-expo": "^41.0.0",
     "react-test-renderer": "^16.13.1"
   },
   "private": true

state/Reducer.js

@@ -2,7 +2,6 @@ import { combineReducers } from 'redux';
 import { deviceStateReducer } from "./DeviceReduxCoupling";
 
 export const CHANGE_USER_NAME = "SET_USERNAME";
-export const CHANGE_THEME = "CHANGE_THEME";
 export const RESET_DEVICE_DATA = "RESET_DEVICE_DATA";
 
 
@@ -11,11 +10,6 @@ export const changeUsername = newUsername => ({
     newUserName: newUsername,
 });
 
-export const changeTheme = newThemeName => ({
-    type: CHANGE_THEME,
-    newThemeName: newThemeName
-});
-
 export const startSession = () => ({
     type: START_SESSION
 });
@@ -52,8 +46,6 @@ const INITIAL_SETTINGS = {
 
 const settingsReducer = (state = INITIAL_SETTINGS, action) => {
     switch (action.type) {
-        case CHANGE_THEME:
-            return { ...state, theme: action.newThemeName };
         case CHANGE_USER_NAME:
             return { ...state, username: action.newUsername };
         default:

views/SettingsView.js

@@ -5,7 +5,6 @@ import {
   StatusBar,
   TextInput,
   Text,
-  Slider,
   Switch,
 } from "react-native";
 import themeColors from '../components/themeColors';
@@ -51,17 +50,20 @@ function SettingsSwitch(props) {
 }
 
 function SettingsSlider(props) {
+  /*
+    <Slider
+    value={props.value}
+    disabled={props.disabled}
+    thumbTintColor={themeColors["WET ASPHALT"]}
+    minimumTrackTintColor={themeColors["CLOUDS"]}
+    maximumTrackTintColor={themeColors["CLOUDS"]}
+    style={settingsGroupStyles.slider}
+  />
+  */
+
   return (
     <React.Fragment>
       <Text style={settingsGroupStyles.label}>{props.label}</Text>
-      <Slider
-        value={props.value}
-        disabled={props.disabled}
-        thumbTintColor={themeColors["WET ASPHALT"]}
-        minimumTrackTintColor={themeColors["CLOUDS"]}
-        maximumTrackTintColor={themeColors["CLOUDS"]}
-        style={settingsGroupStyles.slider}
-      />
     </React.Fragment>
   )
 }