WR 469848 0.77 Supports API 35+ (Android 15) — API 36 also works with config updates and is the latest stable * [Apply the diff from the react native upgrade helper](https://react-native-community.github.io/upgrade-helper/?from=0.75.5&to=0.77.3&package=org.mahara.mobile.app&name=MaharaMobile) * Once upgraded, ensure your emulator/device is switched to one that supports API 36 * https://reactnative.directory ## :bar_chart: Full Upgrade Table for RN 0.77.3 | Package | Current | Recommended | Action | |---------|---------|-------------|--------| | **react-native** | 0.75.5 | **0.77.3** | :arrow_up: Core upgrade | | **@react-native/babel-preset** | 0.75.5 | **0.77.3** | Keep aligned with RN | | **@react-native/eslint-config** | 0.75.5 | **0.77.3** | Keep aligned | | **@react-native/metro-config** | 0.75.5 | **0.77.3** | Keep aligned | | **@react-native/typescript-config** | 0.75.5 | **0.77.3** | Keep aligned | | **react** | 18.3.1 | 18.3.1 | :white_check_mark: OK | | **react-dom** | 19.1.0 | :x: Remove (or downgrade to match React) | RN doesn’t use `react-dom` unless you target web | | **react-test-renderer** | 18.3.1 | 18.3.1 | :white_check_mark: OK | | **typescript** | 5.0.4 | **\~5.3** | :arrow_up: Recommended to match RN template | | **@babel/core** | ^7.20.0 | ^7.24+ | :arrow_up: Update to latest | | **@babel/preset-env** | ^7.20.0 | ^7.24+ | :arrow_up: Update to latest | | **@babel/preset-typescript** | ^7.24.7 | ^7.24.7 | :white_check_mark: OK | | **@babel/runtime** | ^7.20.0 | ^7.24+ | :arrow_up: Update to latest | | **babel-jest** | ^29.6.3 | ^29.6.3 | :white_check_mark: OK | | **jest** | ^29.6.3 | ^29.6.3 | :white_check_mark: OK | | **ts-jest** | ^29.1.4 | ^29.1.4 | :white_check_mark: OK | | **@types/jest** | ^29.5.12 | ^29.5.12 | :white_check_mark: OK | | **@types/react** | ^18.3.3 | ^18.3.3 | :white_check_mark: OK | | **@types/react-test-renderer** | ^18.0.0 | ^18.0.0 | :white_check_mark: OK | | **eslint** | ^8.19.0 | ^8.57.0 (latest) | :arrow_up: Safe upgrade | | **eslint-config-airbnb** | ^19.0.4 | ^19.0.4 | :white_check_mark: OK | | **eslint-config-airbnb-typescript** | ^17.1.0 | ^17.1.0 | :white_check_mark: OK | | **eslint-config-prettier** | ^9.1.0 | ^9.1.0 | :white_check_mark: OK | | **eslint-plugin-import** | ^2.29.1 | ^2.29.1 | :white_check_mark: OK | | **eslint-plugin-jsx-a11y** | ^6.9.0 | ^6.9.0 | :white_check_mark: OK | | **eslint-plugin-react-native** | ^4.1.0 | ^4.1.0 | :white_check_mark: OK | | **@react-native-community/eslint-config** | ^3.2.0 | ^3.2.0 | :white_check_mark: OK | | **prettier** | 2.8.8 | 3.x | :arrow_up: Consider upgrading | | **@trivago/prettier-plugin-sort-imports** | ^4.3.0 | ^4.3.0 | :white_check_mark: OK | | **cz-conventional-changelog** | ^3.3.0 | ^3.3.0 | :white_check_mark: OK | | **check-peer-dependencies** | ^4.3.0 | ^4.3.0 | :white_check_mark: OK | | **redux-mock-store** | ^1.5.4 | ^1.5.4 | :white_check_mark: OK | | **@tsconfig/react-native** | ^3.0.5 | ^3.0.5 | :white_check_mark: OK | | **@testing-library/react-native** | ^12.5.1 | ^12.5.1 | :white_check_mark: OK | | **babel-plugin-macros** | ^3.1.0 | ^3.1.0 | :white_check_mark: OK | | **babel-plugin-module-resolver** | ^5.0.2 | ^5.0.2 | :white_check_mark: OK | | **react-native-gesture-handler** | 2.24.0 | 2.24.0 | :white_check_mark: OK | | **react-native-screens** | ^3.31.1 | ^3.31.1 | :white_check_mark: OK | | **react-native-safe-area-context** | ^4.10.4 | ^4.10.4 | :white_check_mark: OK | | **react-native-svg** | ^15.3.0 | ^15.3.0 | :white_check_mark: OK | | **react-native-webview** | ^13.10.3 | ^13.10.3 | :white_check_mark: OK | | **react-native-device-info** | ^11.1.0 | ^11.1.0 | :white_check_mark: OK | | **react-native-document-picker** | ^9.3.0 | ^9.3.0 | :white_check_mark: OK | | **react-native-image-picker** | ^7.1.2 | ^7.1.2 | :white_check_mark: OK | | **react-native-localize** | ^3.2.0 | ^3.2.0 | :white_check_mark: OK | | **react-native-permissions** | ^4.1.5 | **5.x** | :arrow_up: Upgrade for Android 14 support | | **react-native-blob-util** | ^0.19.9 | ^0.19.9 | :warning: Semi-maintained, test carefully | | **react-native-uuid** | ^2.0.2 | ^2.0.2 | :white_check_mark: OK | | **react-native-version** | ^4.0.0 | ^4.0.0 | :white_check_mark: OK | | **@react-native-community/masked-view** | ^0.1.11 | :x: Deprecated | Replace with `@react-native-masked-view/masked-view` | | **@react-navigation/native** | ^6.1.17 | ^6.1.17 | :white_check_mark: OK | | **@react-navigation/bottom-tabs** | ^6.5.20 | ^6.5.20 | :white_check_mark: OK | | **@react-navigation/stack** | ^6.3.29 | ^6.3.29 | :white_check_mark: OK | | **@reduxjs/toolkit** | ^2.2.5 | ^2.2.5 | :white_check_mark: OK | | **react-redux** | ^9.1.2 | ^9.1.2 | :white_check_mark: OK | | **redux-logger** | ^3.0.6 | ^3.0.6 | :white_check_mark: OK | | **@lingui/core**, **@lingui/react**, **@lingui/macro**, **@lingui/cli** | ^4.11.1 | ^4.11.1 | :lock:OK for React Native, but security update needed to get to @lingui/cli@5.4.1 which is a breaking change. Test languages. | | **@fortawesome/** packages | ^6.5.2 | ^6.5.2 | :white_check_mark: OK | | **@gluestack-style/react**, **@gluestack-ui/** packages | \~1.0.x | \~1.0.x | :white_check_mark: OK | | **make-plural** | ^7.4.0 | ^7.4.0 | :white_check_mark: OK | --- ## Key Actions 1. **Core RN upgrade** → bump `react-native` and all `@react-native/*` scoped packages to `0.77.3`. 2. **React DOM** → remove or downgrade (not used in native apps). 3. **Permissions** → upgrade to latest `5.x`. 4. **Masked View** → replace `@react-native-community/masked-view` → `@react-native-masked-view/masked-view`. 5. **TypeScript** → upgrade to `~5.3`. 6. **Babel** → update to `^7.24+`. 7. **Prettier** → consider upgrading to `3.x` (requires config tweaks). 8. **Android build.gradle** → set `compileSdkVersion` and `targetSdkVersion` to **34 or 35** manually.