@nexara/nativeflow 0.1.1 → 0.1.2

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 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,6 +1,7 @@
 import React, { useMemo } from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import { horizontalScale } from "../../helpers/ResponsiveCalculations";
+import type { ViewStyle } from 'react-native';
 import type { HStackProps } from "../../types";
 
 const HStack: React.FC<HStackProps> = ({
@@ -8,26 +9,25 @@ const HStack: React.FC<HStackProps> = ({
     align = 'center',
     fWrap = 'wrap',
     gap = 10,
-    containerStyle,
+    style,
     children,
+    ref,
     ...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]}
+            style={[viewProps, style]}
+            ref={ref}
             {...rest}
         >
             {children}

package/src/components/Stack/VStack.tsx

@@ -7,11 +7,13 @@ const VStack: React.FC<VStackProps> = ({
     children,
     align,
     gap = 10,
-    containerStyle,
+    style,
+    ref,
     ...rest
 }) => {
 
     const calculatedGap: number = useMemo(() => horizontalScale(gap), [gap]);
+
     const viewProps = {
         flexDirection: 'column',
         alignItems: align,
@@ -20,7 +22,8 @@ const VStack: React.FC<VStackProps> = ({
     return (<>
         <View
             {...viewProps}
-            style={containerStyle}
+            style={style}
+            ref={ref}
             {...rest}
         >
             {children}

package/src/components/StyledComponents/StyledText.tsx

@@ -18,12 +18,10 @@ const StyledText: React.FC<StyledTextProps> = ({
     secondary,
     ...props
 }) => {
-
     const { colors, typography: { variantSizes } }: any = useTheme();
-    
-    return (<>
+    return (
         <Text
-            allowFontScaling={false}
+            // allowFontScaling={false}
             style={[{
                 fontSize: responsiveFontSize(fs ?? variantSizes[variant]),
                 fontFamily: ff ?? '',
@@ -37,7 +35,7 @@ const StyledText: React.FC<StyledTextProps> = ({
         >
             {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;

package/src/components/Switch/Switch.tsx

@@ -17,12 +17,12 @@ const Switch: React.FC<SwitchProps> = ({
 }) => {
 
     const theme: any = useTheme();
-    const switchColor = disabled ? '#808080' : color ?? theme.colors.switchColor;
+    const switchColor = disabled ? '#808080' : color ?? theme.colors.primary;
 
     return (<>
         <NativeSwitch
             value={checked}
-            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 90), false: LightenColorShades(inactiveTrackColor, 60) }}
+            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 50), false: LightenColorShades(inactiveTrackColor, 60) }}
             thumbColor={switchColor}
             onValueChange={onChange}
             style={{ transform: [{ scaleX: moderateScale(size) }, { scaleY: moderateScale(size) }] }}

package/src/components/UserInput/UserInput.tsx

@@ -1,12 +1,13 @@
-import { forwardRef, useMemo } from 'react';
-import { TextInput, StyleSheet } from 'react-native';
+import { useMemo } from 'react';
+import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
+import type { TextStyle } from 'react-native';
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
 import { useTheme } from '../../hooks';
 import { StyledText, StyledView } from '../StyledComponents';
 import type { UserInputProps } from '../../types';
 import generateColors from './generateColors';
 
-const UserInput = forwardRef<TextInput, UserInputProps>(({
+const UserInput: React.FC<UserInputProps> = ({
     variant = 'standard',
     label,
     bg,
@@ -32,8 +33,9 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
     renderLeftIcon,
     renderRightIcon,
     styles,
+    ref,
     ...props
-}, ref) => {
+}) => {
 
     const theme: any = useTheme();
 
@@ -43,50 +45,44 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
         computedLabelColor
     } = useMemo(() => generateColors(theme, isError, cursorColor, placeholderColor, labelColor), [theme, isError, cursorColor, placeholderColor, labelColor]);
 
-    const STYLES = StyleSheet.create({
+    const dynamicStyles = {
         INPUT_CONT: {
-            flexDirection: 'row',
-            alignItems: multiline ? 'flex-start' : 'center',
+            alignItems: multiline ? 'flex-start' : 'center' as ViewStyle['alignItems'],
             backgroundColor: disabled ? theme.colors.disable : bg ?? theme.colors.inputBgColor,
             borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
             borderWidth: variant === 'standard' ? 0 : stroke,
             borderBottomWidth: stroke,
-            paddingHorizontal: horizontalScale(14),
             borderRadius: verticalScale(br),
-            gap: horizontalScale(10),
-            height: multiline ? 'auto' : verticalScale(48),
-            paddingVertical: multiline ? horizontalScale(10) : 'auto',
+            height: multiline ? undefined : verticalScale(48),
+            paddingVertical: multiline ? horizontalScale(10) : undefined,
         },
         INPUT: {
             color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
             fontSize: responsiveFontSize(inputFs),
-            textAlignVertical: multiline ? 'top' : 'center',
-            minHeight: multiline ? 100 : 'auto',
-            maxHeight: multiline ? 150 : 'auto',
-            padding: 0,
-            flex: 1,
+            textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
+            minHeight: multiline ? 100 : undefined,
+            maxHeight: multiline ? 150 : undefined,
         },
         ERROR_HELPER_TEXT: {
             color: theme.colors.error,
-            paddingHorizontal: 5
         }
-    });
+    };
 
     return (<>
-        <StyledView gap={verticalScale(5)} style={styles?.mainContainer}>
+        <StyledView gap={verticalScale(5)} style={styles?.mainContainer} w='100%'>
             {
                 label &&
                 <StyledText variant={textVariant?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
             }
             <StyledView
-                style={[STYLES.INPUT_CONT, styles?.inputContainer]}
+                style={[STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer]}
             >
                 {
                     renderLeftIcon
                 }
                 <TextInput
                     ref={ref}
-                    style={[STYLES.INPUT, styles?.input]}
+                    style={[STYLES.INPUT, dynamicStyles.INPUT, styles?.input]}
                     placeholder={placeholder}
                     placeholderTextColor={computedPlaceholderColor}
                     editable={!disabled}
@@ -100,25 +96,35 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
             </StyledView>
             {
                 (isError && helperText) &&
-                <StyledText variant={textVariant?.helperText} fs={helperTextFS} style={[STYLES.ERROR_HELPER_TEXT, styles?.helperText]}>{helperText}</StyledText>
+                <StyledText
+                    variant={textVariant?.helperText}
+                    fs={helperTextFS}
+                    style={[
+                        STYLES.ERROR_HELPER_TEXT,
+                        dynamicStyles.ERROR_HELPER_TEXT,
+                        styles?.helperText
+                    ]}
+                >
+                    {helperText}
+                </StyledText>
             }
         </StyledView>
     </>)
-});
+};
 export default UserInput;
 export type { UserInputProps };
 
-// const STYLES = StyleSheet.create({
-//     INPUT_CONT: {
-//         flexDirection: 'row',
-//         paddingHorizontal: horizontalScale(14),
-//         gap: horizontalScale(10),
-//     },
-//     INPUT: {
-//         padding: 0,
-//         flex: 1,
-//     },
-//     ERROR_HELPER_TEXT: {
-//         paddingHorizontal: 5
-//     }
-// });
+const STYLES = StyleSheet.create({
+    INPUT_CONT: {
+        flexDirection: 'row',
+        paddingHorizontal: horizontalScale(14),
+        gap: horizontalScale(10),
+    },
+    INPUT: {
+        padding: 0,
+        flex: 1,
+    },
+    ERROR_HELPER_TEXT: {
+        paddingHorizontal: 5
+    }
+});

package/src/helpers/LightenColorShades.ts

@@ -1,7 +1,27 @@
-const LightenColorShades = (hex:string, amount: number)=> {
-    let r = Math.min(255, parseInt(hex.slice(1, 3), 16) + amount);
-    let g = Math.min(255, parseInt(hex.slice(3, 5), 16) + amount);
-    let b = Math.min(255, parseInt(hex.slice(5, 7), 16) + amount);
-    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
-}
+const LightenColorShades = (color: string, amount: number): string => {
+    if (color.startsWith("#")) {
+        color = color.slice(1);
+    }
+    if (color.length === 3) {
+        color = color.split("").map(c => c + c).join("");
+    }
+    if (color.length !== 6) {
+        throw new Error("Invalid HEX color.");
+    }
+   
+    const getValidColorValue = (start: number): number => {
+        const value = parseInt(color.slice(start, start + 2), 16);
+        return Number.isNaN(value) ? 0 : Math.min(255, Math.max(0, value + amount));
+    };
+
+    const r: number = getValidColorValue(0);
+    const g: number = getValidColorValue(2);
+    const b: number = getValidColorValue(4);
+
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+        .toString(16)
+        .slice(1)
+        .toUpperCase()}`;
+};
+
 export default LightenColorShades;

package/src/helpers/ResponsiveCalculations.ts

@@ -13,7 +13,11 @@ const guidelineBaseWidth = 350;
 const guidelineBaseHeight = 680;
 const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
 
+const scalingCache = new Map<'hScale' | 'vScale' | 'fs', object>();
 
+export const fun = () => {
+    return scalingCache
+}
 const checkIsPhone = (size: number): number => {
     if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
         return size;
@@ -24,11 +28,18 @@ export const horizontalScale = (size: number): number => {
     if (checkIsPhone(size)) {
         return size;
     }
+    const hScaleCache: any = scalingCache.get('hScale') || {};
+    if (hScaleCache?.[size]) {
+        return hScaleCache?.[size];
+    }
     const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
     let scale = (shortDimension / guidelineBaseHeight);
     scale = 1 + (scale - 1) * slowDownRate;
     let adjustedSize = size * Math.max(scale, 0.80);
-    return Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    hScaleCache[size] = finalSize;
+    scalingCache.set('hScale', hScaleCache)
+    return finalSize;
 }
 
 
@@ -36,11 +47,18 @@ export const verticalScale = (size: number): number => {
     if (checkIsPhone(size)) {
         return size;
     }
+    const vScaleCache: any = scalingCache.get('vScale') || {};
+    if (vScaleCache?.[size]) {
+        return vScaleCache?.[size];
+    }
     const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
     let scale = (longDimension / guidelineBaseHeight);
     scale = 1 + (scale - 1) * slowDownRate;
     let adjustedSize = size * Math.max(scale, 0.80);
-    return Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedSize));
+    vScaleCache[size] = finalSize;
+    scalingCache.set('vScale', vScaleCache)
+    return finalSize;
 }
 
 
@@ -63,13 +81,20 @@ export const responsiveFontSize = (fontSize: number): number => {
     if (checkIsPhone(fontSize)) {
         return fontSize;
     }
+    const fsCache: any = scalingCache.get('fs') || {};
+    if (fsCache?.[fontSize]) {
+        return fsCache?.[fontSize];
+    }
     const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
     const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
     const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
     let scale = screenDiagonal / baseScreenDiagonal;
     scale = 1 + (scale - 1) * slowDownRate;
     let adjustedFontSize = fontSize * Math.max(scale, 0.85);
-    return Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize))
+    const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize));
+    fsCache[fontSize] = finalSize;
+    scalingCache.set('vScale', fsCache)
+    return finalSize;
 };