New Architecture and Expo 53 upgrade

App.tsx

@@ -39,7 +39,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';
@@ -417,7 +417,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,69 @@ 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(() => {
+        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(() => {
+        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}$/);
+      });
     });
   });
 

app.json

@@ -7,7 +7,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
-    "newArchEnabled": false,
+    "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
@@ -56,6 +56,8 @@
       ]
     },
     "plugins": [
+      "expo-mail-composer",
+      "expo-web-browser",
       "expo-localization",
       "@rnmapbox/maps",
       [

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')),
@@ -134,7 +134,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

@@ -167,8 +167,8 @@ 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 &&
-        forecast.forecast_zone?.forEach(({id}) => {
+      if (forecast && forecast.forecast_zone) {
+        forecast.forecast_zone.forEach(({id}) => {
           if (zonesById[id]) {
             // If the zone is marked as off-season in the map layer, we want the danger level to be None so that the color is grey
             // regarless of what the forecast says
@@ -216,6 +216,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/content/carousel/MediaViewerModal/MediaViewerModal.tsx

@@ -66,7 +66,7 @@ export const MediaViewerModal: React.FunctionComponent<MediaViewerModalProps> =
   );
 
   return (
-    <Modal visible={visible} onRequestClose={onClose} animationType="fade">
+    <Modal visible={visible} onRequestClose={onClose} animationType="fade" presentationStyle="overFullScreen">
       <View flex={1} style={{backgroundColor: colorLookup('modal.background')}}>
         <MediaViewerModalHeader index={currentItemIndex} mediaCount={mediaItems.length} onClose={onClose} />
         <GestureHandlerRootView>

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/forecast/WeatherTab.tsx

@@ -21,7 +21,7 @@ import {isArray} from 'lodash';
 import {LoggerContext, LoggerProps} from 'loggerContext';
 import {usePostHog} from 'posthog-react-native';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {Platform, RefreshControl, ScrollView} from 'react-native';
+import {RefreshControl, ScrollView} from 'react-native';
 import {HomeStackParamList, TabNavigationProps} from 'routes';
 import {colorLookup} from 'theme';
 import {
@@ -166,7 +166,7 @@ export const NACWeatherTab: React.FC<WeatherTabProps> = ({zone, center_id, reque
   }
 
   const adaptedWeatherForecast = center_id === 'SAC' ? adaptSierraWeatherForecast(weatherForecast) : weatherForecast;
-  const shouldStartCollapsed = Platform.OS === 'android';
+
   return (
     <ScrollView refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />}>
       <VStack space={8} backgroundColor={colorLookup('primary.background')}>
@@ -196,10 +196,11 @@ export const NACWeatherTab: React.FC<WeatherTabProps> = ({zone, center_id, reque
         {adaptedWeatherForecast.weather_discussion && (
           <CollapsibleCard
             identifier={'weatherSynopsis'}
+            marginTop={1}
             borderRadius={0}
             borderColor="white"
             header={<BodyBlack>Weather Discussion</BodyBlack>}
-            startsCollapsed={shouldStartCollapsed}>
+            startsCollapsed={false}>
             <HTML source={{html: adaptedWeatherForecast.weather_discussion}} />
           </CollapsibleCard>
         )}
@@ -791,8 +792,6 @@ export const BTACWeatherForecast: React.FunctionComponent<{forecast: RowColumnWe
     data: snowData,
   };
 
-  const shouldStartCollapsed = Platform.OS === 'android';
-
   return (
     <>
       <CollapsibleCard
@@ -801,7 +800,7 @@ export const BTACWeatherForecast: React.FunctionComponent<{forecast: RowColumnWe
         borderRadius={0}
         borderColor="white"
         header={<BodyBlack>Weather Discussion</BodyBlack>}
-        startsCollapsed={shouldStartCollapsed}>
+        startsCollapsed={false}>
         <Body>{forecast.data[weatherSynopsisRow][0].value}</Body>
       </CollapsibleCard>
       <ForecastPeriod periods={periods} />

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/form/ImageCaptionFieldEditView.tsx

@@ -4,7 +4,7 @@ import {TextField, TextFieldComponent} from 'components/form/TextField';
 import {BodySemibold} from 'components/text';
 import {useEditViewState} from 'hooks/useEditViewState';
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
-import {FormProvider, useForm} from 'react-hook-form';
+import {FormProvider, Resolver, useForm} from 'react-hook-form';
 import {Animated, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, PanResponder, Platform, Pressable, StyleSheet, TextInput, View} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {z} from 'zod';
@@ -50,7 +50,7 @@ export const ImageCaptionFieldEditView: React.FC<Props> = ({onSetCaption, onDism
   // There is only one value, but using <TextField /> requires the use of a <FormProvider />
   const formContext = useForm<CaptionFormData>({
     defaultValues: initialCaption ? {caption: initialCaption} : DefaultCaptionData,
-    resolver: zodResolver(captionForm),
+    resolver: zodResolver(captionForm) as Resolver<CaptionFormData>,
     mode: 'onBlur',
     shouldFocusError: false,
     shouldUnregister: true,