From f8e766fd573dbafb07c5bebf0f2410e72cdaa09d Mon Sep 17 00:00:00 2001
From: Mashaim Tahir <57322309+mashaimtahir@users.noreply.github.com>
Date: Thu, 10 Apr 2025 02:08:34 +0500
Subject: [PATCH 1/2] Issue resolved: Style property 'height' is not supported
 by native animated module

Issue resolved: Style property 'height' is not supported by native animated module

This issue is caused by using native driver true with height animation. And nativeDriver only only allows opacity and transform styling for animation.
---
 src/index.js | 50 +++++++++++++++++++++++++-------------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/index.js b/src/index.js
index 912a18f..f180bb2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,6 +8,7 @@ import {
   KeyboardAvoidingView,
   Platform,
   View,
+  StyleSheet,
 } from 'react-native';
 import styles from './style';
 
@@ -35,8 +36,8 @@ const RBSheet = forwardRef((props, ref) => {
   const [modalVisible, setModalVisible] = useState(false);
 
   // Using useRef hook to reference animated values
-  const animatedHeight = useRef(new Animated.Value(0)).current;
-  const pan = useRef(new Animated.ValueXY()).current;
+  const translateY = useRef(new Animated.Value(height)).current;
+  const panY = useRef(new Animated.Value(0)).current;
 
   // Exposing component methods to parent via useImperativeHandle hook
   useImperativeHandle(ref, () => ({
@@ -56,11 +57,7 @@ const RBSheet = forwardRef((props, ref) => {
 
       // Update pan.y value on vertical move if gestureState.dy is positive
       onPanResponderMove: (e, gestureState) => {
-        gestureState.dy > 0 &&
-          Animated.event([null, {dy: pan.y}], {useNativeDriver})(
-            e,
-            gestureState,
-          );
+        gestureState.dy > 0 && panY.setValue(gestureState.dy);
       },
 
       // Handle when the user has released the touche
@@ -70,8 +67,8 @@ const RBSheet = forwardRef((props, ref) => {
           handleSetVisible(false);
         } else {
           // Reset pan to original position on release
-          Animated.spring(pan, {
-            toValue: {x: 0, y: 0},
+          Animated.spring(panY, {
+            toValue: 0,
             useNativeDriver,
           }).start();
         }
@@ -85,28 +82,27 @@ const RBSheet = forwardRef((props, ref) => {
   // Function to handle the visibility of the modal
   const handleSetVisible = visible => {
     if (visible) {
-      setModalVisible(visible);
-      // Call onOpen callback if provided
+      // panY.setValue(0); // reset drag first
+      translateY.setValue(height); // start hidden
+      setModalVisible(true);
       if (typeof onOpen === 'function') {
         onOpen();
       }
-      // Animate height on open
-      Animated.timing(animatedHeight, {
-        useNativeDriver,
-        toValue: height,
+
+      Animated.timing(translateY, {
+        useNativeDriver: true,
+        toValue: 0,
         duration: openDuration,
       }).start();
     } else {
-      // Animate height on close
-      Animated.timing(animatedHeight, {
-        useNativeDriver,
-        toValue: 0,
+      Animated.timing(translateY, {
+        useNativeDriver: true,
+        toValue: height,
         duration: closeDuration,
       }).start(() => {
-        setModalVisible(visible);
-        // Reset pan value
-        pan.setValue({x: 0, y: 0});
-        // Call onClose callback if provided
+        translateY.setValue(height); // reset for next open
+        // panY.setValue(0); // reset drag too
+        setModalVisible(false);
         if (typeof onClose === 'function') {
           onClose();
         }
@@ -138,8 +134,12 @@ const RBSheet = forwardRef((props, ref) => {
           {...(dragOnContent && panResponder.panHandlers)} // Attach pan handlers to content if dragOnContent is true
           style={[
             styles.container,
-            {transform: pan.getTranslateTransform()},
-            {height: animatedHeight},
+            {transform: [{translateY: translateY}, {translateY: panY}], height},
+            // {
+            //   transform: [
+            //     {translateY: Animated.subtract(translateY, panY)}, // Combine open animation and drag gesture
+            //   ],
+            // },
             customStyles.container,
           ]}>
           {draggable && ( // Show draggable icon if set it to true

From 93253607c3ca1f9797765222592f53fc4812ef7f Mon Sep 17 00:00:00 2001
From: Mashaim Tahir <57322309+mashaimtahir@users.noreply.github.com>
Date: Thu, 10 Apr 2025 02:20:37 +0500
Subject: [PATCH 2/2] Issue resolved: Style property 'height' is not supported
 by native animated module

Issue resolved: Style property 'height' is not supported by native animated module

This issue is caused by using native driver true with height animation. And nativeDriver only only allows opacity and transform styling for animation.
---
 src/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index f180bb2..dbc985e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -82,7 +82,7 @@ const RBSheet = forwardRef((props, ref) => {
   // Function to handle the visibility of the modal
   const handleSetVisible = visible => {
     if (visible) {
-      // panY.setValue(0); // reset drag first
+      panY.setValue(0); // reset drag first
       translateY.setValue(height); // start hidden
       setModalVisible(true);
       if (typeof onOpen === 'function') {
@@ -101,7 +101,7 @@ const RBSheet = forwardRef((props, ref) => {
         duration: closeDuration,
       }).start(() => {
         translateY.setValue(height); // reset for next open
-        // panY.setValue(0); // reset drag too
+        panY.setValue(0); // reset drag too
         setModalVisible(false);
         if (typeof onClose === 'function') {
           onClose();