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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +4 -4
  2. package/src/components/InlineWidget.tsx +12 -8
  3. package/src/components/ModalWidget.tsx +22 -6
  4. package/src/components/OverlayWidget.tsx +15 -8
  5. package/src/hooks/useHeightAnimation.ts +22 -0
  6. package/src/styles/widgetStyles.ts +0 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solucx/react-native-solucx-widget",
3
- "version": "0.1.11",
3
+ "version": "0.1.13",
4
4
  "description": "The React Native SDK for Solucx Widget",
5
5
  "main": "src/index",
6
6
  "author": " <> ()",
@@ -14,10 +14,10 @@
14
14
  "README.md"
15
15
  ],
16
16
  "peerDependencies": {
17
+ "@react-native-async-storage/async-storage": "^2.2.0",
17
18
  "react": ">=18.0.0",
18
19
  "react-native": ">=0.72.0",
19
- "@react-native-async-storage/async-storage": "^2.2.0",
20
- "react-native-reanimated": "^3.17.4",
21
- "react-native-webview": "^13.16.0"
20
+ "react-native-webview": "^13.16.0",
21
+ "react-native-safe-area-context": "^5.6.1"
22
22
  }
23
23
  }
package/src/components/InlineWidget.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { View } from 'react-native';
3
- import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
3
+ import { styles, getWidgetVisibility } from '../styles/widgetStyles';
4
4
  import { CloseButton } from './CloseButton';
5
- import Animated from 'react-native-reanimated';
5
+ import { Animated } from 'react-native';
6
+ import { useHeightAnimation } from '../hooks/useHeightAnimation';
6
7
 
7
8
  interface InlineWidgetProps {
8
9
  visible: boolean;
@@ -11,7 +12,12 @@ interface InlineWidgetProps {
11
12
  onClose?: () => void;
12
13
  }
13
14
 
14
- export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, children, onClose }) => {
15
+ export const InlineWidget: React.FC<InlineWidgetProps> = ({
16
+ visible,
17
+ height,
18
+ children,
19
+ onClose,
20
+ }) => {
15
21
  const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
16
22
 
17
23
  useEffect(() => {
@@ -20,12 +26,10 @@ export const InlineWidget: React.FC<InlineWidgetProps> = ({ visible, height, chi
20
26
 
21
27
  return (
22
28
  <View style={[styles.inlineWrapper, getWidgetVisibility(visible)]}>
23
- <Animated.View style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
29
+ <Animated.View
30
+ style={[styles.inline, animatedHeightStyle, getWidgetVisibility(visible)]}>
24
31
  {children}
25
- <CloseButton
26
- visible={visible}
27
- onPress={onClose || (() => { })}
28
- />
32
+ <CloseButton visible={visible} onPress={onClose || (() => { })} />
29
33
  </Animated.View>
30
34
  </View>
31
35
  );
package/src/components/ModalWidget.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useState, useEffect } from 'react';
2
- import { Modal, SafeAreaView, View } from 'react-native';
3
- import { styles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
2
+ import { Modal, SafeAreaView, View, Animated } from 'react-native';
3
+ import { styles, getWidgetVisibility } from '../styles/widgetStyles';
4
4
  import { CloseButton } from './CloseButton';
5
- import Animated from 'react-native-reanimated';
5
+ import { useHeightAnimation } from '../hooks/useHeightAnimation';
6
6
 
7
7
  interface ModalWidgetProps {
8
8
  visible: boolean;
@@ -11,7 +11,12 @@ interface ModalWidgetProps {
11
11
  onClose?: () => void;
12
12
  }
13
13
 
14
- export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, children, onClose }) => {
14
+ export const ModalWidget: React.FC<ModalWidgetProps> = ({
15
+ visible,
16
+ height,
17
+ children,
18
+ onClose,
19
+ }) => {
15
20
  const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
16
21
 
17
22
  const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
@@ -22,9 +27,20 @@ export const ModalWidget: React.FC<ModalWidgetProps> = ({ visible, height, child
22
27
 
23
28
  return (
24
29
  <SafeAreaView>
25
- <Modal transparent visible={isWidgetVisible} animationType="slide" hardwareAccelerated>
30
+ <Modal
31
+ transparent
32
+ visible={isWidgetVisible}
33
+ animationType="slide"
34
+ hardwareAccelerated
35
+ >
26
36
  <View style={[styles.modalOverlay, getWidgetVisibility(visible)]}>
27
- <Animated.View style={[styles.modalContent, getWidgetVisibility(visible), animatedHeightStyle]}>
37
+ <Animated.View
38
+ style={[
39
+ styles.modalContent,
40
+ getWidgetVisibility(visible),
41
+ animatedHeightStyle,
42
+ ]}
43
+ >
28
44
  {children}
29
45
  <CloseButton
30
46
  visible={visible}
package/src/components/OverlayWidget.tsx CHANGED
@@ -1,10 +1,10 @@
1
1
  import React, { useState, useEffect } from 'react';
2
- import { View, ViewStyle } from 'react-native';
2
+ import { View, ViewStyle, Animated } from 'react-native';
3
3
  import { initialWindowMetrics } from 'react-native-safe-area-context';
4
- import { getWidgetStyles, getWidgetVisibility, useHeightAnimation } from '../styles/widgetStyles';
4
+ import { getWidgetStyles, getWidgetVisibility } from '../styles/widgetStyles';
5
5
  import { FIXED_Z_INDEX } from '../constants/webViewConstants';
6
6
  import { CloseButton } from './CloseButton';
7
- import Animated from 'react-native-reanimated';
7
+ import { useHeightAnimation } from '../hooks/useHeightAnimation';
8
8
 
9
9
  interface OverlayWidgetProps {
10
10
  visible: boolean;
@@ -23,7 +23,8 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
23
23
  children,
24
24
  onClose,
25
25
  }) => {
26
- const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
26
+ const insets =
27
+ initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
27
28
  const [isWidgetVisible, setIsWidgetVisible] = useState<boolean>(true);
28
29
 
29
30
  const { animatedHeightStyle, updateHeight } = useHeightAnimation(height);
@@ -41,8 +42,8 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
41
42
  width: '100%',
42
43
  height: '100%',
43
44
  zIndex: FIXED_Z_INDEX,
44
- pointerEvents: 'box-none'
45
- }
45
+ pointerEvents: 'box-none',
46
+ };
46
47
 
47
48
  const contentStyle = [
48
49
  getWidgetStyles(position).content,
@@ -55,14 +56,20 @@ export const OverlayWidget: React.FC<OverlayWidgetProps> = ({
55
56
  ...(position === 'bottom' && {
56
57
  bottom: insets.bottom,
57
58
  }),
58
- }
59
+ },
59
60
  ];
60
61
 
61
62
  return (
62
63
  <>
63
64
  {isWidgetVisible && (
64
65
  <View style={[containerStyle, getWidgetVisibility(visible)]}>
65
- <Animated.View style={[contentStyle, animatedHeightStyle, getWidgetVisibility(visible)]}>
66
+ <Animated.View
67
+ style={[
68
+ contentStyle,
69
+ animatedHeightStyle,
70
+ getWidgetVisibility(visible),
71
+ ]}
72
+ >
66
73
  {children}
67
74
  <CloseButton
68
75
  visible={visible}
package/src/hooks/useHeightAnimation.ts ADDED
@@ -0,0 +1,22 @@
1
+ // hooks/useHeightAnimation.ts
2
+ import { useRef, useCallback } from 'react';
3
+ import { Animated } from 'react-native';
4
+
5
+ export function useHeightAnimation(initialHeight = 0, duration = 300) {
6
+ const height = useRef(new Animated.Value(initialHeight)).current;
7
+
8
+ const updateHeight = useCallback(
9
+ (toValue: number) => {
10
+ Animated.timing(height, {
11
+ toValue,
12
+ duration,
13
+ useNativeDriver: false,
14
+ }).start();
15
+ },
16
+ [height, duration],
17
+ );
18
+
19
+ const animatedHeightStyle = { height };
20
+
21
+ return { animatedHeightStyle, updateHeight, height };
22
+ }
package/src/styles/widgetStyles.ts CHANGED
@@ -1,30 +1,5 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
  import { WidgetType } from '../interfaces';
3
- import {
4
- useSharedValue,
5
- withTiming,
6
- useAnimatedStyle,
7
- Easing,
8
- } from 'react-native-reanimated';
9
-
10
- export const useHeightAnimation = (height: number) => {
11
- const animatedHeight = useSharedValue(height);
12
-
13
- const animatedHeightStyle = useAnimatedStyle(() => {
14
- return {
15
- height: animatedHeight.value,
16
- };
17
- });
18
-
19
- const updateHeight = (newHeight: number) => {
20
- animatedHeight.value = withTiming(newHeight, {
21
- duration: 300,
22
- easing: Easing.bezier(0.25, 0.1, 0.25, 1),
23
- });
24
- };
25
-
26
- return { animatedHeightStyle, updateHeight };
27
- };
28
3
 
29
4
  export const styles = StyleSheet.create({
30
5
  wrapper: {