@solucx/react-native-solucx-widget 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
@@ -12,7 +12,8 @@
   ],
   "dependencies": {
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "react-native-webview": "^13.16.0"
+    "react-native-webview": "^13.16.0",
+    "react-native-reanimated": "~3.17.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/SoluCXWidget.tsx

@@ -76,7 +76,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
 
     if (type === 'modal') {
         return (
-            <ModalWidget visible={isWidgetVisible} onClose={handleClose}>
+            <ModalWidget visible={isWidgetVisible} height={widgetHeight} onClose={handleClose}>
                 <WebView
                     ref={webviewRef}
                     style={webViewStyle}

package/src/components/InlineWidget.tsx

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

package/src/components/ModalWidget.tsx

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

package/src/components/OverlayWidget.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
-import { View, ViewStyle, Modal, SafeAreaView } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, ViewStyle } from 'react-native';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
+import { getWidgetStyles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
 import { FIXED_Z_INDEX } from '../constants/webViewConstants';
 import { CloseButton } from './CloseButton';
+import Animated from 'react-native-reanimated';
 
 interface OverlayWidgetProps {
     visible: boolean;
@@ -14,10 +15,23 @@ interface OverlayWidgetProps {
     onClose?: () => void;
 }
 
-export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, height, position, children, onClose }) => {
+export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
+    visible,
+    width,
+    height,
+    position,
+    children,
+    onClose,
+}) => {
     const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
     const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
 
+    const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
+
+    useEffect(() => {
+        updateHeight(height);
+    }, [height, updateHeight]);
+
     const containerStyle: ViewStyle = {
         position: 'absolute',
         top: 0,
@@ -27,14 +41,14 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, he
         width: '100%',
         height: '100%',
         zIndex: FIXED_Z_INDEX,
-        backgroundColor: 'transparent',
+        pointerEvents: 'box-none'
     }
 
     const contentStyle = [
         getWidgetStyles(position).content,
         {
             width,
-            height,
+            pointerEvents: 'auto' as const,
             ...(position === 'top' && {
                 top: insets.top,
             }),
@@ -45,15 +59,10 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, he
     ];
 
     return (
-        <SafeAreaView>
-            <Modal
-                transparent
-                visible={isWidgetVisible}
-                animationType="fade"
-                hardwareAccelerated
-            >
+        <>
+            {isWidgetVisible && (
                 <View style={[containerStyle, getWidgetVisibility(visible)]}>
-                    <View style={[contentStyle, getWidgetVisibility(visible)]}>
+                    <Animated.View style={[contentStyle, animatedHeightStyle, getWidgetVisibility(visible)]}>
                         {children}
                         <CloseButton
                             visible={visible}
@@ -64,9 +73,9 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({ visible, width, he
                                 }
                             }}
                         />
-                    </View>
+                    </Animated.View>
                 </View>
-            </Modal>
-        </SafeAreaView>
+            )}
+        </>
     );
 };

package/src/styles/widgetStyles.ts

@@ -1,5 +1,30 @@
 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: {
@@ -36,7 +61,6 @@ export const styles = StyleSheet.create({
     modalContent: {
         backgroundColor: 'white',
         borderRadius: 10,
-        maxHeight: '60%',
     },
 });