ammarahm-ed / react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
https://rnas.vercel.app
MIT License
1.42k stars 119 forks source link

[web] expo sdk >47 setNativeProps fix #310

Closed LinoIten closed 5 months ago

LinoIten commented 11 months ago

i ran into a problem with expo sdk 49 and exporting to web and just wanted to share the fix for the deprecated setNativeProps implementation. this is my patch from patch-package:

diff --git a/node_modules/react-native-actions-sheet/dist/src/index.js b/node_modules/react-native-actions-sheet/dist/src/index.js
index 064a25f..d403411 100644
--- a/node_modules/react-native-actions-sheet/dist/src/index.js
+++ b/node_modules/react-native-actions-sheet/dist/src/index.js
@@ -843,11 +843,11 @@ export default forwardRef(function ActionSheet(_a, ref) {
             windowDimensions.width < windowDimensions.height;
         if (orientationChanged)
             isOrientationChanging.current = true;
-        (_a = deviceContainerRef.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({
-            style: {
-                height: Dimensions.get('screen').height - safeMarginFromTop
-            }
+        
+        (_a = deviceContainerRef.current) === null || _a === void 0 ? void 0 : setDimensions({
+            height: Dimensions.get('screen').height - safeMarginFromTop
         });
+        
         setDimensions(function (dim) {
             return __assign(__assign({}, dim), { height: height, portrait: windowDimensions.width < windowDimensions.height });
         });
vinodsptharsha commented 10 months ago

How to use this patch file? I know how to create a patch file from the changes made to the package. Please help.

Is this package actively maintained? Or is better to get replaced with https://gorhom.github.io/react-native-bottom-sheet/ ?

LinoIten commented 10 months ago

How to use this patch file? I know how to create a patch file from the changes made to the package. Please help.

Is this package actively maintained? Or is better to get replaced with https://gorhom.github.io/react-native-bottom-sheet/ ?

check out https://www.npmjs.com/package/patch-package

In package.json "scripts": {

Then npm i patch-package

David-Flurin commented 8 months ago

Thanks @LinoIten for the patch. However for me it broke things on iOS, so I had to tweak it a little bit. If somebody else has the same problem, here it is:

index dc6f63e..31b2e77 100644
--- a/node_modules/react-native-actions-sheet/dist/src/index.js
+++ b/node_modules/react-native-actions-sheet/dist/src/index.js
@@ -849,16 +849,14 @@ export default forwardRef(function ActionSheet(_a, ref) {
         var height = windowDimensions.height - safeMarginFromTop;
         var orientationChanged = dimensions.portrait !==
             windowDimensions.width < windowDimensions.height;
-        if (orientationChanged)
-            isOrientationChanging.current = true;
-        (_a = deviceContainerRef.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({
-            style: {
-                height: Dimensions.get('screen').height - safeMarginFromTop
-            }
+        if (orientationChanged) isOrientationChanging.current = true;
+        (_a = deviceContainerRef.current) === null || _a === void 0 ? void 0 : setDimensions(function (dim) {
+            return __assign(__assign({}, dim), { height: Dimensions.get('screen').height - safeMarginFromTop});
         });
+                      
         setDimensions(function (dim) {
             return __assign(__assign({}, dim), { height: height, portrait: windowDimensions.width < windowDimensions.height });
-        });
+                         });
         actionSheetHeight.current =
             event.nativeEvent.layout.height > height
                 ? height
johnny-mcfadden-dailypay commented 8 months ago

@ammarahm-ed verified this patch myself too and it works, is there any way we can get this added to support expo 49 router web builds?