create-rn-clean-architecture 1.0.0

package/templates/screens/ProfileScreen.tsx.template

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { styles } from '../../styles/profile/profile.styles';
+
+const ProfileScreen = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Profile Screen</Text>
+        <Text style={styles.subtitle}>Manage your profile here</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default ProfileScreen;

package/templates/screens/SettingsScreen.tsx.template

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { styles } from '../../styles/settings/settings.styles';
+
+const SettingsScreen = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Settings Screen</Text>
+        <Text style={styles.subtitle}>App settings and preferences</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default SettingsScreen;

package/templates/screens/SplashScreen.tsx.template

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useSplashNavigation } from '../../hooks/splash/useSplashNavigation';
+import { styles } from '../../styles/splash/splash.styles';
+
+const SplashScreen = () => {
+  useSplashNavigation();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Welcome</Text>
+        <Text style={styles.subtitle}>Your App Name</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default SplashScreen;

package/templates/styles/home.styles.ts.template

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../../constants/styles/COLORS';
+import { SIZINGS } from '../../constants/sizings/SIZINGS';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.colors.background,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SIZINGS.spacing.lg,
+  },
+  title: {
+    fontSize: SIZINGS.fontSizings.large_4,
+    fontWeight: 'bold',
+    color: COLORS.colors.text,
+    marginBottom: SIZINGS.spacing.sm,
+  },
+  subtitle: {
+    fontSize: SIZINGS.fontSizings.medium,
+    color: COLORS.colors.textSecondary,
+  },
+});

package/templates/styles/profile.styles.ts.template

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../../constants/styles/COLORS';
+import { SIZINGS } from '../../constants/sizings/SIZINGS';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.colors.background,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SIZINGS.spacing.lg,
+  },
+  title: {
+    fontSize: SIZINGS.fontSizings.large_4,
+    fontWeight: 'bold',
+    color: COLORS.colors.text,
+    marginBottom: SIZINGS.spacing.sm,
+  },
+  subtitle: {
+    fontSize: SIZINGS.fontSizings.medium,
+    color: COLORS.colors.textSecondary,
+  },
+});

package/templates/styles/settings.styles.ts.template

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../../constants/styles/COLORS';
+import { SIZINGS } from '../../constants/sizings/SIZINGS';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.colors.background,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: SIZINGS.spacing.lg,
+  },
+  title: {
+    fontSize: SIZINGS.fontSizings.large_4,
+    fontWeight: 'bold',
+    color: COLORS.colors.text,
+    marginBottom: SIZINGS.spacing.sm,
+  },
+  subtitle: {
+    fontSize: SIZINGS.fontSizings.medium,
+    color: COLORS.colors.textSecondary,
+  },
+});

package/templates/styles/splash.styles.ts.template

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '../../constants/styles/COLORS';
+import { SIZINGS } from '../../constants/sizings/SIZINGS';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.colors.primary,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: SIZINGS.fontSizings.large_6,
+    fontWeight: 'bold',
+    color: COLORS.colors.white,
+    marginBottom: SIZINGS.spacing.md,
+  },
+  subtitle: {
+    fontSize: SIZINGS.fontSizings.large,
+    color: COLORS.colors.white,
+  },
+});

package/templates/types/Type.ts.template

@@ -0,0 +1,15 @@
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+export type Navigation = NativeStackNavigationProp<STACK_NAVIGATOR_PARAMS>;
+
+export type STACK_NAVIGATOR_PARAMS = {
+  Splash: undefined;
+  Home: undefined;
+  BottomTab: undefined;
+};
+
+export type BOTTOM_TAB_NAVIGATOR_PARAMS = {
+  Home: undefined;
+  Profile: undefined;
+  Settings: undefined;
+};

package/templates/utils/Util.ts.template

@@ -0,0 +1,6 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BOTTOM_TAB_NAVIGATOR_PARAMS, STACK_NAVIGATOR_PARAMS } from '../types/Type';
+
+export const Stack = createNativeStackNavigator<STACK_NAVIGATOR_PARAMS>();
+export const Tab = createBottomTabNavigator<BOTTOM_TAB_NAVIGATOR_PARAMS>();