fix: upgrade bottom sheet and fix reanimated errors in new arch (#2806)

isekovanic · web-flow · commit 5a077bf9fd4a · 2024-11-21T18:58:25.000+01:00
* fix: upgrade bottom sheet to get rid of warnings

* fix: add sample app yarn.lock as well

* fix: all remnants of reanimated errors

* fix: update peer dependencies
diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock
@@ -1439,27 +1439,6 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-cameraroll (7.8.1):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
   - react-native-document-picker (9.3.1):
     - DoubleConversion
     - glog
@@ -2254,7 +2233,6 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-blob-util (from `../node_modules/react-native-blob-util`)
-  - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - react-native-document-picker (from `../node_modules/react-native-document-picker`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
@@ -2403,8 +2381,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
   react-native-blob-util:
     :path: "../node_modules/react-native-blob-util"
-  react-native-cameraroll:
-    :path: "../node_modules/@react-native-camera-roll/camera-roll"
   react-native-document-picker:
     :path: "../node_modules/react-native-document-picker"
   react-native-image-picker:
@@ -2555,7 +2531,6 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 858e7be7b51da78fd6a12b2461d92ea44e88c0f2
   React-microtasksnativemodule: a221789bbd16b09f083a60a4bec8623e2dfbb59f
   react-native-blob-util: 356047c561b3506396852bc0d7988243f74dd77d
-  react-native-cameraroll: 1f91168f2e07c0cd971e181dbf86ee40dd685ac3
   react-native-document-picker: 1e082836a633ca9e7c75758036ff42535baaf36b
   react-native-image-picker: df6597d4b1878a443796be11eb2b7286ed10ece6
   react-native-netinfo: 076df4f9b07f6670acf4ce9a75aac8d34c2e2ccc
@@ -2608,4 +2583,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.14.3
diff --git a/examples/SampleApp/package.json b/examples/SampleApp/package.json
@@ -25,7 +25,6 @@
     "@notifee/react-native": "^9.1.2",
     "@op-engineering/op-sqlite": "^9.3.0",
     "@react-native-async-storage/async-storage": "^1.21.0",
-    "@react-native-camera-roll/camera-roll": "^7.8.0",
     "@react-native-community/netinfo": "^11.3.2",
     "@react-native-firebase/app": "^19.3.0",
     "@react-native-firebase/messaging": "^19.3.0",
diff --git a/examples/SampleApp/yarn.lock b/examples/SampleApp/yarn.lock
@@ -1481,6 +1481,14 @@
     "@gorhom/portal" "1.0.14"
     invariant "^2.2.4"
 
+"@gorhom/bottom-sheet@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.0.6.tgz#f20736502399c7bcf8c73ea09e6b571dc07fe0eb"
+  integrity sha512-SI/AhPvgRfnCWN6/+wbE6TXwRE4X8F2fLyE4L/0bRwgE34Zenq585qLT139uEcfCIyovC2swC3ICqQpkmWEcFA==
+  dependencies:
+    "@gorhom/portal" "1.0.14"
+    invariant "^2.2.4"
+
 "@gorhom/portal@1.0.14":
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
@@ -1874,11 +1882,6 @@
   dependencies:
     merge-options "^3.0.4"
 
-"@react-native-camera-roll/camera-roll@^7.8.0":
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-7.8.1.tgz#3b37d498672f692d04daf8e56fa094cefdeadc30"
-  integrity sha512-voVmDlzBS1MVADFk/Vb9GzWzhpoF4ESSjU9qwDNxf/ZA9tirAzX/M0TKcz2V+iFHeRR68cHtZ9tHUhQVG7kJcA==
-
 "@react-native-community/cli-clean@15.0.0":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-15.0.0.tgz#10c7cfde8379aaa7a60eaf4bd3920542d4af1b81"
diff --git a/examples/TypeScriptMessaging/ios/Podfile.lock b/examples/TypeScriptMessaging/ios/Podfile.lock
@@ -2265,14 +2265,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 1dca942403ed9342f98334bf4c3621f011aa7946
-  DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
+  boost: 4cb898d0bf20404aab1850c656dcea009429d6c1
+  DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: 7075bb12898bc3998fd60f4b7ca422496cc2cdf7
-  fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
-  glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
+  fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
+  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   hermes-engine: 46f1ffbf0297f4298862068dd4c274d4ac17a1fd
   op-sqlite: 88dd68621bea1e7ea28606f76228a84a23d5ad58
-  RCT-Folly: bf5c0376ffe4dd2cf438dcf86db385df9fdce648
+  RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
   RCTDeprecation: fde92935b3caa6cb65cbff9fbb7d3a9867ffb259
   RCTRequired: 75c6cee42d21c1530a6f204ba32ff57335d19007
   RCTTypeSafety: 7e6fe47bfb693c50d4669db1a480ca5331795f5b
@@ -2349,4 +2349,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 6b7a4b74915b42bfe4ffddaf67cbf5e7a2bfeab3
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.14.3
diff --git a/examples/TypeScriptMessaging/yarn.lock b/examples/TypeScriptMessaging/yarn.lock
@@ -1134,6 +1134,14 @@
     "@gorhom/portal" "1.0.14"
     invariant "^2.2.4"
 
+"@gorhom/bottom-sheet@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.0.6.tgz#f20736502399c7bcf8c73ea09e6b571dc07fe0eb"
+  integrity sha512-SI/AhPvgRfnCWN6/+wbE6TXwRE4X8F2fLyE4L/0bRwgE34Zenq585qLT139uEcfCIyovC2swC3ICqQpkmWEcFA==
+  dependencies:
+    "@gorhom/portal" "1.0.14"
+    invariant "^2.2.4"
+
 "@gorhom/portal@1.0.14":
   version "1.0.14"
   resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
diff --git a/package/package.json b/package/package.json
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@gorhom/bottom-sheet": "^4.6.4",
+    "@gorhom/bottom-sheet": "^5.0.6",
     "dayjs": "1.10.5",
     "emoji-regex": "^10.3.0",
     "i18next": "^21.6.14",
@@ -83,8 +83,8 @@
     "@op-engineering/op-sqlite": ">=9.3.0",
     "@react-native-community/netinfo": ">=11.3.1",
     "react-native": ">=0.67.0",
-    "react-native-gesture-handler": ">=2.14.0",
-    "react-native-reanimated": ">=3.8.0",
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-reanimated": ">=3.16.0",
     "react-native-svg": ">=12.3.0"
   },
   "peerDependenciesMeta": {
diff --git a/package/src/components/AttachmentPicker/AttachmentPicker.tsx b/package/src/components/AttachmentPicker/AttachmentPicker.tsx
@@ -269,6 +269,7 @@ export const AttachmentPicker = React.forwardRef(
              */
             photoError ? null : AttachmentPickerBottomSheetHandle
           }
+          // @ts-ignore
           handleHeight={handleHeight}
           index={-1}
           onChange={setCurrentIndex}
diff --git a/package/src/components/ChannelList/Skeleton.tsx b/package/src/components/ChannelList/Skeleton.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import Animated, {
   Easing,
+  useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -114,6 +115,13 @@ export const Skeleton = () => {
     } a${boneRadius} ${boneRadius} 0 1 0 0 -${boneHeight}z`;
   }, []);
 
+  const svgAnimatedProps = useAnimatedProps(
+    () => ({
+      d: d.value,
+    }),
+    [d],
+  );
+
   return (
     <View
       style={[styles.container, { borderBottomColor: border }, container]}
@@ -140,7 +148,7 @@ export const Skeleton = () => {
         </Svg>
       </Animated.View>
       <Svg height={height} width={width}>
-        <Path d={d.value} fill={maskFillColor || white_snow} />
+        <Path {...svgAnimatedProps} fill={maskFillColor || white_snow} />
       </Svg>
     </View>
   );
diff --git a/package/src/components/ImageGallery/ImageGallery.tsx b/package/src/components/ImageGallery/ImageGallery.tsx
@@ -610,6 +610,7 @@ export const ImageGallery = <
               {...imageGalleryCustomComponents?.gridHandle}
             />
           )}
+          // @ts-ignore
           handleHeight={imageGalleryGridHandleHeight}
           index={0}
           onChange={(index: number) => setCurrentBottomSheetIndex(index)}
diff --git a/package/yarn.lock b/package/yarn.lock
@@ -2126,10 +2126,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@gorhom/bottom-sheet@^4.6.4":
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.4.tgz#387d0f0f21e3470eb8575498cb81ce96f5108e79"
-  integrity sha512-0itLMblLBvepE065w3a60S030c2rNUsGshPC7wbWDm31VyqoaU2xjzh/ojH62YIJOcobBr5QoC30IxBBKDGovQ==
+"@gorhom/bottom-sheet@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-5.0.6.tgz#f20736502399c7bcf8c73ea09e6b571dc07fe0eb"
+  integrity sha512-SI/AhPvgRfnCWN6/+wbE6TXwRE4X8F2fLyE4L/0bRwgE34Zenq585qLT139uEcfCIyovC2swC3ICqQpkmWEcFA==
   dependencies:
     "@gorhom/portal" "1.0.14"
     invariant "^2.2.4"

Original file line number	Diff line number	Diff line change
`@@ -269,6 +269,7 @@ export const AttachmentPicker = React.forwardRef(`
`269`	`269`	`*/`
`270`	`270`	`photoError ? null : AttachmentPickerBottomSheetHandle`
`271`	`271`	`}`
	`272`	`+ // @ts-ignore`
`272`	`273`	`handleHeight={handleHeight}`
`273`	`274`	`index={-1}`
`274`	`275`	`onChange={setCurrentIndex}`