Upgrade to React Native 0.81 & Expo 54

Author: ammarahm-ed

app/examples.tsx

@@ -2,14 +2,14 @@
 import React from 'react';
 import {
   Linking,
-  SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   TouchableOpacity,
 } from 'react-native';
 import {SheetManager} from 'react-native-actions-sheet';
+import {SafeAreaView} from 'react-native-safe-area-context';
 
 const MainScreen = () => {
   const examples: {

app/sheets.ts

@@ -1,4 +1,8 @@
-import {RouteDefinition, SheetDefinition, registerSheet} from 'react-native-actions-sheet';
+import {
+  RouteDefinition,
+  SheetDefinition,
+  registerSheet,
+} from 'react-native-actions-sheet';
 import Hello from './examples/hello';
 import Gestures from './examples/gestures';
 import SnapMe from './examples/snap-me';
@@ -15,7 +19,6 @@ import RouterSheet from './examples/router';
 import DrawUnderStatusBar from './examples/draw-under-statusbar';
 import ReturnData from './examples/return-data';
 
-
 // Register your Sheet component.
 /**
  * Registering the sheets here because otherwise sheet closes on
@@ -28,12 +31,12 @@ registerSheet('input', Input);
 registerSheet('payload', Payload);
 registerSheet('background-interaction', BackgroundInteraction);
 registerSheet('always-open', AlwaysOpen);
-registerSheet("scrollview", ScrollViewSheet);
-registerSheet('flatlist', FlatListSheet)
-registerSheet('flashlist', FlashListSheet)
+registerSheet('scrollview', ScrollViewSheet);
+registerSheet('flatlist', FlatListSheet);
+registerSheet('flashlist', FlashListSheet);
 registerSheet('scrollview-resize', ResizeSheet);
-registerSheet("nested-sheets", NestedSheet);
-registerSheet("sheet-router", RouterSheet);
+registerSheet('nested-sheets', NestedSheet);
+registerSheet('sheet-router', RouterSheet);
 registerSheet('draw-under-statusbar', DrawUnderStatusBar);
 registerSheet('return-data', ReturnData);
 
@@ -56,25 +59,24 @@ declare module 'react-native-actions-sheet' {
       };
     }>;
     'background-interaction': SheetDefinition;
-    'always-open': SheetDefinition,
-    'scrollview': SheetDefinition,
-    'flatlist': SheetDefinition,
-    'flashlist': SheetDefinition,
-    'scrollview-resize': SheetDefinition,
+    'always-open': SheetDefinition;
+    scrollview: SheetDefinition;
+    flatlist: SheetDefinition;
+    flashlist: SheetDefinition;
+    'scrollview-resize': SheetDefinition;
     'sheet-router': SheetDefinition<{
       routes: {
         'route-a': RouteDefinition;
         'route-b': RouteDefinition<{
-          value: string
+          value: string;
         }>;
-      }
+      };
     }>;
     'nested-sheets': SheetDefinition;
     'draw-under-statusbar': SheetDefinition;
     'return-data': SheetDefinition<{
-      returnValue: boolean
-    }>,
-
+      returnValue: boolean;
+    }>;
   }
 }
 

example/.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
   root: true,
   extends: '@react-native',
-  r,
 };

example/.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -33,6 +33,7 @@ local.properties
 .cxx/
 *.keystore
 !debug.keystore
+.kotlin/
 
 # node.js
 #
@@ -56,11 +57,19 @@ yarn-error.log
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 /vendor/bundle/
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
 # testing
 /coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

example/.prettierrc.js

@@ -1,7 +1,5 @@
 module.exports = {
   arrowParens: 'avoid',
-  bracketSameLine: true,
-  bracketSpacing: false,
   singleQuote: true,
   trailingComma: 'all',
 };

example/App.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import {SheetProvider} from 'react-native-actions-sheet';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import { SheetProvider } from 'react-native-actions-sheet';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import changeNavigationBarColor from 'react-native-navigation-bar-color';
 import MainScreen from '../app/examples';
 import '../app/sheets';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 const App = () => {
   // To match the style of action sheet navigation bar, we use react-native-navigation-bar-color on android and the app.
@@ -18,7 +18,8 @@ const App = () => {
         <GestureHandlerRootView
           style={{
             flex: 1,
-          }}>
+          }}
+        >
           <SheetProvider context="global">
             <MainScreen />
           </SheetProvider>

example/Gemfile

@@ -3,5 +3,14 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.13'
-gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'

example/README.md

@@ -2,58 +2,76 @@ This is a new [**React Native**](https://reactnative.dev) project, bootstrapped
 
 # Getting Started
 
->**Note**: Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till "Creating a new application" step, before proceeding.
+> **Note**: Make sure you have completed the [Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment) guide before proceeding.
 
-## Step 1: Start the Metro Server
+## Step 1: Start Metro
 
-First, you will need to start **Metro**, the JavaScript _bundler_ that ships _with_ React Native.
+First, you will need to run **Metro**, the JavaScript build tool for React Native.
 
-To start Metro, run the following command from the _root_ of your React Native project:
+To start the Metro dev server, run the following command from the root of your React Native project:
 
-```bash
-# using npm
+```sh
+# Using npm
 npm start
 
 # OR using Yarn
 yarn start
 ```
 
-## Step 2: Start your Application
+## Step 2: Build and run your app
 
-Let Metro Bundler run in its _own_ terminal. Open a _new_ terminal from the _root_ of your React Native project. Run the following command to start your _Android_ or _iOS_ app:
+With Metro running, open a new terminal window/pane from the root of your React Native project, and use one of the following commands to build and run your Android or iOS app:
 
-### For Android
+### Android
 
-```bash
-# using npm
+```sh
+# Using npm
 npm run android
 
 # OR using Yarn
 yarn android
 ```
 
-### For iOS
+### iOS
 
-```bash
-# using npm
+For iOS, remember to install CocoaPods dependencies (this only needs to be run on first clone or after updating native deps).
+
+The first time you create a new project, run the Ruby bundler to install CocoaPods itself:
+
+```sh
+bundle install
+```
+
+Then, and every time you update your native dependencies, run:
+
+```sh
+bundle exec pod install
+```
+
+For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
+
+```sh
+# Using npm
 npm run ios
 
 # OR using Yarn
 yarn ios
 ```
 
-If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator/simulator correctly.
+If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
+
+This is one way to run your app — you can also build it directly from Android Studio or Xcode.
 
-This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.
+## Step 3: Modify your app
 
-## Step 3: Modifying your App
+Now that you have successfully run the app, let's make changes!
 
-Now that you have successfully run the app, let's modify it.
+Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
 
-1. Open `App.tsx` in your text editor of choice and edit some lines.
-2. For **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Developer Menu** (<kbd>Ctrl</kbd> + <kbd>M</kbd> (on Window and Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (on macOS)) to see your changes!
+When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
 
-   For **iOS**: Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
+- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
+- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
 
 ## Congratulations! :tada:
 
@@ -62,11 +80,11 @@ You've successfully run and modified your React Native App. :partying_face:
 ### Now what?
 
 - If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
-- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started).
+- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
 
 # Troubleshooting
 
-If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
+If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
 
 # Learn More
 

example/__tests__/App.test.tsx

@@ -2,16 +2,12 @@
  * @format
  */
 
-import 'react-native';
 import React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
 import App from '../App';
 
-// Note: import explicitly to use the types shipped with jest.
-import {it} from '@jest/globals';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  renderer.create(<App />);
+test('renders correctly', async () => {
+  await ReactTestRenderer.act(() => {
+    ReactTestRenderer.create(<App />);
+  });
 });

example/android/app/build.gradle

@@ -8,14 +8,14 @@ apply plugin: "com.facebook.react"
  */
 react {
     /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '..'
-    // root = file("../")
-    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
-    // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
-    // codegenDir = file("../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
-    // cliFile = file("../node_modules/react-native/cli.js")
+    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to
@@ -49,6 +49,9 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }
 
 /**
@@ -60,14 +63,14 @@ def enableProguardInReleaseBuilds = false
  * The preferred build flavor of JavaScriptCore (JSC)
  *
  * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
  *
  * The international variant includes ICU i18n library and necessary data
  * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
  * give correct results when using with locales other than en-US. Note that
  * this variant is about 6MiB larger per architecture than default.
  */
-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion
@@ -107,13 +110,10 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-    implementation("com.facebook.react:flipper-integration")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {
         implementation jscFlavor
     }
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)