@nexara/nativeflow 0.1.1

package/src/components/Portal/Portal.tsx

@@ -0,0 +1,19 @@
+import React, { useContext, useEffect } from "react";
+import PortalContext from "./PortalContext";
+
+interface PortalProps {
+    children: React.ReactNode,
+    name: string
+}
+const Portal: React.FC<PortalProps> = ({ children, name }) => {
+    const { addComponent, removeComponent } = useContext(PortalContext);
+
+    useEffect(() => {
+        const uniqueId = name ?? Math.random() * 50;
+        addComponent({ name: uniqueId, component: children });
+        return () => removeComponent(uniqueId);
+    }, [children, name]);
+
+    return null;
+}
+export default Portal;

package/src/components/Portal/PortalContext.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+interface Element {
+    name: string;
+    component: React.ReactNode;
+}
+const PortalContext = React.createContext({
+    addComponent: (element: Element) => { element },
+    removeComponent: (name: string) => { name }
+})
+export default PortalContext;

package/src/components/Portal/PortalProvider.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useMemo, useState } from "react";
+import PortalContext from "./PortalContext";
+interface PortalProviderProps {
+    children: React.ReactNode;
+}
+interface Element {
+    name: string;
+    component: React.ReactNode;
+}
+const PortalProvider: React.FC<PortalProviderProps> = ({ children }) => {
+
+    const [components, setComponents] = useState<Record<string, React.ReactNode>>({});
+    const addComponent = useCallback(({ name, component }: Element) => {
+        setComponents(prevComponents => ({
+            ...prevComponents,
+            [name]: component
+        }));
+    },[]);
+    const removeComponent = useCallback((name: string) => {
+        setComponents(prevComponents => {
+            const newComponents = { ...prevComponents };
+            delete newComponents[name];
+            return newComponents;
+        });
+    },[])
+    const values = useMemo(()=>({addComponent, removeComponent}), []);
+    return (<>
+        <PortalContext.Provider value={values}>
+            {children}
+            {Object.entries(components).map(([_name, Component]) => (
+                Component
+            ))}
+        </PortalContext.Provider>
+    </>);
+
+}
+export default PortalProvider;

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, 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;
+}
+
+const Progress: React.FC<ProgressProps> = ({
+    value = 50,
+    thickness = 5,
+    br = 100,
+    trackColor = '#E8E8E8',
+    color,
+}) => {
+
+    const animatedWidth = useRef(new Animated.Value(value)).current;
+    const theme = useTheme();
+
+    useEffect(() => {
+        Animated.timing(animatedWidth, {
+            toValue: value,
+            duration: 1000,
+            useNativeDriver: false,
+        }).start();
+    }, [value]);
+
+    const STYLES = StyleSheet.create({
+        TRACK: {
+            backgroundColor: trackColor,
+            borderRadius: moderateScale(br),
+            overflow: 'hidden'
+        },
+        TRACK_ITEM: {
+            backgroundColor: color ?? theme?.colors.primary,
+            height: verticalScale(thickness),
+            borderRadius: moderateScale(br)
+        }
+    });
+
+    return (<>
+        <StyledView style={STYLES.TRACK}>
+            <Animated.View style={[STYLES.TRACK_ITEM, {
+                width: animatedWidth.interpolate({
+                    inputRange: [0, 100],
+                    outputRange: ['0%', '100%'],
+                })
+            }]} />
+        </StyledView>
+    </>);
+};
+export default Progress;
+export type { ProgressProps };

package/src/components/Provider/NativeProvider.tsx

@@ -0,0 +1,58 @@
+import React, { createContext, useMemo, useState } from 'react';
+import type { ReactNode } from "react";
+import { LightTheme, DarkTheme } from '../../themes';
+import type { Theme, themeModeTypes, ThemeTypes } from '../../types';
+
+type ProviderProps = {
+    /** 
+     * The child components that will be wrapped by the provider.  
+     * This ensures all components within the provider have access to the theme context. 
+     */
+    children: ReactNode;
+
+    /** 
+     * Determines whether the theme should be responsive based on screen size.
+     * Default: `true`  
+     */
+    isResponsive?: boolean;
+
+    /** 
+     * Custom theme object that overrides the default light/dark themes.
+     * If not provided, the default themes (LightTheme/DarkTheme) will be used.
+     */
+    theme?: Theme;
+};
+
+type ThemeContextType = {
+    isResponsive?: boolean;
+    theme?: ThemeTypes & {
+        toggleThemeMode: () => void;
+    };
+    mode?: themeModeTypes;
+};
+
+
+export const Context = createContext<ThemeContextType | undefined>({
+    isResponsive: true,
+    mode: 'light',
+    theme: { ...LightTheme, toggleThemeMode: () => { } }
+});
+
+const NativeProvider: React.FC<ProviderProps> = ({
+    children,
+    isResponsive = true,
+    theme,
+}) => {
+    const [mode, setMode] = useState<themeModeTypes>('light');
+
+    const toggleThemeMode = () => setMode((prev) => prev === 'dark' ? 'light' : 'dark');
+    const setTheme = { ...((theme && theme[mode]) || (mode === 'light' ? LightTheme : DarkTheme)), toggleThemeMode };
+    const value = useMemo(() => ({ theme: setTheme, isResponsive, mode }), [theme, mode]);
+    return (<>
+        <Context.Provider value={value}>
+            {children}
+        </Context.Provider>
+    </>);
+}
+export default NativeProvider;
+export type { ProviderProps };

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet } from "react-native";
+import { moderateScale, verticalScale, } from "../../helpers/ResponsiveCalculations";
+import { StyledView } from '../StyledComponents';
+
+
+type SliderProps = {
+    value?: number;
+    size?: number;
+    trackColor?: string;
+    progressColor?: string;
+}
+
+const Slider: React.FC<SliderProps> = ({
+    value = 50,
+    size = 5,
+    trackColor = '#645E64',
+    progressColor = '#fff',
+}) => {
+
+    const STYLES = StyleSheet.create({
+        TRACK: {
+            backgroundColor: trackColor,
+            borderRadius: moderateScale(100),
+            // overflow: 'hidden'
+        },
+        TRACK_ITEM: {
+            backgroundColor: progressColor,
+            height: verticalScale(size),
+            width: `${value}%`,
+            borderRadius: moderateScale(100)
+        }
+    });
+  
+  
+    return (<>
+            <StyledView f={1} style={STYLES.TRACK}>
+                <StyledView style={STYLES.TRACK_ITEM} >
+
+                </StyledView>
+            </StyledView>
+    </>);
+};
+export default Slider;
+export type { SliderProps };

package/src/components/Stack/HStack.tsx

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

package/src/components/Stack/VStack.tsx

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

package/src/components/Stack/index.ts

@@ -0,0 +1,9 @@
+import HStack  from "./HStack";
+import VStack  from "./VStack";
+const Stack = {
+    H: HStack,
+    V: VStack
+};
+export type { HStackProps } from './HStack';
+export type { VStackProps } from './VStack';
+export default Stack;

package/src/components/StyledComponents/StyledText.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { responsiveFontSize } from '../../helpers/ResponsiveCalculations';
+import { useTheme } from '../../hooks';
+import type { StyledTextProps } from '../../types';
+
+const StyledText: React.FC<StyledTextProps> = ({
+    variant = 'h5',
+    children,
+    style,
+    ff,
+    fs,
+    tas,
+    fw,
+    color,
+    themeColor,
+    primary,
+    secondary,
+    ...props
+}) => {
+
+    const { colors, typography: { variantSizes } }: any = useTheme();
+    
+    return (<>
+        <Text
+            allowFontScaling={false}
+            style={[{
+                fontSize: responsiveFontSize(fs ?? variantSizes[variant]),
+                fontFamily: ff ?? '',
+                textAlign: tas ? 'center' : 'auto',
+                fontWeight: fw ?? 'normal',
+                color: color ?? (themeColor && colors.primary || primary && colors.textPrimary || secondary && colors.textSecondary || colors.textTertiary),
+            },
+                style,
+            ]}
+            {...props}
+        >
+            {children}
+        </Text>
+    </>);
+};
+
+export default StyledText;
+export type { StyledTextProps };

package/src/components/StyledComponents/StyledView.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../hooks';
+import type { StyledViewProps } from '../../types';
+
+
+const StyledView: React.FC<StyledViewProps> = ({
+    f,
+    justify,
+    align,
+    fWrap,
+    bg,
+    themeBg = false,
+    h,
+    w,
+    children,
+    style,
+    ...rest
+}) => {
+    const theme = useTheme(themeBg);
+    return (<>
+        <View
+            style={[{
+                flex: f,
+                justifyContent: justify,
+                alignItems: align,
+                flexWrap: fWrap,
+                backgroundColor: bg ?? (themeBg ? theme?.colors.secondary : 'transparent'),
+                height: h,
+                width: w,
+            },
+                style
+            ]}
+            {...rest}
+        >
+            {children}
+        </View>
+    </>);
+};
+
+export default StyledView;
+export type { StyledViewProps };

package/src/components/StyledComponents/index.tsx

@@ -0,0 +1,6 @@
+export { default as StyledText } from './StyledText';
+export { default as StyledView } from './StyledView';
+
+
+export type { StyledViewProps } from './StyledView';
+export type { StyledTextProps } from './StyledText';

package/src/components/Surface/Surface.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { StyleSheet} from "react-native";
+import { StyledView } from '../StyledComponents';
+
+
+type SurfaceProps = {
+  
+}
+
+const Surface: React.FC<SurfaceProps> = ({
+  
+}) => {
+
+    const STYLES = StyleSheet.create({
+        CONTAINER: {
+            height: 100,
+            width: 100,
+            backgroundColor: '#fff',
+            shadowColor: "#000",
+            // shadowOffset: {
+            //     width: 100,
+            //     height: 100,
+            // },
+            // shadowOpacity: 0.43,
+            // shadowRadius: 9.51,
+
+            elevation: 15,
+        }
+    });
+
+    return (<>
+        <StyledView style={STYLES.CONTAINER}>
+
+        </StyledView>
+    </>);
+};
+export default Surface;
+export type { SurfaceProps };

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Switch as NativeSwitch } from "react-native";
+import LightenColorShades from "../../helpers/LightenColorShades";
+import { moderateScale } from "../../helpers/ResponsiveCalculations";
+import { useTheme } from "../../hooks";
+import type { SwitchProps } from "../../types";
+
+const Switch: React.FC<SwitchProps> = ({
+    checked = true,
+    color,
+    disabled = false,
+    size = 0.8,
+    activeTrackColor,
+    inactiveTrackColor = '#808080',
+    onChange,
+    ...props
+}) => {
+
+    const theme: any = useTheme();
+    const switchColor = disabled ? '#808080' : color ?? theme.colors.switchColor;
+
+    return (<>
+        <NativeSwitch
+            value={checked}
+            trackColor={{ true: LightenColorShades(activeTrackColor ?? switchColor, 90), false: LightenColorShades(inactiveTrackColor, 60) }}
+            thumbColor={switchColor}
+            onValueChange={onChange}
+            style={{ transform: [{ scaleX: moderateScale(size) }, { scaleY: moderateScale(size) }] }}
+            disabled={disabled}
+            {...props}
+        />
+    </>)
+}
+export default Switch;
+export type { SwitchProps };

package/src/components/TouchableRipple/TouchableRipple.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Pressable, StyleSheet } from "react-native";
+import type { ViewStyle, StyleProp, PressableProps } from "react-native";
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { StyledView } from '../StyledComponents';
+
+
+type TouchableRippleProps = PressableProps & {
+    rippleColor?: string;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+
+const TouchableRipple: React.FC<TouchableRippleProps> = ({
+    rippleColor = '#b6b6b681',
+    style,
+    children,
+    ...props
+}) => {
+
+    const positionX = useSharedValue(0);
+    const positionY = useSharedValue(0);
+    const overlayHeight = useSharedValue(0);
+    const overlayWidth = useSharedValue(0);
+    const scale = useSharedValue(0);
+    const opacity = useSharedValue(1);
+
+    const STYLES = StyleSheet.create({
+        OVERLAY: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: -1
+        }
+    });
+
+    const effectAnimatedStyle = useAnimatedStyle(() => {
+        const radius = Math.sqrt(overlayWidth.value ** 2 + overlayHeight.value ** 2);
+        return {
+            height: radius * 2,
+            width: radius * 2,
+            opacity: opacity.value,
+            borderRadius: radius,
+            backgroundColor: rippleColor,
+            transform: [
+                { translateX: positionX.value - radius },
+                { translateY: positionY.value - radius },
+                {
+                    scale: scale.value
+                }
+            ]
+        }
+    });
+
+    const onGesturePress = !props.disabled ? Gesture.Tap().runOnJS(true).onTouchesDown(({ allTouches }: { allTouches: any }) => {
+        positionX.value = allTouches[0].x;
+        positionY.value = allTouches[0].y;
+        opacity.value = 1;
+        scale.value = 0;
+        scale.value = withTiming(1, { duration: 600 });
+    }).onTouchesUp(() => {
+        opacity.value = withTiming(0, { duration: 800 });
+    }).onTouchesCancelled(() => {
+        opacity.value = withTiming(0, { duration: 800 });
+    }) : Gesture.Simultaneous();
+
+
+    return (<>
+        <GestureHandlerRootView style={{ width: '100%' }}>
+            <GestureDetector gesture={onGesturePress}>
+                <Pressable
+                    {...props}
+                >
+                    <StyledView
+                        overflow='hidden'
+                        onLayout={({ nativeEvent: { layout: { height, width } } }) => {
+                            overlayHeight.value = height;
+                            overlayWidth.value = width;
+                        }}
+                        style={style}
+                    >
+                        {children}
+                        <Animated.View style={[STYLES.OVERLAY, effectAnimatedStyle]} />
+                    </StyledView>
+                </Pressable>
+            </GestureDetector>
+        </GestureHandlerRootView>
+    </>);
+};
+export default TouchableRipple;
+export type { TouchableRippleProps };