refactor: upgrade to expo sdk 48 (#19)

* refactor: upgrade to expo sdk 48 * refactor: upgrade dependencies to latest * refactor: replace app-loading with splash-screen * refactor: prefer `useFonts` from expo-font * refactor: move away from `React.FC` * fix: crash when no locations are stored * chore: setup eas project id * chore: drop owner from app.json * chore: regenerate `eas.json` with m1 workers
byCedric · Mar 17, 2023 · d21a8de · d21a8de
1 parent bbe7592
commit d21a8de
Show file tree

Hide file tree

Showing 15 changed files with 2,723 additions and 3,227 deletions.
diff --git a/App.tsx b/App.tsx
diff --git a/app.json b/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "office-marathon",
     "slug": "office-marathon",
-    "version": "1.2.0",
+    "version": "1.3.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {
@@ -33,6 +33,11 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "584c5703-eecf-4f21-ab38-84a86f74e8f2"
+      }
     }
   }
 }
diff --git a/eas.json b/eas.json
@@ -1,16 +1,26 @@
 {
   "cli": {
-    "version": ">= 0.53.1"
+    "version": ">= 3.6.0"
   },
   "build": {
     "development": {
       "developmentClient": true,
-      "distribution": "internal"
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m-medium"
+      }
     },
     "preview": {
-      "distribution": "internal"
+      "distribution": "internal",
+      "ios": {
+        "resourceClass": "m-medium"
+      }
     },
-    "production": {}
+    "production": {
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    }
   },
   "submit": {
     "production": {}

diff --git a/index.js b/index.js
@@ -0,0 +1,5 @@
+import { registerRootComponent } from 'expo';
+
+import { App } from './src/app';
+
+registerRootComponent(App);
diff --git a/package.json b/package.json
@@ -1,5 +1,7 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "name": "@bycedric/office-marathon",
+  "main": "index.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -8,34 +10,33 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@expo-google-fonts/open-sans": "^0.2.2",
-    "@react-native-async-storage/async-storage": "~1.17.6",
-    "@react-navigation/native": "^6.0.10",
-    "@react-navigation/stack": "^6.2.1",
-    "dripsy": "^3.6.0",
-    "expo": "^45.0.5",
-    "expo-app-loading": "~2.0.0",
-    "expo-constants": "~13.1.1",
-    "expo-location": "~14.2.2",
-    "expo-status-bar": "~1.3.0",
-    "expo-task-manager": "~10.2.1",
-    "expo-updates": "~0.13.2",
+    "@expo-google-fonts/open-sans": "^0.2.3",
+    "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/stack": "^6.3.16",
+    "dripsy": "^3.10.0",
+    "expo": "^48.0.7",
+    "expo-constants": "~14.2.1",
+    "expo-font": "~11.1.1",
+    "expo-location": "~15.1.1",
+    "expo-splash-screen": "~0.18.1",
+    "expo-status-bar": "~1.4.4",
+    "expo-task-manager": "~11.1.1",
+    "expo-updates": "~0.16.3",
     "geodist": "^0.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.68.2",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1",
-    "react-native-web": "0.17.7"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.3",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "react-native-web": "~0.18.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@types/react": "~17.0.21",
-    "@types/react-dom": "~17.0.11",
-    "@types/react-native": "~0.67.6",
-    "typescript": "^4.7.3"
-  },
-  "private": true
+    "@babel/core": "^7.21.3",
+    "@types/react": "~18.0.27",
+    "@types/react-dom": "~18.0.10",
+    "typescript": "^4.9.5"
+  }
 }
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-
 import { AssetProvider } from './providers/asset';
 import { NavigationProvider } from './providers/navigation';
 import { ThemeProvider } from './providers/theme';
 
-export const App: React.FC = () => (
-  <AssetProvider>
-    <ThemeProvider>
-      <NavigationProvider />
-    </ThemeProvider>
-  </AssetProvider>
-);
+export function App() {
+  return (
+    <AssetProvider>
+      <ThemeProvider>
+        <NavigationProvider />
+      </ThemeProvider>
+    </AssetProvider>
+  );
+}
diff --git a/src/providers/asset.tsx b/src/providers/asset.tsx
@@ -1,14 +1,20 @@
-import { useFonts, OpenSans_600SemiBold, OpenSans_400Regular } from '@expo-google-fonts/open-sans';
-import AppLoading from 'expo-app-loading';
-import React from 'react';
+import { OpenSans_600SemiBold, OpenSans_400Regular } from '@expo-google-fonts/open-sans';
+import { useFonts } from 'expo-font';
+import * as SplashScreen from 'expo-splash-screen';
+import { useEffect, PropsWithChildren } from 'react';
 
-export const AssetProvider: React.FC = (props) => {
+// Prevent the splash screen from hiding automatically
+SplashScreen.preventAutoHideAsync();
+
+export function AssetProvider(props: PropsWithChildren) {
   const [isLoaded] = useFonts({
     'open-sans-regular': OpenSans_400Regular,
     'open-sans-semibold': OpenSans_600SemiBold,
   });
 
-  return isLoaded
-    ? <>{props.children}</>
-    : <AppLoading />;
+  useEffect(() => {
+    if (isLoaded) SplashScreen.hideAsync();
+  }, [isLoaded]);
+
+  return !isLoaded ? null : <>{props.children}</>;
 };
diff --git a/src/providers/navigation.tsx b/src/providers/navigation.tsx
@@ -1,6 +1,5 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import React from 'react';
 
 import { DistanceScreen } from '../screens/distance';
 import { OnboardingScreen } from '../screens/onboarding';
@@ -12,11 +11,13 @@ export type StackParamList = {
 
 const Stack = createStackNavigator<StackParamList>();
 
-export const NavigationProvider: React.FC = () => (
-  <NavigationContainer>
-    <Stack.Navigator initialRouteName="Onboarding" screenOptions={{ headerShown: false }}>
-      <Stack.Screen name="Onboarding" component={OnboardingScreen} />
-      <Stack.Screen name="Distance" component={DistanceScreen} />
-    </Stack.Navigator>
-  </NavigationContainer>
-);
+export function NavigationProvider() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Onboarding" screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="Onboarding" component={OnboardingScreen} />
+        <Stack.Screen name="Distance" component={DistanceScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
diff --git a/src/providers/theme.tsx b/src/providers/theme.tsx
@@ -1,6 +1,6 @@
-import { ActivityIndicator, createThemedComponent, DripsyProvider, makeTheme, useDripsyTheme } from 'dripsy';
+import { ActivityIndicator, createThemedComponent, DripsyProvider, makeTheme } from 'dripsy';
 import Constants from 'expo-constants';
-import React from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import { Pressable, Text, View } from 'react-native';
 
 const theme = makeTheme({
@@ -74,40 +74,43 @@ const theme = makeTheme({
   },
 });
 
-export const ThemeProvider: React.FC = (props) => (
-  <DripsyProvider theme={theme}>
-    {props.children}
-  </DripsyProvider>
-);
+export function ThemeProvider(props: PropsWithChildren) {
+  return (
+    <DripsyProvider theme={theme}>
+      {props.children}
+    </DripsyProvider>
+  );
+}
 
 export const Box = createThemedComponent(View, { themeKey: 'layout', defaultVariant: 'box' });
 export const Title = createThemedComponent(Text, { themeKey: 'text', defaultVariant: 'title' });
 export const Paragraph = createThemedComponent(Text, { themeKey: 'text', defaultVariant: 'paragraph' });
 
-interface ButtonProps {
-  children?: string;
+type ButtonProps = PropsWithChildren<{
   variant?: string;
   disabled?: boolean;
-  onPress?: React.ComponentProps<typeof Pressable>['onPress'];
-}
+  onPress?: ComponentProps<typeof Pressable>['onPress'];
+}>;
 
 const ButtonPressable = createThemedComponent(Pressable, { themeKey: 'buttons', defaultVariant: 'primary' });
 const ButtonText = createThemedComponent(Text, { themeKey: 'buttons', defaultVariant: 'primary-text' });
 
-export const Button: React.FC<ButtonProps> = (props) => (
-  <ButtonPressable
-    disabled={props.disabled}
-    onPress={props.onPress}
-    accessibilityRole="button"
-  >
-    <Box variant="center">
-      <ButtonText variant={`${props.variant}-text`}>
-        {props.children}
-      </ButtonText>
-    </Box>
-  </ButtonPressable>
-);
+export function Button(props: ButtonProps) {
+  return (
+    <ButtonPressable
+      disabled={props.disabled}
+      onPress={props.onPress}
+      accessibilityRole="button"
+    >
+      <Box variant="center">
+        <ButtonText variant={`${props.variant}-text`}>
+          {props.children}
+        </ButtonText>
+      </Box>
+    </ButtonPressable>
+  );
+}
 
-export const Spinner: React.FC = () => (
-  <ActivityIndicator color="accent" />
-);
+export function Spinner() {
+  return <ActivityIndicator color="accent" />;
+}
diff --git a/src/screens/distance.tsx b/src/screens/distance.tsx
@@ -1,11 +1,11 @@
 import { LocationObject } from 'expo-location';
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { FlatList } from 'react-native';
 
 import { Box, Button, Paragraph, Title } from '../providers/theme';
 import { useLocationData, useLocationDistance, useLocationTracking } from '../services/location';
 
-export const DistanceScreen: React.FC = () => {
+export function DistanceScreen() {
   const locations = useLocationData();
   const tracking = useLocationTracking();
   const distance = useLocationDistance(locations);
@@ -29,23 +29,29 @@ export const DistanceScreen: React.FC = () => {
       <DistanceLocationList locations={locations} />
     </Box>
   );
-};
+}
+
+type DistanceLocationListProps = {
+  locations: LocationObject[];
+}
 
-const DistanceLocationList: React.FC<{ locations: LocationObject[] }> = (props) => {
+function DistanceLocationList({ locations }: DistanceLocationListProps) {
   const listRef = useRef<FlatList<LocationObject>>(null);
 
   useEffect(() => {
     // don't ask... if we call it directly,
     // the list scrolls to the "previous" end instead of the "new" end
-    setTimeout(() => listRef.current?.scrollToEnd())
-  }, [props.locations.length]);
+    if (locations.length) {
+      setTimeout(() => listRef.current?.scrollToEnd());
+    }
+  }, [locations.length]);
 
   return (
     <Box>
       <FlatList
         ref={listRef}
         style={{ flexGrow: 0, flexBasis: 200 }}
-        data={props.locations}
+        data={locations}
         keyExtractor={(location, index) => `${location.timestamp}-${index}`}
         renderItem={entry => (
           <DistanceLocation
@@ -58,10 +64,17 @@ const DistanceLocationList: React.FC<{ locations: LocationObject[] }> = (props)
   );
 };
 
-const DistanceLocation: React.FC<{ number: number, location: LocationObject }> = (props) => (
-  <Box variant='row'>
-    <Paragraph>#{props.number + 1}</Paragraph>
-    <Paragraph>lat: {props.location.coords.latitude}</Paragraph>
-    <Paragraph>lng: {props.location.coords.longitude}</Paragraph>
-  </Box>
-);
+type DistanceLocationProps = {
+  number: number;
+  location: LocationObject;
+}
+
+function DistanceLocation(props: DistanceLocationProps) {
+  return (
+    <Box variant='row'>
+      <Paragraph>#{props.number + 1}</Paragraph>
+      <Paragraph>lat: {props.location.coords.latitude}</Paragraph>
+      <Paragraph>lng: {props.location.coords.longitude}</Paragraph>
+    </Box>
+  );
+}
diff --git a/src/screens/onboarding.tsx b/src/screens/onboarding.tsx
@@ -1,13 +1,13 @@
 import { StackScreenProps } from '@react-navigation/stack';
 import { useForegroundPermissions } from 'expo-location';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { StackParamList } from '../providers/navigation';
 import { Box, Button, Spinner, Title, Paragraph } from '../providers/theme';
 
 type OnboardingScreenProps = StackScreenProps<StackParamList, 'Onboarding'>;
 
-export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({ navigation }) => {
+export function OnboardingScreen({ navigation }: OnboardingScreenProps) {
   const [permission, askPermission] = useForegroundPermissions();
 
   const onContinue = useCallback(() => {
@@ -20,7 +20,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({ navigation }
     if (permission?.granted) {
       onContinue();
     }
-  }, [permission?.granted]);
+  }, [onContinue, permission?.granted]);
 
   if (permission?.granted) {
     return (

diff --git a/src/services/location/index.ts b/src/services/location/index.ts
@@ -105,6 +105,7 @@ export function useLocationDistance(locations: LocationObject[], precision = 2)
     const distance = getDistanceFromLocations(locations);
     const factor = Math.pow(10, precision);
     const rounded = Math.round(distance * factor) / factor;
-    return rounded;
+
+    return Number.isNaN(rounded) ? 0 : rounded;
   }, [locations, precision]);
 }