package.json: bump to Expo 53.0.20

.github/actions/setup/action.yaml

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

.gitignore

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

App.tsx

@@ -52,7 +52,7 @@ import {TabNavigatorParamList} from 'routes';
 import {colorLookup} from 'theme';
 import {AvalancheCenterID, AvalancheCenterWebsites} from 'types/nationalAvalancheCenter';
 
-require('date-time-format-timezone');
+import 'date-time-format-timezone';
 
 import axios, {AxiosRequestConfig} from 'axios';
 import {QUERY_CACHE_ASYNC_STORAGE_KEY} from 'data/asyncStorageKeys';
@@ -357,7 +357,7 @@ const BaseApp: React.FunctionComponent<{
     Lato_900Black,
     Lato_900Black_Italic,
     // typing the return of `require()` here does nothing for us
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports
     NAC_Icons: require('./assets/fonts/nac-icons.ttf'),
   });
 
@@ -445,7 +445,7 @@ const BaseApp: React.FunctionComponent<{
             height: '100%',
             resizeMode: Constants.expoConfig?.splash?.resizeMode || 'contain',
           }}
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports
           source={require('./assets/splash.png')}
         />
         <Center style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>

Preferences.test.tsx

@@ -1,11 +1,12 @@
 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
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return,  @typescript-eslint/no-require-imports
 jest.mock('@react-native-async-storage/async-storage', () => require('@react-native-async-storage/async-storage/jest/async-storage-mock'));
 
 describe('Preferences', () => {
@@ -21,11 +22,12 @@ describe('Preferences', () => {
 
   it('updates after preferences are loaded', async () => {
     await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true}));
-    const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+    const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
     expect(result.current.preferences.center).toEqual('NWAC');
 
-    await waitForNextUpdate();
-    expect(result.current.preferences.center).toEqual('BAC');
+    await waitFor(() => {
+      expect(result.current.preferences.center).toEqual('BAC');
+    });
   });
 
   it('falls back to defaults if preferences cannot be parsed', async () => {
@@ -48,61 +50,68 @@ describe('Preferences', () => {
 
     it('updates to a default value after loading', async () => {
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true}));
-      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
 
-      await waitForNextUpdate();
-      expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
+      await waitFor(() => {
+        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, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
 
-      await waitForNextUpdate();
-      expect(result.current.preferences.mixpanelUserId).toEqual('00000000-0000-0000-0000-000000000000');
+      await waitFor(() => {
+        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, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
-      await waitForNextUpdate();
-      expect(result.current.preferences.center).toEqual('BAC');
-      expect(result.current.preferences.mixpanelUserId).toEqual(userId);
+      await waitFor(() => {
+        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();
 
-      // 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);
+      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);
+      });
     });
 
     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, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
-      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);
+      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);
+      });
     });
 
     it('does overwrite an invalid id', async () => {
       await AsyncStorage.setItem(PREFERENCES_KEY, JSON.stringify({center: 'BAC', hasSeenCenterPicker: true, mixpanelUserId: 'not a uuid'}));
-      const {result, waitForNextUpdate} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
+      const {result} = renderHook(() => usePreferences(), {wrapper: PreferencesProvider});
       expect(result.current.preferences.mixpanelUserId).toBeUndefined();
 
-      await waitForNextUpdate();
-      expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
+      await waitFor(() => {
+        expect(result.current.preferences.mixpanelUserId).toMatch(/^[0-9a-f]{8}-([0-9a-f]{4}-){3}[0-9a-f]{12}$/);
+      });
     });
   });
 

clientContext.ts

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

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 */
-  /* eslint-disable @typescript-eslint/no-var-requires */
+  /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-require-imports */
+
   const source: Record<AvalancheCenterID, ImageResolvedAssetSource> = {
     ['BAC']: Image.resolveAssetSource(require('../assets/logos/BAC.png')),
     ['BTAC']: Image.resolveAssetSource(require('../assets/logos/BTAC.png')),
@@ -122,7 +122,6 @@ 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 */
+  /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports */
   [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,8 +23,7 @@ const icons: Record<DangerLevel, ImageSourcePropType> = {
 };
 
 const sizes: Record<DangerLevel, ImageResolvedAssetSource> = {
-  /* eslint-disable @typescript-eslint/no-var-requires */
-  /* eslint-disable @typescript-eslint/no-unsafe-argument */
+  /* eslint-disable @typescript-eslint/no-unsafe-argument,  @typescript-eslint/no-require-imports */
   [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')),
@@ -57,7 +56,6 @@ 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);
+  const mapView = useRef<AnimatedMapView | null>(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 => {
-      forecast &&
+      if (forecast && forecast.forecast_zone) {
         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,6 +219,7 @@ 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 */
+  /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports */
   [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 */
-  /* eslint-disable @typescript-eslint/no-var-requires */
+  /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-require-imports */
+
   [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,7 +55,6 @@ 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/lib/typescript/src/types';
+import {NativeStackHeaderProps} from '@react-navigation/native-stack';
 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'};
+      back = {title: 'Observations', href: undefined};
     }
 
     shareCenterId = reverseLookup(AvalancheCenterWebsites, shareParams.share_url) as AvalancheCenterID;

components/core/index.ts

@@ -4,5 +4,5 @@ export * from './Center';
 export * from './Divider';
 // Layout components
 export * from './HStack';
-export * from './VStack';
 export * from './View';
+export * from './VStack';

components/form/CheckboxSelectField.tsx

@@ -16,13 +16,22 @@ interface CheckboxSelectFieldProps extends ViewProps {
   items: Item[];
   radio?: boolean; // If true, will default to selecting first item and always enforce selection
   disabled?: boolean;
-  labelComponent?: React.FunctionComponent<TextWrapperProps>;
+  labelComponent?: (props: TextWrapperProps) => React.ReactNode;
   labelSpace?: number;
 }
 
 // This component renders a column of checkboxes for the given items
 // It's an alternative to SelectField when you don't want a dropdown
-export function CheckboxSelectField({name, label, items, disabled, labelComponent = BodyXSmBlack, labelSpace = 4, radio, ...props}: CheckboxSelectFieldProps) {
+export function CheckboxSelectField({
+  name,
+  label,
+  items,
+  disabled,
+  labelComponent = BodyXSmBlack as (props: TextWrapperProps) => React.ReactNode,
+  labelSpace = 4,
+  radio,
+  ...props
+}: CheckboxSelectFieldProps) {
   const {setValue} = useFormContext();
   const {field} = useController({name});
   const onChange = useCallback(

components/map/AnimatedCards.tsx

@@ -66,11 +66,11 @@ export class AnimatedMapWithDrawerController {
   topElementsHeight = 0;
   cardDrawerMaximumHeight = 0;
   tabBarHeight = 0;
-  mapView: RefObject<AnimatedMapView>;
+  mapView: RefObject<AnimatedMapView | null>;
   // We store the last time we logged a region calculation so as to continue logging but not spam
   lastLogged: Record<string, string>; // mapping hash of parameters to the time we last logged it
 
-  constructor(state = AnimatedDrawerState.Docked, region: Region, mapView: RefObject<AnimatedMapView>, logger: Logger) {
+  constructor(state = AnimatedDrawerState.Docked, region: Region, mapView: RefObject<AnimatedMapView | null>, logger: Logger) {
     this.logger = logger;
     this.state = state;
     this.baseOffset = AnimatedMapWithDrawerController.OFFSETS[state];
@@ -475,14 +475,16 @@ export const AnimatedCards = <T, U>(props: AnimatedCardsProps<T, U>) => {
         onMomentumScrollEnd={onMomentumScrollEnd}
         {...panResponder.panHandlers}
         {...flatListProps}
-        data={items.map(
-          (i: T): ItemRenderData<T, U> => ({
-            key: getItemId(i),
-            item: i,
-            date: date,
-            center_id: center_id,
-          }),
-        )}
+        data={
+          items.map(
+            (i: T): ItemRenderData<T, U> => ({
+              key: getItemId(i),
+              item: i,
+              date,
+              center_id,
+            }),
+          ) as unknown as Animated.WithAnimatedObject<ArrayLike<ItemRenderData<T, U>>>
+        }
         renderItem={renderItemAdapter}
       />
     </Animated.View>

components/observations/ObservationDetailView.tsx

@@ -277,7 +277,7 @@ export const ObservationCard: React.FunctionComponent<{
                           longitude: observation.location_point.lng,
                         }}
                         anchor={{x: 0.5, y: 1}}>
-                        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
+                        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-require-imports */}
                         <Image source={require('assets/map-marker.png')} style={{width: 40, height: 40}} />
                       </Marker>
                     </ZoneMap>