@solucx/react-native-solucx-widget 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
@@ -17,7 +17,6 @@
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "react-native-reanimated": "^3.17.4",
     "react-native-webview": "^13.16.0"
   }
 }

package/src/components/InlineWidget.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
-import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
 
 interface InlineWidgetProps {
     visible: boolean;
@@ -11,7 +12,12 @@ interface InlineWidgetProps {
     onClose?: () => void;
 }
 
-export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, children, onClose }) => {
+export const InlineWidget: React.FC<InlineWidgetProps> = ({
+    visible,
+    height,
+    children,
+    onClose,
+}) => {
     const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
 
     useEffect(() => {
@@ -20,12 +26,10 @@ export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, chi
 
     return (
         <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
-            <Animated.View style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
+            <Animated.View
+                style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
                 {children}
-                <CloseButton
-                    visible={visible}
-                    onPress={onClose || (() => { })}
-                />
+                <CloseButton visible={visible} onPress={onClose || (() => { })} />
             </Animated.View>
         </View>
     );

package/src/components/ModalWidget.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { Modal, SafeAreaView, View } from 'react-native';
-import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
+import { Modal, SafeAreaView, View, Animated } from 'react-native';
+import { styles, getWidgetVisibility } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
 
 interface ModalWidgetProps {
     visible: boolean;
@@ -11,7 +11,12 @@ interface ModalWidgetProps {
     onClose?: () => void;
 }
 
-export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, children, onClose }) => {
+export const ModalWidget: React.FC<ModalWidgetProps> = ({
+    visible,
+    height,
+    children,
+    onClose,
+}) => {
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
     const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
@@ -22,9 +27,20 @@ export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, child
 
     return (
         <SafeAreaView>
-            <Modal transparent visible={isWidgetVisible} animationType="slide" hardwareAccelerated>
+            <Modal
+                transparent
+                visible={isWidgetVisible}
+                animationType="slide"
+                hardwareAccelerated
+            >
                 <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
-                    <Animated.View style={[styles.modalContent, getWidgetVisibility(visible), animatedHeightStyle]}>
+                    <Animated.View
+                        style={[
+                            styles.modalContent,
+                            getWidgetVisibility(visible),
+                            animatedHeightStyle,
+                        ]}
+                    >
                         {children}
                         <CloseButton
                             visible={visible}

package/src/components/OverlayWidget.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { View, ViewStyle } from 'react-native';
+import { View, ViewStyle, Animated } from 'react-native';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { getWidgetStyles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
+import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
 import { FIXED_Z_INDEX } from '../constants/webViewConstants';
 import { CloseButton } from './CloseButton';
-import Animated from 'react-native-reanimated';
+import { useHeightAnimation } from '../hooks/useHeightAnimation';
 
 interface OverlayWidgetProps {
     visible: boolean;
@@ -23,7 +23,8 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
     children,
     onClose,
 }) => {
-    const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+    const insets =
+        initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
     const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
@@ -41,8 +42,8 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
         width: '100%',
         height: '100%',
         zIndex: FIXED_Z_INDEX,
-        pointerEvents: 'box-none'
-    }
+        pointerEvents: 'box-none',
+    };
 
     const contentStyle = [
         getWidgetStyles(position).content,
@@ -55,14 +56,20 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
             ...(position === 'bottom' && {
                 bottom: insets.bottom,
             }),
-        }
+        },
     ];
 
     return (
         <>
             {isWidgetVisible && (
                 <View style={[containerStyle, getWidgetVisibility(visible)]}>
-                    <Animated.View style={[contentStyle, animatedHeightStyle, getWidgetVisibility(visible)]}>
+                    <Animated.View
+                        style={[
+                            contentStyle,
+                            animatedHeightStyle,
+                            getWidgetVisibility(visible),
+                        ]}
+                    >
                         {children}
                         <CloseButton
                             visible={visible}

package/src/hooks/useHeightAnimation.ts

@@ -0,0 +1,22 @@
+// hooks/useHeightAnimation.ts
+import { useRef, useCallback } from 'react';
+import { Animated } from 'react-native';
+
+export function useHeightAnimation(initialHeight = 0, duration = 300) {
+    const height = useRef(new Animated.Value(initialHeight)).current;
+
+    const updateHeight = useCallback(
+        (toValue: number) => {
+            Animated.timing(height, {
+                toValue,
+                duration,
+                useNativeDriver: false,
+            }).start();
+        },
+        [height, duration],
+    );
+
+    const animatedHeightStyle = { height };
+
+    return { animatedHeightStyle, updateHeight, height };
+}

package/src/styles/widgetStyles.ts

@@ -1,30 +1,5 @@
 import { StyleSheet } from 'react-native';
 import { WidgetType } from '../interfaces';
-import {
-    useSharedValue,
-    withTiming,
-    useAnimatedStyle,
-    Easing,
-} from 'react-native-reanimated';
-
-export const useHeightAnimation = (height: number) => {
-    const animatedHeight = useSharedValue(height);
-
-    const animatedHeightStyle = useAnimatedStyle(() => {
-        return {
-            height: animatedHeight.value,
-        };
-    });
-
-    const updateHeight = (newHeight: number) => {
-        animatedHeight.value = withTiming(newHeight, {
-            duration: 300,
-            easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-        });
-    };
-
-    return { animatedHeightStyle, updateHeight };
-};
 
 export const styles = StyleSheet.create({
     wrapper: {