@nexara/nativeflow 0.1.1 → 0.1.4

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';
@@ -13,22 +12,18 @@ type DividerProps = {
 
 const Divider: React.FC<DividerProps> = ({
     thickness = 0.2,
-    // color = '#DCDBDB',
     color,
     style
 }) => {
 
     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/Grid/Grid.tsx

@@ -45,7 +45,6 @@ const Grid: React.FC<GridProps> = ({
             paddingHorizontal: spacingH,
             paddingVertical: spacingV,
             gap: spacing,
-            // flexShrink:1
         },
     });
     return (<>

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,4 @@
-import React from "react";
+import React, { useMemo, type JSX } from "react";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import { useTheme } from "../../hooks";
 
@@ -14,14 +14,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/IconButton/IconButton.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import type { ReactNode } from "react";
-import type { PressableProps } from "react-native";
+import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
 import { StyledView } from "../StyledComponents";
-import TouchableRipple from "../TouchableRipple/TouchableRipple";
+// import TouchableRipple from "../TouchableRipple/TouchableRipple";
 import Icon from "../Icon/Icon";
 import { verticalScale } from "../../helpers/ResponsiveCalculations";
 
 
-type IconButtonProps = PressableProps & {
+type IconButtonProps = TouchableOpacityProps & {
     rippleColor?: string;
     children?: ReactNode;
 }
@@ -20,15 +20,15 @@ const IconButton: React.FC<IconButtonProps> = ({
 
     return (<>
         <StyledView style={{ alignSelf: 'flex-start' }}>
-            <TouchableRipple
-                rippleColor={rippleColor}
+            <TouchableOpacity
+                // rippleColor={rippleColor}
                 style={{ borderRadius: 100, padding: verticalScale(8) }}
                 {...rest}
             >
                 <Icon
                     renderIcon={React.cloneElement(children as React.ReactElement<any>)}
                 />
-            </TouchableRipple>
+            </TouchableOpacity>
         </StyledView>
     </>)
 }

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',
+    }
+});

package/src/components/Menu/Menu.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect, } from "react";
-import { StyleSheet, Pressable, View, ScrollView } from "react-native";
+import { StyleSheet, Pressable, View, ScrollView, Animated } from "react-native";
 import { StyledView } from "../StyledComponents";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import Portal from "../Portal/Portal";
 import { positionCalculations } from "./calculations";
 import type { menuLayoutTypes, anchorLayoutTypes } from "./calculations";
@@ -19,20 +18,20 @@ const Menu: React.FC<MenuProps> = ({
     style,
     children
 }) => {
-
     const [isVisible, setIsVisible] = useState<boolean>(false);
     const anchorLayoutRef = useRef<anchorLayoutTypes>({ pageY: 0, pageX: 0, height: 0, width: 0 });
     const menuLayoutRef = useRef<menuLayoutTypes>({ height: 0, width: 0 });
-    const buttonRef = useRef<View | null>(null);
-    const scaleSharedValue = useSharedValue(0.5);
+    const buttonRef = useRef<View>(null!);
+    const animatedScaleRef = useRef(new Animated.Value(1)).current;
+
     const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();
 
     useEffect(() => {
-        if ((disableBuiltInState && isOpen) || isVisible) {
-            scaleSharedValue.value = withTiming(1, { duration: 150 });
-        } else {
-            scaleSharedValue.value = 0;
-        }
+        Animated.timing(animatedScaleRef, {
+            toValue: (disableBuiltInState && isOpen) || isVisible ? 1 : 0,
+            duration: 150,
+            useNativeDriver: true,
+        }).start();
     }, [isOpen, isVisible]);
 
     const measureLayout = useCallback(() => {
@@ -63,14 +62,17 @@ const Menu: React.FC<MenuProps> = ({
 
     const renderChildren = (useCallback(() => {
         return (<ScrollView>
-            {React.Children?.toArray(children).map((e) => {
-                return React.cloneElement(e as React.ReactElement, {
-                    onPress: () => {
-                        (e as React.ReactElement)?.props?.onPress?.();
-                        onSelect?.((e as React.ReactElement)?.props?.name);
-                        onClose();
-                    }
-                });
+            {React.Children?.toArray(children).map((child) => {
+                if (React.isValidElement<{ onPress: () => void; name: string; }>(child)) {
+                    return React.cloneElement(child, {
+                        onPress: () => {
+                            (child)?.props?.onPress?.();
+                            onSelect?.((child)?.props?.name);
+                            onClose();
+                        }
+                    });
+                }
+                return null;
             })}
         </ScrollView>)
 
@@ -79,34 +81,15 @@ const Menu: React.FC<MenuProps> = ({
     const scale: number = disableBuiltInState ? Number(isOpen) : Number(isVisible);
     const pointerEvent = (isVisible && !disableBuiltInState) || (isOpen && disableBuiltInState) ? 'auto' : 'none';
 
-    const STYLES = StyleSheet.create({
-        CONTAINER: {
-            // width: horizontalScale(130),
-            shadowColor: "#000",
-            backgroundColor: '#fff',
-            shadowOffset: {
-                width: 0,
-                height: 2,
-            },
-            shadowOpacity: 0.23,
-            shadowRadius: 2.62,
-            elevation: 4,
-            position: 'absolute',
-            left: positions.left,
-            top: positions.top,
-            borderRadius: 5,
-            maxHeight: 400,
-            minWidth: horizontalScale(150),
-            paddingVertical: verticalScale(5)
-        }
-    });
+    const dynamicStyles = {
+        left: positions.left,
+        top: positions.top,
+    };
 
-    const menuAnimatedStyle = useAnimatedStyle(() => {
-        return {
-            transform: [{ scale: scaleSharedValue.value }],
-            opacity: scaleSharedValue.value
-        }
-    });
+    const menuAnimatedStyle = {
+        transform: [{ scale: animatedScaleRef }],
+        opacity: animatedScaleRef
+    };
 
     return (<>
 
@@ -119,7 +102,7 @@ const Menu: React.FC<MenuProps> = ({
                 onPress={onClose}>
                 <Animated.View
                     onStartShouldSetResponder={() => true}
-                    style={[STYLES.CONTAINER, menuAnimatedStyle, style]}
+                    style={[STYLES.MENU_CONT, dynamicStyles, menuAnimatedStyle, style]}
                     onLayout={({ nativeEvent: { layout: { height, width } } }) => menuLayoutRef.current = { width, height }}
                 >
                     {renderChildren}
@@ -127,13 +110,30 @@ const Menu: React.FC<MenuProps> = ({
             </Pressable>
         </Portal>
 
-        <StyledView alignItems='flex-start'>
-            <View ref={buttonRef} onLayout={measureLayout}>
-                {anchor && React.cloneElement(anchor, { onPress: onOpen })}
-            </View>
+        <StyledView alignItems='flex-start' ref={buttonRef} onLayout={measureLayout}>
+            {anchor && React.isValidElement<{ onPress: () => void }>(anchor) && React.cloneElement(anchor, { onPress: onOpen })}
         </StyledView>
 
     </>)
 }
 export default Menu;
-export type { MenuProps };
+export type { MenuProps };
+
+const STYLES = StyleSheet.create({
+    MENU_CONT: {
+        shadowColor: "#000",
+        backgroundColor: '#fff',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+        position: 'absolute',
+        borderRadius: 5,
+        maxHeight: 400,
+        minWidth: horizontalScale(150),
+        paddingVertical: verticalScale(5)
+    }
+});

package/src/components/Menu/MenuItem.tsx

@@ -5,8 +5,6 @@ import { horizontalScale, moderateScale, verticalScale } from "../../helpers/Res
 import type { MenuItemProps } from "../../types";
 
 const MenuItem: React.FC<MenuItemProps> = ({
-    // paddingV = 12,
-    // paddingH = 12,
     paddingV = 11,
     paddingH = 17,
     gap = 12,

package/src/components/Portal/Portal.tsx

@@ -3,13 +3,13 @@ import PortalContext from "./PortalContext";
 
 interface PortalProps {
     children: React.ReactNode,
-    name: string
+    name?: string
 }
 const Portal: React.FC<PortalProps> = ({ children, name }) => {
     const { addComponent, removeComponent } = useContext(PortalContext);
 
     useEffect(() => {
-        const uniqueId = name ?? Math.random() * 50;
+        const uniqueId = name ?? `${Math.random() * 50}`;
         addComponent({ name: uniqueId, component: children });
         return () => removeComponent(uniqueId);
     }, [children, name]);

package/src/components/Progress/Progress.tsx

@@ -1,33 +1,16 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, StyleSheet } from "react-native";
 import { moderateScale, verticalScale, } from "../../helpers/ResponsiveCalculations";
 import { StyledView } from '../StyledComponents';
 import { useTheme } from '../../hooks';
-
-
-type ProgressProps = {
-    /** Current progress value (0-100) */
-    value?: number;
-
-    /** Thickness of the progress bar */
-    thickness?: number;
-
-    /** Border radius of the progress bar */
-    br?: number;
-
-    /** Background color of the track (unfilled part) */
-    trackColor?: string;
-
-    /** Color of the progress (filled part) */
-    color?: string;
-}
+import type { ProgressProps } from '../../types';
 
 const Progress: React.FC<ProgressProps> = ({
     value = 50,
     thickness = 5,
     br = 100,
     trackColor = '#E8E8E8',
-    color,
+    progressColor,
 }) => {
 
     const animatedWidth = useRef(new Animated.Value(value)).current;
@@ -35,35 +18,49 @@ const Progress: React.FC<ProgressProps> = ({
 
     useEffect(() => {
         Animated.timing(animatedWidth, {
-            toValue: value,
+            toValue: value / 100,
             duration: 1000,
-            useNativeDriver: false,
+            useNativeDriver: true,
         }).start();
     }, [value]);
 
-    const STYLES = StyleSheet.create({
+    const dynamicStyles = useMemo(() => ({
         TRACK: {
             backgroundColor: trackColor,
             borderRadius: moderateScale(br),
-            overflow: 'hidden'
+            height: verticalScale(thickness),
         },
         TRACK_ITEM: {
-            backgroundColor: color ?? theme?.colors.primary,
-            height: verticalScale(thickness),
-            borderRadius: moderateScale(br)
+            backgroundColor: progressColor ?? theme?.colors.primary,
+            borderRadius: moderateScale(br),
         }
-    });
+    }), [br, trackColor, thickness, progressColor, theme]);
+
+    const animatedViewStyle = {
+        transform: [{ scaleX: animatedWidth }],
+        transformOrigin: 'left'
+    }
 
     return (<>
-        <StyledView style={STYLES.TRACK}>
-            <Animated.View style={[STYLES.TRACK_ITEM, {
-                width: animatedWidth.interpolate({
-                    inputRange: [0, 100],
-                    outputRange: ['0%', '100%'],
-                })
-            }]} />
+        <StyledView
+            style={[STYLES.TRACK, dynamicStyles.TRACK]}
+        >
+            <Animated.View
+                style={[STYLES.TRACK_ITEM, dynamicStyles.TRACK_ITEM, animatedViewStyle]}
+            />
         </StyledView>
     </>);
 };
 export default Progress;
 export type { ProgressProps };
+
+const STYLES = StyleSheet.create({
+    TRACK: {
+        overflow: 'hidden',
+        width: '100%',
+    },
+    TRACK_ITEM: {
+        width: "100%",
+        height: '100%'
+    }
+});

package/src/components/Stack/HStack.tsx

@@ -1,37 +1,35 @@
 import React, { useMemo } from "react";
-import { StyleSheet, View } from "react-native";
+import type { ViewStyle } from "react-native";
 import { horizontalScale } from "../../helpers/ResponsiveCalculations";
 import type { HStackProps } from "../../types";
+import { StyledView } from "../StyledComponents";
 
 const HStack: React.FC<HStackProps> = ({
     justify,
     align = 'center',
     fWrap = 'wrap',
     gap = 10,
-    containerStyle,
+    style,
     children,
     ...rest
 }) => {
     const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
-    const viewProps = {
+
+    const viewProps: ViewStyle = {
         gap: calculatedGap,
+        flexDirection: 'row',
+        justifyContent: justify,
+        alignItems: align,
+        flexWrap: fWrap,
     };
-    const STYLES = StyleSheet.create({
-        HSTACK: {
-            flexDirection: 'row',
-            justifyContent: justify,
-            alignItems: align,
-            flexWrap: fWrap,
-        }
-    });
 
     return (<>
-        <View
-            style={[viewProps, STYLES.HSTACK, containerStyle]}
+        <StyledView
+            style={[viewProps, style]}
             {...rest}
         >
             {children}
-        </View>
+        </StyledView>
     </>)
 }
 export default HStack;

package/src/components/Stack/VStack.tsx

@@ -1,30 +1,31 @@
 import React, { useMemo } from "react";
-import { View } from "react-native";
-import { horizontalScale } from "../../helpers/ResponsiveCalculations";
+import { verticalScale } from "../../helpers/ResponsiveCalculations";
 import type { VStackProps } from "../../types";
+import { StyledView } from "../StyledComponents";
+import type { ViewStyle } from "react-native";
 
 const VStack: React.FC<VStackProps> = ({
     children,
     align,
     gap = 10,
-    containerStyle,
+    style,
     ...rest
 }) => {
 
-    const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
-    const viewProps = {
+    const calculatedGap: number = useMemo(() => verticalScale(gap), [gap]);
+
+    const viewProps: ViewStyle = {
         flexDirection: 'column',
         alignItems: align,
         gap: calculatedGap,
     };
     return (<>
-        <View
-            {...viewProps}
-            style={containerStyle}
+        <StyledView
+            style={[viewProps, style]}
             {...rest}
         >
             {children}
-        </View>
+        </StyledView>
     </>)
 }
 export default VStack;

package/src/components/StyledComponents/StyledText.tsx

@@ -16,14 +16,11 @@ const StyledText: React.FC<StyledTextProps> = ({
     themeColor,
     primary,
     secondary,
-    ...props
+    ...rest
 }) => {
-
     const { colors, typography: { variantSizes } }: any = useTheme();
-    
-    return (<>
+    return (
         <Text
-            allowFontScaling={false}
             style={[{
                 fontSize: responsiveFontSize(fs ?? variantSizes[variant]),
                 fontFamily: ff ?? '',
@@ -33,11 +30,11 @@ const StyledText: React.FC<StyledTextProps> = ({
             },
                 style,
             ]}
-            {...props}
+            {...rest}
         >
             {children}
         </Text>
-    </>);
+    );
 };
 
 export default StyledText;

package/src/components/StyledComponents/StyledView.tsx

@@ -15,10 +15,13 @@ const StyledView: React.FC<StyledViewProps> = ({
     w,
     children,
     style,
+    ref,
     ...rest
 }) => {
+
     const theme = useTheme(themeBg);
-    return (<>
+
+    return (
         <View
             style={[{
                 flex: f,
@@ -31,11 +34,12 @@ const StyledView: React.FC<StyledViewProps> = ({
             },
                 style
             ]}
+            ref={ref}
             {...rest}
         >
             {children}
         </View>
-    </>);
+    );
 };
 
 export default StyledView;