Migrate to Expo#7339
Draft
hawkrives wants to merge 76 commits into
Draft
Conversation
This commit migrates the All About Olaf app from bare React Native 0.72.9 to Expo SDK 50 using the Expo Prebuild (bare workflow) approach. - Added expo@^50.0.0 and expo-status-bar - Added babel-preset-expo and @expo/metro-config - Added Expo native module replacements: - expo-device (replaces react-native-device-info) - expo-secure-store (replaces react-native-keychain) - expo-calendar (replaces react-native-calendar-events) - expo-updates (replaces react-native-restart) - expo-web-browser, expo-application, expo-asset, expo-font, expo-constants - Created app.json with Expo configuration - Updated babel.config.js to use babel-preset-expo - Updated metro.config.js to use expo/metro-config - Updated package.json scripts to use Expo CLI commands - Configured plugins for native modules in app.json - Updated source/root.ts to use registerRootComponent from expo - Added EXPO_MIGRATION.md with comprehensive migration guide - Documented next steps, testing checklist, and rollback plan - Identified iOS-specific modules requiring attention 1. Review EXPO_MIGRATION.md for detailed migration guide 2. Run `npx expo prebuild` to regenerate native code (when ready) 3. Migrate code to use Expo equivalents (see migration guide) 4. Test all functionality thoroughly - npm scripts changed (start, ios, android now use expo CLI) - Native folders will be regenerated when running expo prebuild - Some native modules need code migration (see EXPO_MIGRATION.md) Resolves migration to Expo platform. Update peer dependencies and migrate to Expo modules This commit completes the Expo SDK 54 migration by: 1. Updating all workspace module peer dependencies to React 19.1 and RN 0.81 2. Migrating code from bare React Native modules to Expo equivalents ## Module Peer Dependency Updates: - Updated 31 workspace modules in modules/* - React: ^18.0.0 → ^19.1.0 - React Native: ^0.72.9 → ^0.81.0 ## Code Migrations: ### react-native-keychain → expo-secure-store - source/lib/login.ts: Migrated credential storage to SecureStore - source/lib/stoprint/api.ts: Updated to use local Credentials type - source/lib/stoprint/__mocks__/api.ts: Updated mock type - source/lib/refresh.ts: Use resetCredentials from login.ts ### react-native-device-info → expo-device + expo-application - source/views/home/button.tsx: Migrated hasNotch() to use expo-device - source/views/settings/screens/overview/support.tsx: Migrated device info to expo-device and expo-application ### react-native-restart → expo-updates - source/lib/refresh.ts: Use Updates.reloadAsync() - source/views/settings/screens/overview/server-url.tsx: Use Updates.reloadAsync() ### react-native-calendar-events → expo-calendar - modules/add-to-device-calendar/lib.ts: Complete migration to expo-calendar API ## Breaking Changes: - expo-secure-store stores credentials as JSON instead of using SharedWebCredentials - expo-calendar requires getting calendars before creating events - expo-updates.reloadAsync() is async (was sync with react-native-restart) ## Testing Required: - Login/logout flow with secure storage - Calendar event creation - App restart functionality - Device info display in support screen Update dependencies for React 19 compatibility and npm ci support Updated packages to support React 19 and fix npm ci compatibility: ## Updated Packages: ### Production Dependencies: - @react-native-async-storage/async-storage: 1.19.3 → 2.2.0 (npm ci compatibility) - @reduxjs/toolkit: 1.9.7 → 2.5.1 (React 19 support) - @sentry/react-native: 5.9.1 → 6.5.0 (React 19 support) - react-redux: 8.1.3 → 9.2.0 (React 19 support) ### Dev Dependencies: - @types/react: 18.0.28 → 19.1.0 (matches React 19.1.0) - react-test-renderer: 18.2.0 → 19.1.0 (matches React 19.1.0) ## Changes: - npm ci now works without --legacy-peer-deps flag - All packages now have compatible peer dependencies with React 19 - Redux Toolkit v2 brings improved TypeScript support and performance - Sentry v6 adds React 19 support and better error tracking ## Testing: - ✅ npm install succeeds - ✅ npm ci succeeds without legacy-peer-deps - ✅ All peer dependencies resolved correctly Remove packages replaced by Expo modules Uninstalled the following packages that have been replaced by Expo equivalents: - react-native-device-info → expo-device - react-native-keychain → expo-secure-store - react-native-calendar-events → expo-calendar - react-native-restart → expo-updates - react-native-inappbrowser-reborn (expo-web-browser available) All code has already been migrated to use the Expo equivalents. fix expo plugin installations ignore expo stuff from git
Every job that uses actions/setup-node now has pnpm/action-setup@v4 added before it, ensuring pnpm is available. This fixes failures where pnpm was not found because only the cache-npm-* jobs were installing it. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
Remove the cache-npm-linux, cache-npm-macos, and cache-bundler-macos jobs. Each job now installs its own dependencies via pnpm install with actions/setup-node's built-in cache: pnpm for pnpm store caching. This simplifies the workflow significantly, removes fragile cross-job cache dependencies, and fixes the "Unable to locate executable file: pnpm" errors. Also removes debug steps that were added during troubleshooting. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
ios-build now runs `bundle exec pod install --deployment` directly instead of depending on a separate cache-cocoapods job. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
The project migrated to Expo, so react-native bundle no longer works without @react-native-community/cli. Replace with npx expo export:embed which has the same interface. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
Switch all npm run/npx commands in check.yml to pnpm run/pnpm exec for consistency with pnpm-installed node_modules. Also update prettier from 3.1.0 to 3.8.1. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
pnpm run passes -- literally to the script unlike npm run, so the extra -- was being passed as an argument to prettier/jest. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
The project migrated to Expo Router, so the entry file is node_modules/expo-router/entry.js, not the old index.js which imported the removed ./source/root. https://claude.ai/code/session_017UwPb7nMrhjdsAnjKEAfmK
Configure PreCommit hooks in .claude/settings.json to run prettier check, ESLint, and TypeScript type checking before every commit. Add typecheck script to package.json. https://claude.ai/code/session_017XQzSgAz5pnWj2EPpLGXii
- Restore babel.config.js (accidentally deleted in prior wip commit), which babel-jest needs to transform JS/TS files - Fix transformIgnorePatterns in jest.config.ts for pnpm compatibility (pnpm nests packages under node_modules/.pnpm/) - Add @react-native-clipboard/clipboard mock to jest-setup.js - Wrap react-test-renderer.create calls in act() for React 19 compat https://claude.ai/code/session_01QV5XThGgCHXk1sqHz9duXG
- Add `expo prebuild` steps to generate native android/ and ios/ directories before building, since they are gitignored in this Expo managed project - Upgrade Java from 11 to 17 (required by Expo SDK 54 / React Native 0.79+) - Replace deprecated gradle/gradle-build-action with gradle/actions/setup-gradle - Remove --deployment flag from pod install (no checked-in Podfile.lock) - Fix iOS cache key to use app.json instead of non-existent native files - Add mkdir -p to bundle:ios script for output directory creation https://claude.ai/code/session_01NhFwfAXiX8WxrYfbnaeoXt
Use `let tree!:` (definite assignment assertion) instead of `tree!` at each usage site, resolving 8 @typescript-eslint/no-non-null-assertion warnings in LoadingView and NoticeView tests. https://claude.ai/code/session_01CiE4kExQkdaFd41VtcSuy1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
useRoute()/useNavigation()withuseLocalSearchParams()/useRouter()across the entire codebasecreateTabNavigator()withNativeTabs_layout.tsxfiles for SIS, Streaming, Menus, and Newssrc/app/) for all feature screens: Contacts, Dictionary, Student Orgs, Directory, Menus, News, SIS, Streaming, StoPrint, Settings, Events, Bus, and Building Hourssrc/navigation/routes.tsxandsrc/navigation/types.tsxNavigationOptions,NavigationKey,RootStackParamListexports from view index filessource/tosrc/,react-native starttoexpo start) and CI cache keysMigration phases
TypeScript status
Only 3 pre-existing type errors remain (none introduced by this migration):
navigation-tabs/tabbed-view.tsx— missing@react-navigation/bottom-tabs(unused module)tableview/cells/textfield.tsx— React Native ref type issuedirectory/list.tsx— OpaqueColorValue cast issueTest plan
tsc --noEmit— 3 pre-existing errors onlyhttps://claude.ai/code/session_01V7CGC2RauEt5TK62H2zB3h