@solucx/react-native-solucx-widget 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solucx/react-native-solucx-widget",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "The React Native SDK for Solucx Widget",
   "main": "src/index",
   "author": " <> ()",
@@ -14,10 +14,10 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": "^2.2.0",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
-    "react-native-webview": "^13.16.0",
-    "react-native-safe-area-context": "^5.6.1"
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "react-native-reanimated": "^3.17.4",
+    "react-native-webview": "^13.16.0"
   }
-}
+}

package/src/SoluCXWidget.tsx

@@ -83,6 +83,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
                     source={{ uri }}
                     onLoadEnd={handleWebViewLoad}
                     onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
+                    originWhitelist={['*']}
                 />
             </ModalWidget>
         );
@@ -97,6 +98,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
                     source={{ uri }}
                     onLoadEnd={handleWebViewLoad}
                     onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
+                    originWhitelist={['*']}
                 />
             </InlineWidget>
         );
@@ -110,6 +112,7 @@ export const SoluCXWidget: React.FC<SoluCXWidgetProps> = ({
                 source={{ uri }}
                 onLoadEnd={handleWebViewLoad}
                 onMessage={(event) => handleWebViewMessage(event.nativeEvent.data)}
+                originWhitelist={['*']}
             />
         </OverlayWidget>
     );

package/src/components/InlineWidget.tsx

@@ -1,9 +1,8 @@
 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';
-import { useHeightAnimation } from '../hooks/useHeightAnimation';
+import Animated from 'react-native-reanimated';
 
 interface InlineWidgetProps {
     visible: boolean;
@@ -12,12 +11,7 @@ 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(() => {
@@ -26,10 +20,12 @@ export const InlineWidget: React.FC<InlineWidgetProps> = ({
 
     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, Animated } from 'react-native';
-import { styles, getWidgetVisibility } from '../styles/widgetStyles';
+import { Modal, SafeAreaView, View } from 'react-native';
+import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
 import { CloseButton } from './CloseButton';
-import { useHeightAnimation } from '../hooks/useHeightAnimation';
+import Animated from 'react-native-reanimated';
 
 interface ModalWidgetProps {
     visible: boolean;
@@ -11,12 +11,7 @@ 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);
@@ -27,20 +22,9 @@ export const ModalWidget: React.FC<ModalWidgetProps> = ({
 
     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, Animated } from 'react-native';
+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 { useHeightAnimation } from '../hooks/useHeightAnimation';
+import Animated from 'react-native-reanimated';
 
 interface OverlayWidgetProps {
     visible: boolean;
@@ -23,8 +23,7 @@ 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);
@@ -42,8 +41,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,
@@ -56,20 +55,14 @@ 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/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: {

package/src/hooks/useHeightAnimation.ts

@@ -1,22 +0,0 @@
-// 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 };
-}