Reverting the expo 53 bump due to various issues related to react native architecture (#971)

* Revert "A few more udpates to support expo 53 SDK (#967)"

This reverts commit 805d059.

* Revert "package.json: bump to Expo 53.0.20 (#955)"

This reverts commit 41ce487.

Author: yuliadub

.github/actions/setup/action.yaml

@@ -17,7 +17,7 @@ runs:
     - name: 🏗 Setup Node
       uses: actions/setup-node@v3
       with:
-        node-version: 20.x
+        node-version: 18.x
         cache: yarn
     - name: 🏗 Setup Expo
       uses: expo/expo-github-action@v7

.gitignore

@@ -24,5 +24,3 @@ android
 
 # Ignore changes to the package-lock
 package-lock.json
-.yarn/install-state.gz
-.yarnrc.yml

App.tsx

@@ -39,7 +39,7 @@ import {TabNavigatorParamList} from 'routes';
 import {colorLookup} from 'theme';
 import {AvalancheCenterID, AvalancheCenterWebsites} from 'types/nationalAvalancheCenter';
 
-import 'date-time-format-timezone';
+require('date-time-format-timezone');
 
 import axios, {AxiosRequestConfig} from 'axios';
 import {QUERY_CACHE_ASYNC_STORAGE_KEY} from 'data/asyncStorageKeys';
@@ -412,7 +412,7 @@ const BaseApp: React.FunctionComponent<{
             height: '100%',
             resizeMode: Constants.expoConfig?.splash?.resizeMode || 'contain',
           }}
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           source={require('./assets/splash.png')}
         />
         <Center style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>

Preferences.test.tsx

@@ -1,12 +1,11 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {renderHook} from '@testing-library/react-hooks';
-import {waitFor} from '@testing-library/react-native';
 
 import {PREFERENCES_KEY} from 'data/asyncStorageKeys';
 import {PreferencesProvider, resetPreferencesForTests, usePreferences} from 'Preferences';
 
 // Mock out AsyncStorage for tests
-// eslint-disable-next-line @typescript-eslint/no-unsafe-return,  @typescript-eslint/no-require-imports
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
 jest.mock('@react-native-async-storage/async-storage', () => require('@react-native-async-storage/async-storage/jest/async-storage-mock'));
 
 describe('Preferences', () => {
@@ -22,12 +21,11 @@ describe('Preferences', () => {
 
   it('updates after preferences are loaded', async () => {
     await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true}));
-    const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+    const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
     expect(result.current.preferences.center).toEqual('NWAC');
 
-    await waitFor(() => {
-      expect(result.current.preferences.center).toEqual('BAC');
-    });
+    await waitForNextUpdate();
+    expect(result.current.preferences.center).toEqual('BAC');
   });
 
   it('falls back to defaults if preferences cannot be parsed', async () => {
@@ -50,68 +48,61 @@ describe('Preferences', () => {
 
     it('updates to a default value after loading', async () => {
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true}));
-      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
 
-      await waitFor(() => {
-        expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
-      });
+      await waitForNextUpdate();
+      expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
     });
 
     it('does not overwrite a previously saved id', async () => {
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true, mixpanelUserId: '00000000-0000-0000-0000-000000000000'}));
-      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
 
-      await waitFor(() => {
-        expect(result.current.preferences.mixpanelUserId).toEqual('00000000-0000-0000-0000-000000000000');
-      });
+      await waitForNextUpdate();
+      expect(result.current.preferences.mixpanelUserId).toEqual('00000000-0000-0000-0000-000000000000');
     });
 
     it('is preserved when clearPreferences is called', async () => {
       const userId = 'CE998943-7231-42C4-A22F-24845B2CF567';
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true, mixpanelUserId: userId}));
 
       // Render the hook to load the preferences. First we'll see the default value, then the saved value
-      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
-      await waitFor(() => {
-        expect(result.current.preferences.center).toEqual('BAC');
-        expect(result.current.preferences.mixpanelUserId).toEqual(userId);
-      });
+      await waitForNextUpdate();
+      expect(result.current.preferences.center).toEqual('BAC');
+      expect(result.current.preferences.mixpanelUserId).toEqual(userId);
 
       // Now clear the preferences. This is not async - we clear them in memory immediately, and lazily persist the change.
       result.current.clearPreferences();
 
-      await waitFor(() => {
-        // After clearing, the center is reset to the default, but the userId is preserved
-        expect(result.current.preferences.center).toEqual('NWAC');
-        expect(result.current.preferences.mixpanelUserId).toEqual(userId);
-      });
+      // After clearing, the center is reset to the default, but the userId is preserved
+      expect(result.current.preferences.center).toEqual('NWAC');
+      expect(result.current.preferences.mixpanelUserId).toEqual(userId);
     });
 
     it('is lost when preferences are damaged', async () => {
       const userId = 'CE998943-7231-42C4-A22F-24845B2CF567';
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({mixpanelUserId: userId, center: 'this is not a valid center'}));
 
       // Render the hook to load the preferences. First we'll see the default value, then the saved value
-      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
-      await waitFor(() => {
-        // The center is invalid, so preferences parsing will fail. The previous user id is lost, and we get a different UUID in its place.
-        expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
-        expect(result.current.preferences.mixpanelUserId).not.toEqual(userId);
-      });
+      await waitForNextUpdate();
+      // The center is invalid, so preferences parsing will fail. The previous user id is lost, and we get a different UUID in its place.
+      expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
+      expect(result.current.preferences.mixpanelUserId).not.toEqual(userId);
     });
 
     it('does overwrite an invalid id', async () => {
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true, mixpanelUserId: 'not a uuid'}));
-      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
 
-      await waitFor(() => {
-        expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
-      });
+      await waitForNextUpdate();
+      expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
     });
   });
 

clientContext.ts

@@ -28,5 +28,7 @@ export const stagingHosts = {
 export const ClientContext: Context<ClientProps> = React.createContext<ClientProps>({
   ...productionHosts,
   requestedTime: 'latest',
-  setRequestedTime: () => {},
+  setRequestedTime: () => {
+    undefined;
+  },
 });

components/AvalancheCenterLogo.tsx

@@ -20,8 +20,8 @@ export interface AvalancheCenterLogoProps {
 }
 
 export const AvalancheCenterLogo: React.FunctionComponent<AvalancheCenterLogoProps> = ({style, avalancheCenterId}: AvalancheCenterLogoProps) => {
-  /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-require-imports */
-
+  /* eslint-disable @typescript-eslint/no-unsafe-argument */
+  /* eslint-disable @typescript-eslint/no-var-requires */
   const source: Record<AvalancheCenterID, ImageResolvedAssetSource> = {
     ['BAC']: Image.resolveAssetSource(require('../assets/logos/BAC.png')),
     ['BTAC']: Image.resolveAssetSource(require('../assets/logos/BTAC.png')),
@@ -122,6 +122,7 @@ export const AvalancheCenterLogo: React.FunctionComponent<AvalancheCenterLogoPro
 };
 
 export const preloadAvalancheCenterLogo = async (queryClient: QueryClient, logger: Logger, avalancheCenter: AvalancheCenterID) => {
+  /* eslint-disable @typescript-eslint/no-var-requires */
   switch (avalancheCenter) {
     case 'BAC':
       return ImageCache.prefetch(queryClient, logger, Image.resolveAssetSource(require('../assets/logos/BAC.png')).uri);

components/AvalancheDangerIcon.tsx

@@ -12,7 +12,7 @@ export interface AvalancheDangerIconProps {
 }
 
 const icons: Record<DangerLevel, ImageSourcePropType> = {
-  /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports */
+  /* eslint-disable @typescript-eslint/no-unsafe-assignment */
   [DangerLevel.GeneralInformation]: require('../assets/danger-icons/0.png'),
   [DangerLevel.None]: require('../assets/danger-icons/0.png'),
   [DangerLevel.Low]: require('../assets/danger-icons/1.png'),
@@ -23,7 +23,8 @@ const icons: Record<DangerLevel, ImageSourcePropType> = {
 };
 
 const sizes: Record<DangerLevel, ImageResolvedAssetSource> = {
-  /* eslint-disable @typescript-eslint/no-unsafe-argument,  @typescript-eslint/no-require-imports */
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  /* eslint-disable @typescript-eslint/no-unsafe-argument */
   [DangerLevel.GeneralInformation]: Image.resolveAssetSource(require('../assets/danger-icons/0.png')),
   [DangerLevel.None]: Image.resolveAssetSource(require('../assets/danger-icons/0.png')),
   [DangerLevel.Low]: Image.resolveAssetSource(require('../assets/danger-icons/1.png')),
@@ -56,6 +57,7 @@ export const AvalancheDangerIcon: React.FunctionComponent<AvalancheDangerIconPro
 };
 
 export const preloadAvalancheDangerIcons = async (queryClient: QueryClient, logger: Logger) => {
+  /* eslint-disable @typescript-eslint/no-var-requires */
   return Promise.all([
     ImageCache.prefetch(queryClient, logger, Image.resolveAssetSource(require('../assets/danger-icons/0.png')).uri),
     ImageCache.prefetch(queryClient, logger, Image.resolveAssetSource(require('../assets/danger-icons/1.png')).uri),

components/AvalancheForecastZoneMap.tsx

@@ -108,7 +108,7 @@ export const AvalancheForecastZoneMap: React.FunctionComponent<MapProps> = ({cen
 
   // useRef has to be used here. Animation and gesture handlers can't use props and state,
   // and aren't re-evaluated on render. Fun!
-  const mapView = useRef<AnimatedMapView | null>(null);
+  const mapView = useRef<AnimatedMapView>(null);
   const controller = useRef<AnimatedMapWithDrawerController>(new AnimatedMapWithDrawerController(AnimatedDrawerState.Hidden, avalancheCenterMapRegion, mapView, logger)).current;
   React.useEffect(() => {
     controller.animateUsingUpdatedAvalancheCenterMapRegion(avalancheCenterMapRegion);
@@ -184,7 +184,7 @@ export const AvalancheForecastZoneMap: React.FunctionComponent<MapProps> = ({cen
     .map(result => result.data) // get data from the results
     .filter(data => data) // only operate on results that have succeeded
     .forEach(forecast => {
-      if (forecast && forecast.forecast_zone) {
+      forecast &&
         forecast.forecast_zone?.forEach(({id}) => {
           if (zonesById[id]) {
             // the map layer will expose old forecasts with their danger level as appropriate, but the map expects to show a card
@@ -219,7 +219,6 @@ export const AvalancheForecastZoneMap: React.FunctionComponent<MapProps> = ({cen
             }
           }
         });
-      }
     });
   warningResults
     .map(result => result.data) // get data from the results

components/AvalancheProblemIcon.tsx

@@ -11,7 +11,7 @@ export interface AvalancheProblemIconProps {
 }
 
 const icons: Record<AvalancheProblemType, ImageSourcePropType> = {
-  /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports */
+  /* eslint-disable @typescript-eslint/no-unsafe-assignment */
   [AvalancheProblemType.DryLoose]: require('../assets/problem-icons/DryLoose.png'),
   [AvalancheProblemType.StormSlab]: require('../assets/problem-icons/StormSlab.png'),
   [AvalancheProblemType.WindSlab]: require('../assets/problem-icons/WindSlab.png'),
@@ -24,8 +24,8 @@ const icons: Record<AvalancheProblemType, ImageSourcePropType> = {
 };
 
 const sizes: Record<AvalancheProblemType, ImageResolvedAssetSource> = {
-  /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-require-imports */
-
+  /* eslint-disable @typescript-eslint/no-unsafe-argument */
+  /* eslint-disable @typescript-eslint/no-var-requires */
   [AvalancheProblemType.DryLoose]: Image.resolveAssetSource(require('../assets/problem-icons/DryLoose.png')),
   [AvalancheProblemType.StormSlab]: Image.resolveAssetSource(require('../assets/problem-icons/StormSlab.png')),
   [AvalancheProblemType.WindSlab]: Image.resolveAssetSource(require('../assets/problem-icons/WindSlab.png')),
@@ -55,6 +55,7 @@ export const AvalancheProblemIcon: React.FunctionComponent<AvalancheProblemIconP
 };
 
 export const preloadAvalancheProblemIcons = async (queryClient: QueryClient, logger: Logger) => {
+  /* eslint-disable @typescript-eslint/no-var-requires */
   return Promise.all([
     ImageCache.prefetch(queryClient, logger, Image.resolveAssetSource(require('../assets/problem-icons/DryLoose.png')).uri),
     ImageCache.prefetch(queryClient, logger, Image.resolveAssetSource(require('../assets/problem-icons/StormSlab.png')).uri),

components/content/NavigationHeader.tsx

@@ -1,6 +1,6 @@
 import {AntDesign, Entypo} from '@expo/vector-icons';
 import {getHeaderTitle} from '@react-navigation/elements';
-import {NativeStackHeaderProps} from '@react-navigation/native-stack';
+import {NativeStackHeaderProps} from '@react-navigation/native-stack/lib/typescript/src/types';
 import {HStack, View} from 'components/core';
 import {GenerateObservationShareLink} from 'components/observations/ObservationUrlMapping';
 import {Title1Black, Title3Black} from 'components/text';
@@ -28,7 +28,7 @@ export const NavigationHeader: React.FunctionComponent<
     if (!back) {
       firstOpen = true;
       // set back to not be null since we want a shared obs to have a back button
-      back = {title: 'Observations', href: undefined};
+      back = {title: 'Observations'};
     }
 
     shareCenterId = reverseLookup(AvalancheCenterWebsites, shareParams.share_url) as AvalancheCenterID;