@funtools/create-react-native-app 1.1.3 → 1.1.5

package/index.js

@@ -1,10 +1,9 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 import { fileURLToPath } from "url";
 import path from "path";
 import { execSync } from "child_process";
 import fs from "fs";
-import { rm, cp } from "fs/promises";
 import prompts from "prompts";
 
 const __filename = fileURLToPath(import.meta.url);
@@ -14,19 +13,17 @@ let appName = "MyApp";
 
 try {
     console.log("Welcome to @funtools");
-    console.log('Thanks for using @funtools/create-react-native-app@1.1.3');
+    console.log('Thanks for using @funtools/create-react-native-app@1.1.4');
 
     await getAppName();
 
     initApp();
-
-    await initTemplates();
-
+    initTemplates();
     installDependencies();
 
     console.log("✅ App setup complete");
     process.exit(0);
-} catch (e) {
+} catch (error) {
     console.error("❌ Failed to create app");
     console.error(error);
     process.exit(1);
@@ -63,12 +60,12 @@ function initApp() {
 }
 
 
-async function initTemplates() {
+function initTemplates() {
     console.log("Initializing templates...");
 
-    await rm(path.join(process.cwd(), 'App.tsx'), { recursive: true, force: true });
+    fs.unlinkSync(path.join(process.cwd(), 'App.tsx'));
 
-    await cp(path.join(__dirname, `templates/base/files`), process.cwd(), {
+    fs.cpSync(path.join(__dirname, `templates/base/files`), process.cwd(), {
         recursive: true,
         force: true,
     });

package/package.json

@@ -1,22 +1,16 @@
 {
     "name": "@funtools/create-react-native-app",
     "description": "Create a React Native app with preconfigured setup",
-    
-    "version": "1.1.3",
-    
+    "version": "1.1.5",
     "type": "module",
-    
     "license": "MIT",
-    
     "bin": {
         "create-react-native-app": "index.js"
     },
-
     "files": [
         "index.js",
-        "initApp.js"
+        "templates"
     ],
-    
     "dependencies": {
         "prompts": "^2.4.2"
     }

package/templates/base/dependencies.json

@@ -0,0 +1,39 @@
+{
+    "dependencies": [
+        "@funtools/store",
+        "@react-navigation/native",
+        "@react-navigation/native-stack",
+        "lucide-react-native",
+        "nativewind",
+        "react",
+        "react-native",
+        "react-native-gesture-handler",
+        "react-native-safe-area-context",
+        "react-native-screens",
+        "react-native-svg"
+    ],
+    
+    "devDependencies": [
+        "@babel/core",
+        "@babel/preset-env",
+        "@babel/runtime",
+        "@react-native-community/cli",
+        "@react-native-community/cli-platform-android",
+        "@react-native-community/cli-platform-ios",
+        "@react-native/babel-preset",
+        "@react-native/eslint-config",
+        "@react-native/metro-config",
+        "@react-native/typescript-config",
+        "@types/jest",
+        "@types/react",
+        "@types/react-test-renderer",
+        "babel-plugin-module-resolver",
+        "eslint",
+        "jest",
+        "prettier",
+        "react-native-svg-transformer",
+        "react-test-renderer",
+        "tailwindcss",
+        "typescript"
+    ]
+}

package/templates/base/files/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
+  plugins: [
+    [
+      'module-resolver', {
+        alias: { '@': './src' },
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      }
+    ],
+  ],
+};

package/templates/base/files/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/base/files/index.js

@@ -0,0 +1,6 @@
+import { AppRegistry } from 'react-native';
+import { name as appName } from './app.json';
+import App from './src/App';
+import './global.css';
+
+AppRegistry.registerComponent(appName, () => App);

package/templates/base/files/metro.config.js

@@ -0,0 +1,18 @@
+const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+ 
+const config = mergeConfig(defaultConfig, {
+  /* your config */
+  transformer: {
+    babelTransformerPath: require.resolve("react-native-svg-transformer")
+  },
+  resolver: {
+    assetExts: assetExts.filter((ext) => ext !== "svg"),
+    sourceExts: [...sourceExts, "svg"]
+  }
+});
+ 
+module.exports = withNativeWind(config, { input: "./global.css" });

package/templates/base/files/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/templates/base/files/react-native.config.js

@@ -0,0 +1,4 @@
+// react-native.config.js
+module.exports = {
+  assets: ['./src/Shared/Assets/Fonts'],
+};

package/templates/base/files/src/App.tsx

@@ -0,0 +1,16 @@
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { AppNavigationContainer } from './Navigation';
+import ThemeView from './Shared/Stores/Theme/Components/ThemeView';
+
+export default function App() {
+  return (
+    <GestureHandlerRootView className='flex-1' >
+      <SafeAreaProvider>
+        <ThemeView className='flex-1 w-full h-full' >
+          <AppNavigationContainer/>
+        </ThemeView>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}

package/templates/base/files/src/Navigation/NavigationContainer/App.tsx

@@ -0,0 +1,16 @@
+import {
+  createNavigationContainerRef,
+  NavigationContainer,
+} from '@react-navigation/native';
+import RootStackNavigator from '../StackNavigators/Root';
+import { RootStackParamList } from '../StackNavigators/Root/types';
+
+export const navigationRef = createNavigationContainerRef<RootStackParamList>();
+
+export default function AppNavigationContainer() {
+  return (
+    <NavigationContainer ref={navigationRef}>
+      <RootStackNavigator />
+    </NavigationContainer>
+  );
+}

package/templates/base/files/src/Navigation/StackNavigators/Root/index.tsx

@@ -0,0 +1,23 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { RootStackParamList } from './types';
+import HomeScreen from '@/Screens/Home';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+const screens: Array<Parameters<typeof Stack.Screen>[0]> = [
+    { name: 'Home', component: HomeScreen },
+];
+
+export default function RootStackNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      {screens.map((screen, index) => (
+        <Stack.Screen key={index} {...screen} />
+      ))}
+    </Stack.Navigator>
+  );
+}

package/templates/base/files/src/Navigation/StackNavigators/Root/types.ts

@@ -0,0 +1,5 @@
+import { NavigatorScreenParams } from "@react-navigation/native"
+
+export type RootStackParamList = {
+    Home: undefined;
+}

package/templates/base/files/src/Navigation/index.ts

@@ -0,0 +1,2 @@
+export { default as AppNavigationContainer } from './NavigationContainer/App';
+export { navigationRef } from './NavigationContainer/App'

package/templates/base/files/src/Screens/Home.tsx

@@ -0,0 +1,10 @@
+import { ThemeText, ThemeView } from "@/Shared/Stores/Theme/Components";
+
+
+export default function HomeScreen() {
+    return (
+        <ThemeView>
+            <ThemeText>Home</ThemeText>
+        </ThemeView>    
+    )
+}

package/templates/base/files/src/Shared/Components/Core/Icon.tsx

@@ -0,0 +1,24 @@
+import * as icons from 'lucide-react-native/icons';
+import { LucideProps } from "lucide-react-native";
+import { useThemeStore } from "../../Stores/Theme";
+import { ColorStates } from '../../Stores/Theme/types';
+
+
+export type IconName = keyof typeof icons;
+
+export type IconProps = LucideProps & {
+  name: IconName,
+  
+  size?: number,
+  color?: ColorStates,
+  customColor?: string,
+}
+
+export default function Icon({name, size=16, color='text', customColor, ...props}: IconProps){
+
+  const colors = useThemeStore(states => customColor ?? states.colors[color])
+
+  const LucideIcon = icons[name];
+
+  return <LucideIcon {...props} color={colors} size={size} />;
+}

package/templates/base/files/src/Shared/Components/Core/Modals/CenterModal.tsx

@@ -0,0 +1,134 @@
+import { Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState } from "react";
+import { Animated, Modal, ModalProps, PanResponder, useAnimatedValue, useWindowDimensions } from "react-native";
+import RippleContainer from "../RippleContainer";
+import ThemeView, { ThemeViewProps } from "../../../Stores/Theme/Components/ThemeView";
+import { useThemeStore } from "../../../Stores/Theme";
+import { ColorStates } from "../../../Stores/Theme/types";
+
+
+
+export type CenterModalProps = Omit<ModalProps, 'animationType'> & {
+    children: ReactNode,
+    visible: boolean,
+    setVisible: Dispatch<SetStateAction<boolean>>,
+    preventCloseRequest?: boolean,
+    containerProps?: ThemeViewProps,
+    backdropColor?: ColorStates
+}
+
+
+export default function CenterModal({children, visible, setVisible, preventCloseRequest=false, onRequestClose, style, containerProps, backdropColor: backdropVariant='text', ...props}: CenterModalProps) {
+
+    const backdropColor = useThemeStore(states => states.colors[backdropVariant].replace(')', ', 0.8)'));
+
+    const {width: windowWidth, height: windowHeight} = useWindowDimensions();
+
+    const [show, setShow] = useState(visible);
+    
+    const animatedValue = useAnimatedValue(0);
+
+    const translate = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
+
+    const {panHandlers} = useRef(PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            return Math.abs(gestureState.dy) > 5;
+        },
+
+        onPanResponderTerminationRequest: () => false,
+
+        onPanResponderMove: (_, {dx, dy}) => {
+            translate.setValue({x: dx, y: dy});
+        },
+
+        onPanResponderRelease: (_, {vx, vy, dx, dy}) => {
+            const isNearEdge = [
+                Math.abs(dx) > windowWidth * 0.4, 
+                Math.abs(dy) > windowHeight * 0.4
+            ].some(Boolean);
+            
+            const isMovingFast = [Math.abs(vx) > 2, Math.abs(vy) > 2].some(Boolean);
+
+            if((isNearEdge || isMovingFast) && !preventCloseRequest) {
+                return setVisible(false);
+            }
+
+            Animated.spring(translate, {
+                toValue: {x: 0, y: 0},
+                bounciness: 12,
+                useNativeDriver: true
+            }).start()
+        }
+
+    })).current;
+
+    function handleClose() {
+        setTimeout(() => setShow(false), 150)
+
+        Animated.spring(animatedValue, {
+            toValue: 0,
+            bounciness: 12,
+            useNativeDriver: true
+        }).start()
+    }
+
+    function handleOnRequestClose() {
+        if(preventCloseRequest) return;
+        
+        setVisible(false);
+    }
+
+    useEffect(() => {        
+        if(visible){
+            setShow(true);
+            translate.setValue({x: 0, y: 0});
+            
+            Animated.spring(animatedValue, {
+                toValue: 1,
+                bounciness: 12,
+                useNativeDriver: true
+            }).start()
+        } else {
+            handleClose();
+        }
+    }, [visible])
+
+    
+    return (
+        <Modal {...props} 
+            visible={show}
+            transparent
+
+            onRequestClose={handleOnRequestClose}
+        >
+            <Animated.View className="flex-1 w-full h-full items-center justify-center" 
+                style={{
+                    opacity: animatedValue,
+                    backgroundColor: backdropColor
+                }}
+            >
+                <RippleContainer className="flex-1 w-full" onPress={handleOnRequestClose} rippleOpacity={0.2} />
+                
+                <Animated.View {...panHandlers}
+                    className={'w-full p-2 relative'}
+                    style={{
+                        opacity: animatedValue,
+                        transform: [
+                            {translateX: translate.x}, {translateY: translate.y}, 
+                            {scale: animatedValue.interpolate({inputRange: [0, 1], outputRange: [0.4, 1]})}
+                        ]
+                    }}
+                >
+                    <ThemeView
+                        {...containerProps}
+                        style={[{ borderRadius: 12, padding: 4 }, style, {overflow: 'hidden', width: '100%'}]} 
+                    >
+                        {children}
+                    </ThemeView>
+                </Animated.View>
+                
+                <RippleContainer className="flex-1 w-full" onPress={handleOnRequestClose} rippleOpacity={0.2} />
+            </Animated.View>
+        </Modal>
+    )
+}

package/templates/base/files/src/Shared/Components/Core/Modals/index.tsx

@@ -0,0 +1 @@
+export {default as CenterModal} from './CenterModal';

package/templates/base/files/src/Shared/Components/Core/RippleContainer.tsx

@@ -0,0 +1,91 @@
+import { ReactNode, useRef, useState } from "react";
+import { useThemeStore } from "../../Stores/Theme";
+import { ColorStates } from "../../Stores/Theme/types";
+import { Animated, GestureResponderEvent, Pressable, PressableProps, useAnimatedValue, View, ViewStyle } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+
+export type RippleContainerProps = PressableProps & {
+  children?: ReactNode,
+  color?: ColorStates
+  style?: ViewStyle
+  rippleOpacity?: number, 
+  rippleColor?: string,
+  rippleScale?: number,
+  rippleCount?: number,
+  duration?: number,
+}
+
+
+export default function RippleContainer({children, style, onPress, color='text', rippleColor, rippleOpacity=0.4, rippleScale=1, duration=300, rippleCount=3, ...props}: RippleContainerProps) {
+
+  const {top, left} = useSafeAreaInsets();
+  
+  const rgb = useThemeStore(s => s.colors[color]);
+  rippleColor ??= `rgb(${rgb})`;
+    
+  const [position, setPosition] = useState<{top: number, left: number}>({top: 0, left: 0});
+
+  const animatedValue = useAnimatedValue(0);
+
+  const button = useRef<View>(null);
+
+  function handleOnPress(event: GestureResponderEvent) {
+    const {pageX, pageY} = event.nativeEvent;
+    
+    button.current?.measureInWindow((x, y, w) => {
+      x += left; 
+      y += top;
+      
+      setPosition({top: pageY - y - w / 2, left: pageX - x - w / 2})
+    })
+
+    startAnimation();
+    
+    onPress?.(event);
+  }
+
+
+  function startAnimation() {
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    }).start(() => {
+      animatedValue.setValue(0);
+    })
+  }
+
+
+  return (
+    <Pressable ref={button} {...props} onPress={handleOnPress} style={[style, { overflow: 'hidden', position: 'relative' }]}>
+      <View className="absolute aspect-square" style={{...position, width: '100%'}} >
+        {
+          [...new Array(Math.min(rippleCount, 5))].map((_, index) => (
+            <Animated.View key={index}
+              className={'absolute w-full aspect-square rounded-full'}
+              style={{ 
+                backgroundColor: rippleColor,
+                
+
+                opacity: animatedValue.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [rippleOpacity * ((rippleCount - index) / rippleCount), 0],
+                }),
+
+                transform: [{
+                  scale: animatedValue.interpolate({
+                    inputRange: [0, 0.1, 1], 
+                    outputRange: [0, rippleScale * 0.1, rippleScale + (index * 0.1)]
+                  })
+                }]
+              }}
+            />
+          ))
+        }
+      </View>
+
+      {children}
+    </Pressable>
+  );
+}

package/templates/base/files/src/Shared/Components/Core/ShowWhen.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react"
+
+type ShowWhenProps = {
+  when: boolean
+  children: ReactNode
+  otherwise?: ReactNode
+}
+
+export default function ShowWhen({ when, children, otherwise=null }: ShowWhenProps) {
+  return when ? children: otherwise
+}

package/templates/base/files/src/Shared/Components/UI/Buttons/Button.tsx

@@ -0,0 +1,53 @@
+import RippleContainer, { RippleContainerProps } from '@/Shared/Components/Core/RippleContainer';
+import Icon, { IconName } from '@/Shared/Components/Core/Icon';
+import { ButtonSize, ButtonVariants } from './Utils/types';
+import { RANGE } from '@/Shared/Types/number.type';
+import { getButtonStyle } from './Utils/functions';
+import { BUTTON_LAYOUT } from './Utils/constance';
+import ThemeText from '@/Shared/Stores/Theme/Components/ThemeText';
+import ShowWhen from '@/Shared/Components/Core/ShowWhen';
+
+type ButtonProp = Omit<RippleContainerProps, 'rippleColor' | 'rippleScale'> & {
+  title: string;
+
+  startIcon?: IconName;
+  endIcon?: IconName;
+  variant?: ButtonVariants;
+  size?: ButtonSize;
+  rounded?: number | `${RANGE<0, 100>}%`;
+};
+
+
+export default function Button({ title, startIcon, endIcon, variant = 'solid', color = 'primary', size = 'md', rounded, style, ...props}: ButtonProp) {
+  
+  const { color: textColor, borderColor, backgroundColor } = getButtonStyle(variant, color);
+
+  const {fontSize, ...containerStyle} = {
+    ...BUTTON_LAYOUT[size], 
+    ...rounded !== undefined ? {borderRadius: rounded} : {}
+  };
+
+  return (
+    <RippleContainer
+      {...props}
+      rippleColor={textColor}
+      rippleScale={2}
+      
+      style={{ 
+        backgroundColor, borderColor, flexDirection: 'row', gap: Math.floor(fontSize / 2), alignItems: 'center', justifyContent: 'center',
+        ...containerStyle, 
+        ...style, 
+      }}
+    >
+      <ShowWhen when={!!startIcon}>
+        <Icon name={startIcon as IconName} customColor={textColor} />
+      </ShowWhen>
+
+      <ThemeText textColor={textColor} style={{fontSize}} >{title}</ThemeText>
+      
+      <ShowWhen when={!!endIcon} >
+        <Icon name={endIcon as IconName} customColor={textColor} />
+      </ShowWhen>
+    </RippleContainer>
+  );
+}

package/templates/base/files/src/Shared/Components/UI/Buttons/IconButton.tsx

@@ -0,0 +1,32 @@
+import { RANGE } from "../../../Types/number.type"
+import Icon, { IconName } from "../../Core/Icon"
+import RippleContainer, { RippleContainerProps } from "../../Core/RippleContainer"
+import { BUTTON_LAYOUT } from "./Utils/constance"
+import { getButtonStyle } from "./Utils/functions"
+import { ButtonSize, ButtonVariants } from "./Utils/types"
+
+
+export type IconButtonProps = RippleContainerProps & {
+    icon: IconName,
+    
+    variant?: ButtonVariants,
+    size?: number | ButtonSize,
+    rounded?: number | `${RANGE<0, 100>}%`
+}
+
+export default function IconButton({variant='soft', color='primary', icon, size='md', rounded='50%', ...props}: IconButtonProps) {
+
+    const {color: textColor, ...style} = getButtonStyle(variant, color);
+
+    const height = typeof size === 'number' ? size : BUTTON_LAYOUT[size].height;
+    const borderWidth = typeof size === 'number' ? 1 : BUTTON_LAYOUT[size].borderWidth;
+    return (
+        <RippleContainer {...props}
+        rippleScale={2}
+            rippleColor={textColor}
+            style={{...style, height, borderRadius: rounded, borderWidth, alignItems: 'center', justifyContent: 'center', aspectRatio: 1}}
+        >
+            <Icon customColor={textColor} name={icon} size={Math.floor(height * 0.6)} />
+        </RippleContainer>
+    )
+}

package/templates/base/files/src/Shared/Components/UI/Buttons/Utils/constance.ts

@@ -0,0 +1,39 @@
+import { ButtonLayout, ButtonSize } from "./types";
+
+export const BUTTON_LAYOUT: Record<ButtonSize, ButtonLayout> = {
+    'xs': {
+        height: 24,
+        borderRadius: 8,
+        paddingInline: 8,
+        fontSize: 10,
+        borderWidth: 1
+    },
+    'sm': {
+        height: 32,
+        borderRadius: 12,
+        paddingInline: 12,
+        fontSize: 14,
+        borderWidth: 1
+    },
+    'md': {
+        height: 40,
+        borderRadius: 14,
+        paddingInline: 14,
+        fontSize: 16,
+        borderWidth: 1
+    },
+    'lg': {
+        height: 48,
+        borderRadius: 16,
+        paddingInline: 16,
+        fontSize: 20,
+        borderWidth: 2
+    },
+    'xl': {
+        height: 56,
+        borderRadius: 18,
+        paddingInline: 18,
+        fontSize: 24,
+        borderWidth: 2
+    }
+}

package/templates/base/files/src/Shared/Components/UI/Buttons/Utils/functions.ts

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+import { useThemeStore } from "../../../../Stores/Theme";
+import { ColorStates } from "../../../../Stores/Theme/types";
+import { ButtonVariants } from "./types";
+
+export function getButtonStyle(variant: ButtonVariants, color: ColorStates) {
+    const {textColor, bgColor} = useThemeStore((states) => {
+        if(['text', 'bg'].includes(color ?? '')) {
+            return {
+                bgColor: states.colors[color],
+                textColor: states.colors[color === 'text' ? 'bg' : 'text']
+            }
+        }
+
+        return {
+            bgColor: states.colors[color],
+            textColor: 'rgb(255,255,255)'
+        }
+    })
+
+
+    const style = useMemo(() => ({
+        'solid': {
+            color: textColor,
+            backgroundColor: bgColor,
+            borderColor: bgColor,
+        },
+
+        'outlined': {
+            color: bgColor,
+            backgroundColor: 'transparent',
+            borderColor: bgColor,
+        },
+
+        'soft': {
+            color: bgColor,
+            backgroundColor: bgColor.replace(')', ', 0.2)'),
+            borderColor: bgColor.replace(')', ', 0.2)'),
+        },
+
+        'soft-outlined': {
+            color: bgColor,
+            backgroundColor: bgColor.replace(')', ', 0.2)'),
+            borderColor: bgColor
+        },
+
+        'text': {
+            color: bgColor,
+            backgroundColor: 'transparent',
+            borderColor: 'transparent',
+        }
+    }[variant]), [bgColor, textColor]);
+
+    return style;
+}

package/templates/base/files/src/Shared/Components/UI/Buttons/Utils/types.ts

@@ -0,0 +1,12 @@
+export type ButtonVariants = 'solid' | 'outlined' | 'soft' | 'soft-outlined' | 'text';
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+// add more according to need;
+export type ButtonLayout = {
+    height: number,
+    borderRadius: number,
+    paddingInline: number,
+    fontSize: number,
+    borderWidth: number
+}

package/templates/base/files/src/Shared/Components/UI/Buttons/index.ts

@@ -0,0 +1,2 @@
+export {default as Button} from './Button';
+export {default as IconButton} from './IconButton';

package/templates/base/files/src/Shared/Hooks/useUpdateEffect.ts

@@ -0,0 +1,14 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from "react";
+
+
+export default function useUpdateEffect(effect: EffectCallback, deps: DependencyList) {
+  const mountedRef = useRef(false);
+
+  useEffect(() => {
+    if (mountedRef.current) {
+      return effect();
+    }
+    
+    mountedRef.current = true;
+  }, deps);
+}

package/templates/base/files/src/Shared/Stores/Theme/Components/ThemeText.tsx

@@ -0,0 +1,22 @@
+import { Animated, TextProps } from "react-native";
+import { useThemeStore } from "..";
+import { ColorStates } from "../types";
+import { AnimatedInterpolValue } from "../../../Types/native.type";
+
+
+export type ThemeTextProps = TextProps & {
+    color?: ColorStates,
+    textColor?: string | AnimatedInterpolValue
+}
+
+export default function ThemeText({style, color: _color = 'text', textColor, className, ...props}: ThemeTextProps): React.JSX.Element {
+
+    const color = useThemeStore(states => textColor ?? states.colors[_color]);
+
+    return (
+        <Animated.Text {...props} 
+            style={[style, {color}]}
+            className={`font-regular ${className}`}
+        />
+    )
+}

package/templates/base/files/src/Shared/Stores/Theme/Components/ThemeView.tsx

@@ -0,0 +1,25 @@
+import { Animated, ViewProps } from "react-native";
+import { useThemeStore } from "..";
+import { ColorStates } from "../types";
+
+
+export type ThemeViewProps = ViewProps & {
+    color?: ColorStates,
+    backgroundColor?: string,
+    useWindBackground?: boolean
+}
+
+export default function ThemeView({style, color = 'bg', backgroundColor, useWindBackground=false, ...props}: ThemeViewProps): React.JSX.Element {
+
+    const {_backgroundColor} = useThemeStore(states => ({
+        _backgroundColor: states.colors[color]
+    }));
+
+    if(!backgroundColor) backgroundColor = _backgroundColor;
+
+    return (
+        <Animated.View {...props} 
+            style={[style, useWindBackground === false ? {backgroundColor} : null]}
+        />
+    )
+}

package/templates/base/files/src/Shared/Stores/Theme/Components/index.ts

@@ -0,0 +1,2 @@
+export { default as ThemeText } from "./ThemeText";
+export { default as ThemeView } from "./ThemeView";

package/templates/base/files/src/Shared/Stores/Theme/constance.ts

@@ -0,0 +1,25 @@
+import { Theme, ColorStates } from './types';
+
+export const _theme: Theme = 'light';
+
+export const _colors: Record<Theme, Record<ColorStates, string>> = {
+  light: {
+    text: 'rgb(0, 0, 0)',
+    bg: 'rgb(240, 242, 245)',
+
+    primary: 'rgb(40, 120, 255)',
+    error: 'rgb(245, 34, 45)',
+    warning: 'rgb(255, 184, 0)',
+    info: 'rgb(74, 108, 135)',
+  },
+
+  dark: {
+    text: 'rgb(240, 242, 245)',
+    bg: 'rgb(0, 0, 0)',
+
+    primary: 'rgb(40, 120, 255)',
+    error: 'rgb(245, 34, 45)',
+    warning: 'rgb(255, 184, 0)',
+    info: 'rgb(74, 108, 135)',
+  },
+};

package/templates/base/files/src/Shared/Stores/Theme/index.ts

@@ -0,0 +1,19 @@
+import { Theme } from './types';
+import { _colors, _theme } from './constance';
+import { createStore } from '@fun-tools/store';
+
+const { useStore, useHandlers } = createStore({
+  states: {
+    theme: _theme,
+    colors: _colors[_theme],
+  },
+
+  syncHandlers: {
+    toggleTheme(state) {
+      state.theme = state.theme === 'dark' ? 'light' : 'dark';
+      state.colors = _colors[state.theme];
+    },
+  },
+});
+
+export { useStore as useThemeStore, useHandlers as useThemeHandlers };

package/templates/base/files/src/Shared/Stores/Theme/types.ts

@@ -0,0 +1,3 @@
+export type Theme = 'light' | 'dark';
+
+export type ColorStates = 'text' | 'bg' | 'primary' | 'error' | 'info' | 'warning';

package/templates/base/files/src/Shared/Types/native.type.ts

@@ -0,0 +1,4 @@
+import { Animated } from "react-native";
+
+const interpol = new Animated.Value(0).interpolate;
+export type AnimatedInterpolValue = ReturnType<typeof interpol>;

package/templates/base/files/src/Shared/Types/number.type.ts

@@ -0,0 +1,8 @@
+export type FINITE_NUMBER<E extends number, A extends unknown[] = []> = (
+    A['length'] extends E ? A[number] | E : FINITE_NUMBER<E, [...A, A['length']]>
+)
+
+
+export type RANGE<S extends number, E extends number> = (
+    Exclude<FINITE_NUMBER<E>, FINITE_NUMBER<S>> | S
+)

package/templates/base/files/src/Shared/Types/svg.d.ts

@@ -0,0 +1,7 @@
+declare module '*.svg' {
+  import React from 'react';
+  import { SvgProps } from 'react-native-svg';
+
+  const content: React.FC<SvgProps>;
+  export default content;
+}

package/templates/base/files/tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      fontFamily: {
+        thin: ['Roboto-Thin'],
+        extralight: ['Roboto-ExtraLight'],
+        light: ['Roboto-Light'],
+        regular: ['Roboto-Regular'],
+        medium: ['Roboto-Medium'],
+        semibold: ['Roboto-SemiBold'],
+        bold: ['Roboto-Bold'],
+        extrabold: ['Roboto-ExtraBold'],
+      }
+    },
+  },
+  plugins: [],
+};

package/templates/base/files/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "types": ["jest"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "nativewind-env.d.ts",
+    "react-native.config.js"
+  ],
+  "exclude": ["**/node_modules", "**/Pods"]
+}