Bump example apps to React Native 0.77 (#6768)

## Summary This PR bumps `react-native` in paper-example and fabric-example from `0.76.5` to `0.77.0-rc.6` (golden RC) accordingly to https://react-native-community.github.io/upgrade-helper/?from=0.76.5&to=0.77.0-rc.6. Apart from this, changes have been made in macos-example, tvos-example and web-example to align versions of common native dependencies so they are hoisted by yarn. I had to patch `@shopify/flash-list`: * Shopify/flash-list#1466 – fixes Android build * Shopify/flash-list#1041 – fixes `scrollTo` example Changes required by Reanimated to support RN 0.77 have been moved to separate PRs for the sake of atomicity and transparency: * #6875 * #6876 * #6883 * #6884 ## Test plan --------- Co-authored-by: Krzysztof Piaskowy <[email protected]>
software-mansion · Jan 13, 2025 · 5d5a435 · 5d5a435
1 parent a2eb043
commit 5d5a435
Show file tree

Hide file tree

Showing 30 changed files with 1,887 additions and 1,982 deletions.
diff --git a/.yarn/patches/@shopify-flash-list-npm-1.7.2-2a363895ca.patch b/.yarn/patches/@shopify-flash-list-npm-1.7.2-2a363895ca.patch
@@ -0,0 +1,73 @@
+diff --git a/package.json b/package.json
+index b30a5bacd99db50c5d09d7662f06bfbccca599a1..9915fa6b5d96243a00e16100da605e0f9596bf53 100644
+--- a/package.json
++++ b/package.json
+@@ -26,6 +26,7 @@
+   "license": "MIT",
+   "homepage": "https://shopify.github.io/flash-list/",
+   "main": "dist/index.js",
++  "react-native": "src/index.ts",
+   "types": "dist/index.d.ts",
+   "scripts": {
+     "up": "bundle install && yarn fixture:rn:up && yarn e2e:up && yarn build",
+diff --git a/src/FlashList.tsx b/src/FlashList.tsx
+index 0e9f071a53d113e85f3099ccf239d1f3d06361b6..877896f778b4fa27977b1aed9b550e2880c11e79 100644
+--- a/src/FlashList.tsx
++++ b/src/FlashList.tsx
+@@ -4,6 +4,7 @@ import {
+   RefreshControl,
+   LayoutChangeEvent,
+   NativeSyntheticEvent,
++  ScrollViewComponent,
+   StyleSheet,
+   NativeScrollEvent,
+ } from "react-native";
+@@ -842,6 +843,12 @@ class FlashList<T> extends React.PureComponent<
+     return this.rlvRef?.getScrollableNode?.() || null;
+   }
+
++  public getNativeScrollRef(): React.ElementRef<
++    typeof ScrollViewComponent
++  > | null {
++    return this.rlvRef?.getNativeScrollRef?.() || null;
++  }
++
+   /**
+    * Allows access to internal recyclerlistview. This is useful for enabling access to its public APIs.
+    * Warning: We may swap recyclerlistview for something else in the future. Use with caution.
+diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerDelegate.java
+index 4c9080790230cc75f48e4ee68c84df1080986bd6..29f81e03caed5c97401de153c53fe71c3cce9e10 100644
+--- a/android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerDelegate.java
++++ b/android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerDelegate.java
+@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
+
+ import android.view.View;
+ import androidx.annotation.Nullable;
++import com.facebook.react.uimanager.BaseViewManager;
+ import com.facebook.react.uimanager.BaseViewManagerDelegate;
+-import com.facebook.react.uimanager.BaseViewManagerInterface;
++import com.facebook.react.uimanager.LayoutShadowNode;
+
+-public class AutoLayoutViewManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & AutoLayoutViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
++public class AutoLayoutViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & AutoLayoutViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+   public AutoLayoutViewManagerDelegate(U viewManager) {
+     super(viewManager);
+   }
+diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerDelegate.java
+index 2b64af7d5ff936793bf027cba249f31777daba9f..4ba6e5fd815aeac1da56374c8c48a9fcd7f57061 100644
+--- a/android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerDelegate.java
++++ b/android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerDelegate.java
+@@ -11,10 +11,11 @@ package com.facebook.react.viewmanagers;
+
+ import android.view.View;
+ import androidx.annotation.Nullable;
++import com.facebook.react.uimanager.BaseViewManager;
+ import com.facebook.react.uimanager.BaseViewManagerDelegate;
+-import com.facebook.react.uimanager.BaseViewManagerInterface;
++import com.facebook.react.uimanager.LayoutShadowNode;
+
+-public class CellContainerManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & CellContainerManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
++public class CellContainerManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & CellContainerManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+   public CellContainerManagerDelegate(U viewManager) {
+     super(viewManager);
+   }
diff --git a/apps/common-app/package.json b/apps/common-app/package.json
@@ -30,14 +30,14 @@
     "react-strict-dom": "*"
   },
   "devDependencies": {
-    "@react-native-async-storage/async-storage": "^1.24.0",
-    "@react-native-community/slider": "^4.5.5",
-    "@react-native-masked-view/masked-view": "^0.3.1",
+    "@react-native-async-storage/async-storage": "2.1.0",
+    "@react-native-community/slider": "4.5.5",
+    "@react-native-masked-view/masked-view": "0.3.2",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
     "@react-navigation/native-stack": "^7.0.0",
     "@react-navigation/stack": "^7.0.0",
-    "@shopify/flash-list": "^1.7.1",
+    "@shopify/flash-list": "patch:@shopify/flash-list@npm%3A1.7.2#~/.yarn/patches/@shopify-flash-list-npm-1.7.2-2a363895ca.patch",
     "@tsconfig/react-native": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
     "d3-shape": "^3.2.0",
@@ -46,13 +46,13 @@
     "patch-package": "^8.0.0",
     "prettier": "^3.3.3",
     "react": "18.3.1",
-    "react-native": "0.76.5",
-    "react-native-gesture-handler": "2.20.2",
-    "react-native-pager-view": "^6.4.1",
+    "react-native": "0.77.0-rc.6",
+    "react-native-gesture-handler": "2.22.0",
+    "react-native-pager-view": "6.6.1",
     "react-native-reanimated": "workspace:*",
-    "react-native-safe-area-context": "^4.13.1",
-    "react-native-screens": "^4.0.0",
-    "react-native-svg": "^15.8.0",
+    "react-native-safe-area-context": "5.1.0",
+    "react-native-screens": "4.5.0",
+    "react-native-svg": "15.11.1",
     "react-strict-dom": "0.0.27",
     "typescript": "~5.3.0"
   }

diff --git a/apps/fabric-example/android/build.gradle b/apps/fabric-example/android/build.gradle
@@ -4,8 +4,8 @@ buildscript {
         minSdkVersion = 24
         compileSdkVersion = 35
         targetSdkVersion = 34
-        ndkVersion = "26.1.10909125"
-        kotlinVersion = "1.9.24"
+        ndkVersion = "27.1.12297006"
+        kotlinVersion = "2.0.21"
     }
     repositories {
         google()