@nexara/nativeflow 0.1.1 → 0.1.4

package/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { StyleSheet } from "react-native";
+import type { JSX } from 'react';
+import { StyleSheet, TouchableOpacity, type ViewStyle } from "react-native";
 import { verticalScale, horizontalScale } from "../../helpers/ResponsiveCalculations";
 import { StyledText, StyledView } from '../StyledComponents';
 import { useTheme } from '../../hooks';
 import { getButtonColors } from './utils';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import type { ButtonProps } from '../../types';
 
 
@@ -32,7 +32,7 @@ const Button: React.FC<ButtonProps> = ({
     buttonContainerStyle,
     textStyle,
     onPress,
-    ...props
+    ...rest
 }) => {
     const theme: any = useTheme();
 
@@ -44,110 +44,153 @@ const Button: React.FC<ButtonProps> = ({
         strokeColor,
         disabled
     });
-
-    const STYLES = StyleSheet.create({
+    const dynamicStyles = {
         BUTTON_CONT: {
             backgroundColor: backgroundColor,
             borderWidth: variant === 'contained' ? 0 : stroke,
             borderColor: buttonBorderColor,
-            maxWidth: '100%',
         },
         BUTTON_TEXT: {
             color: buttonTextColor,
-            textAlign: 'center',
             fontFamily: titleFF ?? '',
         },
-        FLAT_BTN_CONT: {
+        FLAT_BTN_MAIN_CONT: {
             borderRadius: verticalScale(br),
-            overflow: 'hidden',
-            alignSelf: fullWidth ? 'stretch' : 'flex-start',
+            alignSelf: fullWidth ? 'stretch' : 'flex-start' as ViewStyle['alignSelf'],
         },
-        FLAT_BUTTON_CONT: {
+        FLAT_BTN_INNER_CONT: {
             paddingVertical: verticalScale(paddingV),
             paddingHorizontal: horizontalScale(!fullWidth ? paddingH : 30),
             borderRadius: verticalScale(br),
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: horizontalScale(10),
         },
-        ROUND_BUTTON_CONT: {
-            borderRadius: verticalScale(100),
+        ROUND_BTN_INNER_CONT: {
             height: verticalScale(size),
             width: verticalScale(size),
-            alignItems: 'center',
-            justifyContent: 'center',
         }
-    });
+    };
 
-    return (
-        <>
-            {type === 'flat' && (
-                <StyledView style={STYLES.FLAT_BTN_CONT}>
-                    <TouchableRipple
-                        onPress={onPress}
-                        rippleColor={rippleColor}
-                        disabled={disabled}
-                        // ref={ref}
-                        {...props}
-                    >
-                        <StyledView style={[STYLES.FLAT_BUTTON_CONT, STYLES.BUTTON_CONT, buttonContainerStyle]}>
-                            {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
-                                <StyledView f={fullWidth ? 1 : undefined}>
-                                    {renderLeftIcon && React.cloneElement(renderLeftIcon, {
-                                        color: buttonIconColor
-                                    })}
-                                </StyledView>
-                            )}
+    const cloneElement = (element: JSX.Element): JSX.Element | null => {
+        if (React.isValidElement<{ color?: string }>(element)) {
+            return React.cloneElement(element, {
+                color: buttonIconColor
+            })
+        }
+        return null;
+    }
 
-                            <StyledView
-                                flexShrink={1}
-                                f={fullWidth ? 8 : undefined}
-                            >
-                                <StyledText numberOfLines={1} fs={titleFS} variant={titleVariant} style={[STYLES.BUTTON_TEXT, textStyle]}>
-                                    {title}
-                                </StyledText>
+    return (<>
+        {type === 'flat' && (
+            <StyledView style={[STYLES.FLAT_BTN_MAIN_CONT, dynamicStyles.FLAT_BTN_MAIN_CONT]}>
+                <TouchableOpacity
+                    onPress={onPress}
+                    // rippleColor={rippleColor}
+                    disabled={disabled}
+                    // ref={ref}
+                    {...rest}
+                >
+
+                    {/* <TouchableRipple
+                    onPress={onPress}
+                    rippleColor={rippleColor}
+                    disabled={disabled}
+                    // ref={ref}
+                    {...rest}
+                > */}
+                    <StyledView
+                        style={[
+                            STYLES.FLAT_BTN_INNER_CONT,
+                            STYLES.BUTTON_CONT,
+                            dynamicStyles.FLAT_BTN_INNER_CONT,
+                            dynamicStyles.BUTTON_CONT,
+                            buttonContainerStyle
+                        ]}>
+                        {(renderLeftIcon || (fullWidth && renderRightIcon)) && (
+                            <StyledView f={fullWidth ? 1 : undefined}>
+                                {renderLeftIcon && cloneElement(renderLeftIcon)}
                             </StyledView>
+                        )}
 
-                            {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
-                                <StyledView alignItems='flex-end' f={fullWidth ? 1 : undefined}>
-                                    {renderRightIcon && React.cloneElement(renderRightIcon, {
-                                        color: buttonIconColor
-                                    })}
-                                </StyledView>
-                            )}
+                        <StyledView
+                            flexShrink={1}
+                            f={fullWidth ? 8 : undefined}
+                        >
+                            <StyledText numberOfLines={1} fs={titleFS} variant={titleVariant}
+                                style={[
+                                    STYLES.BUTTON_TEXT,
+                                    dynamicStyles.BUTTON_TEXT,
+                                    textStyle
+                                ]}
+                            >
+                                {title}
+                            </StyledText>
                         </StyledView>
-                    </TouchableRipple>
-                </StyledView>
-            )}
 
-            {type === 'round' && (
-                <StyledView
-                    alignSelf='flex-start'
-                    borderRadius={verticalScale(100)}
-                    overflow='hidden'
-                    style={{
-                        overflow: 'hidden',
-                        borderRadius: verticalScale(100),
-                        alignSelf: 'flex-start'
-                    }}
+                        {(renderRightIcon || (fullWidth && renderLeftIcon)) && (
+                            <StyledView alignItems='flex-end' f={fullWidth ? 1 : undefined}>
+                                {renderRightIcon && cloneElement(renderRightIcon)}
+                            </StyledView>
+                        )}
+                    </StyledView>
+                    {/* </TouchableRipple> */}
+                </TouchableOpacity>
+
+            </StyledView>
+        )}
+
+        {type === 'round' && (
+            <StyledView style={STYLES.ROUND_BTN_MAIN_CONT} >
+                <TouchableOpacity
+                    onPress={onPress}
+                    // rippleColor={rippleColor}
+                    {...rest}
                 >
-                    <TouchableRipple
-                        onPress={onPress}
-                        rippleColor={rippleColor}
-                        {...props}
+                    <StyledView
+                        style={[
+                            STYLES.BUTTON_CONT,
+                            STYLES.ROUND_BTN_INNER_CONT,
+                            dynamicStyles.BUTTON_CONT,
+                            dynamicStyles.ROUND_BTN_INNER_CONT,
+                            buttonContainerStyle
+                        ]}
                     >
-                        <StyledView
-                            style={[STYLES.BUTTON_CONT, STYLES.ROUND_BUTTON_CONT, buttonContainerStyle]}
-                        >
-                            {renderIcon}
-                        </StyledView>
-                    </TouchableRipple>
-                </StyledView>
-            )}
-        </>
+                        {renderIcon && cloneElement(renderIcon)}
+                    </StyledView>
+                </TouchableOpacity>
+            </StyledView>
+        )}
+    </>
     );
 };
 
 export default Button;
 export type { ButtonProps };
+
+const STYLES = StyleSheet.create({
+    BUTTON_CONT: {
+        maxWidth: '100%',
+    },
+    BUTTON_TEXT: {
+        textAlign: 'center',
+    },
+    FLAT_BTN_MAIN_CONT: {
+        overflow: 'hidden',
+    },
+    FLAT_BTN_INNER_CONT: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: horizontalScale(10),
+    },
+    ROUND_BTN_MAIN_CONT: {
+        overflow: 'hidden',
+        borderRadius: verticalScale(100),
+        alignSelf: 'flex-start',
+    },
+    ROUND_BTN_INNER_CONT: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});
+
+
+

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/Chip/Chip.tsx

@@ -23,7 +23,7 @@ const Chip: React.FC<ChipProps> = ({
     renderRightIcon,
     containerStyle,
     textStyle,
-    ...props
+    ...rest
 }) => {
 
     const theme: any = useTheme();
@@ -58,7 +58,7 @@ const Chip: React.FC<ChipProps> = ({
                 android_ripple={{
                     color: rippleColor,
                 }}
-                {...props}
+                {...rest}
                 disabled={disabled}
             >
                 <StyledView style={[STYLES.CONTAINER, containerStyle]}>

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,36 @@ 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,
+    containerStyle,
     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 +51,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 +84,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, containerStyle]}
                     onStartShouldSetResponder={() => true}
                 >
                     {renderChildrenWithVariant()}
@@ -113,4 +99,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,26 +1,26 @@
 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';
 
 const DialogDescription: React.FC<DialogDescriptionProps> = ({
-    fs,
     textVariant = 'h5',
+    fs,
     containerStyle,
     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)
+    },
+});