Upgrade Project to Expo 56

[kevinherdez]

• Upgrade to Expo 54/55 #1172
• Support Edge-to-Edge Display Android #1135
• Remove patches for react-native-collapsible and react-native-tab-view #1173
• Remove NWAC Obs if needed #1152
• Upgrade project to Expo 56 #1190

This PR bumps the project up to Expo 56 (the current expo!) as well as includes other project improvements.

Expo 54 Upgrade

The main changes involved updating the imports for expo-file-system and pulling in react-native-worklets to go alongside react-native-reanimated

Android Edge-to-Edge

Updates views to support Android's Edge-to-Edge display which allows views to take up the full screen. Most of the changes involved setting statusBarTranslucent on modals and fixing the keyboardAvoidingView

Expo 55 Upgrade

Very straightforward upgrade. It worked without needing to change any code.

Remove NWAC Obs code

This code isn't being used anymore.

Removed 2 patched dependencies

react-native-tab-view is fixed as of the latest version so it no longer requires a patch. react-native-collapsible is no longer being updated. I was able to use Claude to create our own custom component that does the same thing so that we could remove the dependency

Expo 56

Splash screen changes

Expo removed the splash option from the config and moved it to a plugin. We can no longer access the splash properties by doing Constants.expoConfig?.splash?....

Typescript 6

Expo 56 introduces Typescript 6 to the repo. The main changes here is that in the ts.config baseURL is deprecated and replaced by paths:. The bigger breaking change was that @types/jest globals were not auto-included which resulted in breaking changes to our tests. The fix here (that Claude added) was to add a specific reference to @types/jest in declarations.d.ts

React Native 0.85

The new React Native changed StyleSheet.absoluteFillObject to StyleSheet.absoluteFill. This was updated in 5 files.

iOS only: Xcode 26.4 introduces breaking changes for React Native which meant that we couldn't compile the app using newer versions of Xcode. Starting with Expo 56, the app now must be compiled on Xcode 26.4+

Upgrade rnmapbox/maps and react-native-posthog

rnmapbox/maps

When we added rnmapbox to the repo, there was issue with the EAS build preventing us from moving on from version 10.1.45. The issue stemmed from "RNMapboxImpl": "mapbox" being removed from the config options but EAS not being able to resolve it. That issue seems to be fixed so I updated to the latest version, 10.3.1

react-native-posthog

This should have been done as a part of the Expo 54 bump, but I didn't notice it until I did an EAS dev build. The old version we were on was still using the deprecated writeAsStringAsync from expo-file-system. The bump to the latest version fixes that, but the main methods that we use like .screen(), .capture(), etc changed their signature to now be async and return a Promise. As a result, these needed to be updated

[yuliadub]

sorry im late to the party, none of these are blocking - up to you if you want to follow up on any or not 🙂 (AI helped!)

1. Multiple places now use void postHog.screen(...) or void postHog.register(...). If PostHog ever rejects (network issue, SDK error), the error is silently swallowed.

Suggestion to consider a shared helper like:

const fireAndForget = (p: Promise<unknown>) => { p.catch(e => logger.warn(e)); };

2. ObservationFormData.ts — .nullable() added to image type field. This loosens the schema. Can upstream data genuinely provide null here?

3. declarations.d.ts — TypeScript 6 jest globals workaround. This is a valid short-term fix, but the comment says "TypeScript 6 no longer auto-includes @types/jest's ambient globals." A cleaner long-term approach is to include @types/jest in tsconfig.json array or use a jest.d.ts setup file. This is fine for now.

4. mockReanimated.ts — uses require() with eslint-disable

jest.mock('react-native-worklets', () => require('react-native-worklets/src/mock')); jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));

This is the standard approach, but react-native-reanimated/mock was deprecated in Reanimated 3+. The recommended mock is react-native-reanimated/src/mocks/mock or using jest-setup.js from their docs. Check if tests actually run correctly with this.

5. Edge-to-edge: removed paddingBottom={safeAreaInsets.bottom} in selection modal - just checking that this was intentional?

[kevinherdez]

Multiple places now use void postHog.screen(...) or void postHog.register(...). If PostHog ever rejects (network issue, SDK error), the error is silently swallowed.

I'll add this in a follow up PR. That's good for us to have.

ObservationFormData.ts — .nullable() added to image type field. This loosens the schema. Can upstream data genuinely provide null here?

I'll double check this and make sure it's okay.

declarations.d.ts — TypeScript 6 jest globals workaround. This is a valid short-term fix, but the comment says "TypeScript 6 no longer auto-includes @types/jest's ambient globals." A cleaner long-term approach is to include @types/jest in tsconfig.json array or use a jest.d.ts setup file. This is fine for now.

I like that solution a lot better. I'll add it to the follow up PR

This is the standard approach, but react-native-reanimated/mock was deprecated in Reanimated 3+. The recommended mock is react-native-reanimated/src/mocks/mock or using jest-setup.js from their docs. Check if tests actually run correctly with this.

Good call out. I'll double check this with their docs

Edge-to-edge: removed paddingBottom={safeAreaInsets.bottom} in selection modal - just checking that this was intentional?

It was because it added a grey bar under where the 'Continue' button is (see on screenshot). However, after playing around with it the button seems too low. I'll add the padding back but apply it to the view containing the button.

[kevinherdez]

ObservationFormData.ts — .nullable() added to image type field. This loosens the schema. Can upstream data genuinely provide null here?

The change here is to match ImagePickerAsset.type from expo-image-picker. We filter out the ImagePicker to only include types of image and livePhotos so we shouldn't be getting any media items with a null type. We're matching the ImagePickerAsset.type to easily convert from what we're given to what we're going to upload to the backend