@nexara/nativeflow 0.1.1 → 0.1.2

package/src/components/CheckBox/CheckBox.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { StyleSheet, TouchableWithoutFeedback } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { StyleSheet, TouchableWithoutFeedback, Animated, type ViewStyle } from "react-native";
 import { StyledText, StyledView } from "../StyledComponents";
-import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
 import { useTheme } from "../../hooks";
 import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
 import { Check } from "../../assets/svg";
@@ -33,36 +32,33 @@ const CheckBox: React.FC<CheckBoxProps> = ({
         setIsCheckboxChecked(defaultValue);
     }, [defaultValue]);
 
-    const scaleVal = useSharedValue(1);
+    const scaleVal = useRef(new Animated.Value(1)).current;
     const { colors }: any = useTheme();
     activeBgColor = disabled ? colors.disable : activeBgColor ?? colors.primary;
     iconSize = iconSize ?? size / 1.5;
     const bgColor = (!disableBuiltInState && isCheckboxChecked) || (disableBuiltInState && isChecked) ? activeBgColor : inActiveBgColor;
+    const textColor = disabled ? colors.textDisable : colors.textPrimary;
 
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            flexDirection: 'row',
-            gap: horizontalScale(10),
-            alignItems: 'center',
-            alignSelf: 'flex-start',
-        },
-        CHECKBOX_PARENT_CONT: {
-            height: verticalScale(size),
-            width: verticalScale(size),
-            borderWidth: 0.8,
-            borderColor: disabled ? colors.disable : activeBgColor,
-            alignItems: 'center',
-            justifyContent: 'center',
-            borderRadius: variant === 'square' ? 5 : verticalScale(size),
-            padding: verticalScale(7),
-            backgroundColor: bgColor,
-        }
-    });
+    const dynamicMainContStyles: ViewStyle = {
+        height: verticalScale(size),
+        width: verticalScale(size),
+        borderColor: disabled ? colors.disable : activeBgColor,
+        borderRadius: variant === 'square' ? 5 : verticalScale(size),
+        backgroundColor: bgColor
+    };
 
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: scaleVal.value }]
-    }));
+    const animatedStyle = {
+        transform: [{ scale: scaleVal }]
+    };
 
+    const animateScale = (toValue: number) => {
+        Animated.spring(scaleVal, {
+            toValue,
+            speed: 20,
+            bounciness: 8,
+            useNativeDriver: true,
+        }).start();
+    };
     const onUserClick = () => {
         if (!disableBuiltInState) {
             onPress?.(!isCheckboxChecked);
@@ -71,32 +67,48 @@ const CheckBox: React.FC<CheckBoxProps> = ({
             onPress?.(!isChecked);
         }
     };
-    return (<>
-        <TouchableWithoutFeedback
-            onPressIn={() => scaleVal.value = withSpring(0.8)}
-            onPressOut={() => scaleVal.value = withSpring(1)}
-            onPress={onUserClick}
-            disabled={disabled}
-        >
-            <StyledView style={[STYLES.CONTAINER, containerStyle]}>
+    return (
+        <StyledView>
+            <TouchableWithoutFeedback
+                onPressIn={() => animateScale(0.8)}
+                onPressOut={() => animateScale(1)}
+                onPress={onUserClick}
+                disabled={disabled}
+            >
+                <StyledView style={[STYLES.CONTAINER, containerStyle]}>
 
-                <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, checkBoxStyle, animatedStyle]}>
+                    <Animated.View style={[STYLES.CHECKBOX_PARENT_CONT, dynamicMainContStyles, checkBoxStyle, animatedStyle]}>
+                        {
+                            (disableBuiltInState ? isChecked : isCheckboxChecked) &&
+                            <Check
+                                color={iconColor ?? colors.iconSecondary}
+                                size={verticalScale(iconSize)}
+                            />
+                        }
+                    </Animated.View>
                     {
-                        (disableBuiltInState ? isChecked : isCheckboxChecked) &&
-                        <Check
-                            color={iconColor ?? colors.iconSecondary}
-                            size={verticalScale(iconSize)}
-                        />
+                        text &&
+                        <StyledText style={textStyle} fs={fs} color={textColor} variant={textVariant} primary>{text}</StyledText>
                     }
-                </Animated.View>
-                {
-                    text &&
-                    <StyledText style={textStyle} fs={fs} variant={textVariant} primary>{text}</StyledText>
-                }
 
-            </StyledView>
-        </TouchableWithoutFeedback>
-    </>)
+                </StyledView>
+            </TouchableWithoutFeedback>
+        </StyledView>
+    )
 }
 export default CheckBox;
-export type { CheckBoxProps };
+export type { CheckBoxProps };
+
+const STYLES = StyleSheet.create({
+    CONTAINER: {
+        flexDirection: 'row',
+        gap: horizontalScale(10),
+        alignItems: 'center',
+    },
+    CHECKBOX_PARENT_CONT: {
+        borderWidth: 0.8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: verticalScale(7)
+    }
+});

package/src/components/Dialog/Dialog.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import React, { cloneElement, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { ReactElement } from "react";
-import { Keyboard, BackHandler } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring } from 'react-native-reanimated';
+import { Keyboard, BackHandler, StyleSheet, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
 import { dialogSizes } from '../../constants';
 import Portal from '../Portal/Portal';
 import type { DialogProps, DialogRefProps } from '../../types';
@@ -9,36 +9,35 @@ import type { DialogProps, DialogRefProps } from '../../types';
 
 const Dialog = forwardRef<DialogRefProps, DialogProps>(({
     variant = 'default',
-    // isVisible = false,
     size = 'lg',
     fullScreen,
     backdropColor = 'rgba(0, 0, 0, 0.5)',
-    animationDuration = 800,
+    // animationDuration = 800,
     onClose,
     children,
 }, ref) => {
 
     const [dialogVisible, setDialogVisible] = useState(false);
-    const scale = useSharedValue(0.8);
-    const opacity = useSharedValue(0);
+    const scale = useRef(new Animated.Value(0.9)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
 
     useEffect(() => {
-        opacity.value = withTiming(dialogVisible ? 1 : 0);
-        scale.value = withSpring(dialogVisible ? 1 : 0.8,
-            {
-                duration: animationDuration,
-                dampingRatio: 0.6,
-                stiffness: 36,
-                overshootClamping: false,
-                restDisplacementThreshold: 0.01,
-                restSpeedThreshold: 0.01,
-            }
-        );
+        Animated.timing(opacity, {
+            toValue: dialogVisible ? 1 : 0,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+        Animated.spring(scale, {
+            toValue: dialogVisible ? 1 : 0.9,
+            damping: 10,
+            stiffness: 90,
+            useNativeDriver: true,
+        }).start();
     }, [dialogVisible]);
 
     useEffect(() => {
-        BackHandler.addEventListener('hardwareBackPress', hardwareBackPress)
-        return () => BackHandler.removeEventListener('hardwareBackPress', hardwareBackPress);
+        const handler = BackHandler.addEventListener('hardwareBackPress', hardwareBackPress);
+        return () => handler.remove();
     }, [dialogVisible]);
 
     const hardwareBackPress = () => {
@@ -51,34 +50,20 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
         close: () => setDialogVisible(false)
     }));
 
-    const backdropAnimatedStyle = useAnimatedStyle(() => {
-        return {
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            backgroundColor: backdropColor,
-            justifyContent: 'center',
-            alignItems: 'center',
-            opacity: opacity.value
-        }
-    });
-    const modalContAnimatedStyle = useAnimatedStyle(() => {
-        return {
-            backgroundColor: '#fff',
-            borderRadius: 5,
-            width: `${dialogSizes[size]}%`,
-            borderWidth: 1,
-            borderColor: '#d4d4d4',
-            minHeight: fullScreen ? '100%' : 'auto',
-            maxHeight: fullScreen ? '100%' : '80%',
-            opacity: opacity.value,
-            transform: [{
-                scale: scale.value
-            }],
-        }
-    });
+    const backdropAnimatedStyles = {
+        opacity: opacity,
+        backgroundColor: backdropColor,
+    };
+    const modalContAnimatedStyles = {
+        transform: [{ scale }],
+        opacity: opacity,
+    };
+    const dynamicModalContStyles: ViewStyle = {
+        minHeight: fullScreen ? '100%' : 'auto',
+        maxHeight: fullScreen ? '100%' : '80%',
+        width: `${dialogSizes[size]}%`,
+    };
+
     const renderChildrenWithVariant = () => {
         return React.Children.map(children, (child) => {
             if (React.isValidElement(child)) {
@@ -98,12 +83,12 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
     return (<>
         <Portal name='dialog'>
             <Animated.View
-                style={backdropAnimatedStyle}
+                style={[STYLES.BACKDROP_CONT, backdropAnimatedStyles]}
                 pointerEvents={dialogVisible ? 'auto' : 'none'}
                 onStartShouldSetResponder={handleStartShouldSetResponder}
             >
                 <Animated.View
-                    style={modalContAnimatedStyle}
+                    style={[STYLES.MODAL_CONT, dynamicModalContStyles, modalContAnimatedStyles]}
                     onStartShouldSetResponder={() => true}
                 >
                     {renderChildrenWithVariant()}
@@ -113,4 +98,22 @@ const Dialog = forwardRef<DialogRefProps, DialogProps>(({
     </>);
 });
 export default Dialog;
-export type { DialogProps };
+export type { DialogProps };
+
+const STYLES = StyleSheet.create({
+    BACKDROP_CONT: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    MODAL_CONT: {
+        backgroundColor: '#fff',
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: '#d4d4d4'
+    }
+});

package/src/components/Dialog/DialogBody.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, ScrollView } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { moderateScale } from '../../helpers/ResponsiveCalculations';
 import type { DialogBodyProps } from '../../types';
 
@@ -14,17 +14,15 @@ const DialogBody: React.FC<props> = ({
     containerStyle,
     children,
 }) => {
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            paddingVertical: variant == 'default' ? moderateScale(16) : 0,
-            paddingHorizontal: moderateScale(variant == 'default' ? 16 : 25),
-            gap: 20,
-        },
-    });
+    const style = {
+        paddingVertical: variant == 'default' ? moderateScale(16) : 0,
+        paddingHorizontal: moderateScale(variant == 'default' ? 16 : 25),
+        gap: 20,
+    };
     return (<>
 
         <ScrollView scrollEnabled={scrollEnable}>
-            <View style={[STYLES.CONTAINER, containerStyle]} pointerEvents='box-none'>
+            <View style={[style, containerStyle]} pointerEvents='box-none'>
                 {children}
             </View>
         </ScrollView>

package/src/components/Dialog/DialogDescription.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { moderateVerticalScale } from '../../helpers/ResponsiveCalculations';
 import { StyledText } from '../StyledComponents';
 import type { DialogDescriptionProps } from '../../types';
@@ -11,16 +11,16 @@ const DialogDescription: React.FC<DialogDescriptionProps> = ({
     textStyle,
     children,
 }) => {
-    const STYLES = StyleSheet.create({
-        TEXT: {
-            color: '#a1a1aa',
-            lineHeight: moderateVerticalScale(13)
-        }
-    });
     return (<>
-
         <View style={containerStyle}>
-            <StyledText style={[STYLES.TEXT, textStyle]} variant={textVariant} fs={fs}>{children}</StyledText>
+            <StyledText
+                style={[{ lineHeight: moderateVerticalScale(13) }, textStyle]}
+                color='#a1a1aa'
+                variant={textVariant}
+                fs={fs}
+            >
+                {children}
+            </StyledText>
         </View>
     </>);
 }

package/src/components/Dialog/DialogFoot.tsx

@@ -14,22 +14,24 @@ const DialogFoot: React.FC<props> = ({
     containerStyle,
     children
 }) => {
-
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            borderTopWidth: variant === 'default' ? 0.7 : 0,
-            borderColor: '#d4d4d4',
-            padding: moderateScale(variant === 'default' ? 16 : 20),
-            paddingHorizontal: moderateScale(variant === 'default' ? 16 : 25),
-            justifyContent: 'flex-end',
-            gap: moderateScale(15)
-        },
-    });
+    const dynamicStyles = {
+        borderTopWidth: variant === 'default' ? 0.7 : 0,
+        padding: moderateScale(variant === 'default' ? 16 : 20),
+        paddingHorizontal: moderateScale(variant === 'default' ? 16 : 25),
+    };
     return (<>
-        <Stack.H justify='flex-end' gap={moderateScale(15)} containerStyle={[STYLES.CONTAINER, containerStyle]}>
+        <Stack.H  style={[STYLES.CONTAINER, dynamicStyles, containerStyle]}>
             {children}
         </Stack.H>
     </>);
 }
 export default DialogFoot;
-export type { DialogFootProps };
+export type { DialogFootProps };
+
+const STYLES = StyleSheet.create({
+    CONTAINER: {
+        borderColor: '#d4d4d4',
+        justifyContent: 'flex-end',
+        gap: moderateScale(15)
+    },
+});

package/src/components/Dialog/DialogHead.tsx

@@ -19,24 +19,13 @@ const DialogHead: React.FC<props> = ({
     textStyle,
     children
 }) => {
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            borderBottomWidth: variant == 'default' ? 0.7 : 0,
-            borderColor: '#d4d4d4',
-            padding: moderateScale(variant === 'default' ? 16 : 25),
-            paddingBottom: moderateScale(16),
-            justifyContent: 'space-between',
-            flexDirection: 'row',
-        },
-        HEADER_TEXT: {
-            // fontSize: responsiveFontSize(15),
-            fontWeight: 'bold',
-            color: '#000',
-        }
-    });
+    const dynamicStyles = {
+        borderBottomWidth: variant == 'default' ? 0.7 : 0,
+        padding: moderateScale(variant === 'default' ? 16 : 25),
+    };
     return (<>
 
-        <View style={[STYLES.CONTAINER, containerStyle]}>
+        <View style={[STYLES.CONTAINER, dynamicStyles, containerStyle]}>
             <View>
                 <StyledText style={[STYLES.HEADER_TEXT, textStyle]} fs={fs} variant={textVariant}>{title}</StyledText>
                 {children}
@@ -48,4 +37,18 @@ const DialogHead: React.FC<props> = ({
     </>);
 }
 export default DialogHead;
-export type { DialogHeadProps };
+export type { DialogHeadProps };
+
+
+const STYLES = StyleSheet.create({
+    CONTAINER: {
+        borderColor: '#d4d4d4',
+        paddingBottom: moderateScale(16),
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+    },
+    HEADER_TEXT: {
+        fontWeight: 'bold',
+        color: '#000',
+    }
+});

package/src/components/Divider/Divider.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { StyleSheet } from "react-native";
 import type { ViewStyle, StyleProp } from "react-native";
 import { StyledView } from '../StyledComponents';
 import { useTheme } from '../../hooks';
@@ -20,15 +19,12 @@ const Divider: React.FC<DividerProps> = ({
 
     const theme = useTheme();
 
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            borderWidth: thickness,
-            borderColor: color ?? theme?.colors.dividerColor
-        }
-    });
-
+    const dynamicStyles = {
+        borderWidth: thickness,
+        borderColor: color ?? theme?.colors.dividerColor
+    };
     return (<>
-        <StyledView style={[STYLES.CONTAINER, style]} />
+        <StyledView style={[dynamicStyles, style]} />
     </>);
 };
 export default Divider;

package/src/components/Header/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { moderateScale, moderateVerticalScale, responsiveFontSize } from '../../helpers/ResponsiveCalculations';
 import { StyledText } from '../StyledComponents';

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useMemo } from "react";
+import type { JSX } from 'react';
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import { useTheme } from "../../hooks";
 
@@ -14,14 +15,18 @@ const Icon: React.FC<IconProps> = ({
 }) => {
     const theme = useTheme(!color && !renderIcon?.props.color);
 
-    return (<>
-        {React.cloneElement(renderIcon as React.ReactElement<any>,
+    const renderCallBackIcon = useMemo(() => {
+        return React.cloneElement(renderIcon as React.ReactElement<any>,
             {
                 ...renderIcon?.props,
                 size: verticalScale(renderIcon?.props?.size ?? 15),
                 color: color ?? (renderIcon?.props.color ?? theme?.colors.iconPrimary)
             }
-        )}
+        )
+    }, [color, theme]);
+
+    return (<>
+        {renderCallBackIcon}
     </>)
 }
 export default Icon;

package/src/components/Link/Link.tsx

@@ -1,31 +1,48 @@
 import type React from "react";
 import { StyledText } from "../StyledComponents";
-import { Linking, TouchableOpacity } from "react-native";
+import { Linking, StyleSheet, TouchableOpacity, type TextStyle } from "react-native";
 import { useCallback } from "react";
+import type { TypographyVariant } from "../../types";
 
 
 type props = {
     title: string;
     href: string;
+    textVariant?: TypographyVariant;
+    style?: TextStyle
 }
 
 const Link: React.FC<props> = ({
     title = '',
-    href
+    href,
+    textVariant = 'h5',
+    style
 }) => {
     const onUserPress = useCallback(async () => {
         const supported = await Linking.canOpenURL(href);
         if (supported) {
             await Linking.openURL(href);
         }
-    }, []);
+    }, [href]);
     return (<>
         <TouchableOpacity onPress={onUserPress}>
-            <StyledText variant='h5' color='#0000FF'
-                style={{ includeFontPadding: false, alignItems: 'baseline', borderBottomColor: '#0000FF', borderBottomWidth: 1, alignSelf: 'flex-start', padding: 0, margin: 0, lineHeight: undefined, flexShrink: 1, textAlignVertical: 'bottom', }}
-            >{title}</StyledText>
+            <StyledText
+                variant={textVariant}
+                color='#0000FF'
+                style={[STYLES.TEXT, style]}
+            >
+                {title}
+            </StyledText>
         </TouchableOpacity>
     </>)
 }
 
-export default Link;
+export default Link;
+
+const STYLES = StyleSheet.create({
+    TEXT: {
+        borderBottomColor: '#0000FF',
+        borderBottomWidth: 0.8,
+        alignSelf: 'flex-start',
+    }
+});