@highbeek/create-rnstarterkit 1.0.1-beta.0 → 1.0.1-beta.1

package/dist/src/generators/appGenerator.js

@@ -18,6 +18,9 @@ async function generateApp(options) {
         filter: (src) => shouldCopyPath(src, templatePath),
     });
     await replaceProjectName(targetPath, projectName);
+    if (platform === "React Native CLI") {
+        await configureCliNativeProjectNames(targetPath, projectName);
+    }
     await createStandardStructure(targetPath, platform);
     if (auth) {
         const authFolder = state === "Redux Toolkit"
@@ -102,6 +105,59 @@ async function replaceProjectName(dir, projectName) {
         }
     }
 }
+function toNativeAppName(projectName) {
+    const cleaned = projectName
+        .replace(/[^a-zA-Z0-9]+/g, " ")
+        .trim()
+        .split(/\s+/)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+        .join("");
+    const fallback = cleaned || "App";
+    return /^\d/.test(fallback) ? `App${fallback}` : fallback;
+}
+function toAndroidPackageSegment(projectName) {
+    const cleaned = projectName.toLowerCase().replace(/[^a-z0-9]+/g, "");
+    const fallback = cleaned || "app";
+    return /^\d/.test(fallback) ? `app${fallback}` : fallback;
+}
+async function replaceInTextFiles(dir, replacements) {
+    const files = await fs_extra_1.default.readdir(dir);
+    for (const file of files) {
+        const filePath = path_1.default.join(dir, file);
+        const stat = await fs_extra_1.default.stat(filePath);
+        if (stat.isDirectory()) {
+            await replaceInTextFiles(filePath, replacements);
+            continue;
+        }
+        if (!isTextFile(filePath))
+            continue;
+        let content = await fs_extra_1.default.readFile(filePath, "utf8");
+        for (const [pattern, replacement] of replacements) {
+            content = content.replace(pattern, replacement);
+        }
+        await fs_extra_1.default.writeFile(filePath, content, "utf8");
+    }
+}
+async function renameIfExists(fromPath, toPath) {
+    if (!(await fs_extra_1.default.pathExists(fromPath)))
+        return;
+    await fs_extra_1.default.move(fromPath, toPath, { overwrite: true });
+}
+async function configureCliNativeProjectNames(targetPath, projectName) {
+    const nativeAppName = toNativeAppName(projectName);
+    const androidPackageSegment = toAndroidPackageSegment(projectName);
+    await replaceInTextFiles(targetPath, [
+        [/BaseApp/g, nativeAppName],
+        [/com\.baseapp/g, `com.${androidPackageSegment}`],
+    ]);
+    const iosPath = path_1.default.join(targetPath, "ios");
+    const androidJavaRoot = path_1.default.join(targetPath, "android", "app", "src", "main", "java");
+    await renameIfExists(path_1.default.join(iosPath, "BaseApp"), path_1.default.join(iosPath, nativeAppName));
+    await renameIfExists(path_1.default.join(iosPath, "BaseApp.xcodeproj"), path_1.default.join(iosPath, `${nativeAppName}.xcodeproj`));
+    await renameIfExists(path_1.default.join(iosPath, "BaseApp.xcworkspace"), path_1.default.join(iosPath, `${nativeAppName}.xcworkspace`));
+    await renameIfExists(path_1.default.join(iosPath, `${nativeAppName}.xcodeproj`, "xcshareddata", "xcschemes", "BaseApp.xcscheme"), path_1.default.join(iosPath, `${nativeAppName}.xcodeproj`, "xcshareddata", "xcschemes", `${nativeAppName}.xcscheme`));
+    await renameIfExists(path_1.default.join(androidJavaRoot, "com", "baseapp"), path_1.default.join(androidJavaRoot, "com", androidPackageSegment));
+}
 async function installDependencies(targetPath) {
     console.log("📦 Installing dependencies...");
     try {
@@ -496,8 +552,9 @@ export default function RootLayout() {
 `,
             indexRoute: `import React from "react";
 import { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { useAuthStore } from "../store/authStore";
 
 export default function Index() {
@@ -511,9 +568,9 @@ export default function Index() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -521,8 +578,9 @@ export default function Index() {
 }
 `,
             authLayout: `import React, { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Stack } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useAuthStore } from "../../store/authStore";
 
 export default function AuthLayout() {
@@ -536,9 +594,9 @@ export default function AuthLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -553,8 +611,9 @@ export default function AuthLayout() {
 }
 `,
             tabsLayout: `import React, { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Tabs } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useAuthStore } from "../../store/authStore";
 
 export default function TabsLayout() {
@@ -568,9 +627,9 @@ export default function TabsLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -604,8 +663,9 @@ export default function RootLayout() {
 }
 `,
         indexRoute: `import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { AuthContext } from "../context/AuthContext";
 
 export default function Index() {
@@ -613,9 +673,9 @@ export default function Index() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -623,8 +683,9 @@ export default function Index() {
 }
 `,
         authLayout: `import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Stack } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { AuthContext } from "../../context/AuthContext";
 
 export default function AuthLayout() {
@@ -632,9 +693,9 @@ export default function AuthLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -649,8 +710,9 @@ export default function AuthLayout() {
 }
 `,
         tabsLayout: `import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { Redirect, Tabs } from "expo-router";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { AuthContext } from "../../context/AuthContext";
 
 export default function TabsLayout() {
@@ -658,9 +720,9 @@ export default function TabsLayout() {
 
   if (!isHydrated) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
@@ -680,7 +742,7 @@ export default function TabsLayout() {
 function getExpoAuthRouteFiles(state) {
     const registerRedux = `import React, { useState } from "react";
 import { Button, Text, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useDispatch } from "react-redux";
 import { registerApi } from "../../api";
 import { login } from "../../store/authSlice";
@@ -702,7 +764,7 @@ export default function RegisterScreen() {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -739,13 +801,13 @@ export default function RegisterScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Register" onPress={() => void handleRegister()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `;
     const registerZustand = `import React, { useState } from "react";
 import { Button, Text, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { registerApi } from "../../api";
 import { useAuthStore } from "../../store/authStore";
 
@@ -766,7 +828,7 @@ export default function RegisterScreen() {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -803,13 +865,13 @@ export default function RegisterScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Register" onPress={() => void handleRegister()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `;
     const registerContext = `import React, { useContext, useState } from "react";
 import { Button, Text, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { registerApi } from "../../api";
 import { AuthContext } from "../../context/AuthContext";
 
@@ -830,7 +892,7 @@ export default function RegisterScreen() {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -867,31 +929,31 @@ export default function RegisterScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Register" onPress={() => void handleRegister()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `;
     const profile = `import React from "react";
 import { Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 
 export default function ProfileScreen() {
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <Text>ProfileScreen</Text>
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `;
     const settings = `import React from "react";
 import { Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 
 export default function SettingsScreen() {
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <Text>SettingsScreen</Text>
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `;
@@ -899,7 +961,7 @@ export default function SettingsScreen() {
         return {
             login: `import React, { useState } from "react";
 import { Button, Text, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useDispatch } from "react-redux";
 import { loginApi } from "../../api";
 import { login } from "../../store/authSlice";
@@ -921,7 +983,7 @@ export default function LoginScreen() {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -958,14 +1020,14 @@ export default function LoginScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `,
             register: registerRedux,
             home: `import React from "react";
 import { Button, Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useDispatch } from "react-redux";
 import { logout } from "../../store/authSlice";
 
@@ -973,10 +1035,10 @@ export default function HomeScreen() {
   const dispatch = useDispatch();
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => dispatch(logout())} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `,
@@ -988,7 +1050,7 @@ export default function HomeScreen() {
         return {
             login: `import React, { useState } from "react";
 import { Button, Text, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { loginApi } from "../../api";
 import { useAuthStore } from "../../store/authStore";
 
@@ -1009,7 +1071,7 @@ export default function LoginScreen() {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -1046,24 +1108,24 @@ export default function LoginScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `,
             register: registerZustand,
             home: `import React from "react";
 import { Button, Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { useAuthStore } from "../../store/authStore";
 
 export default function HomeScreen() {
   const logout = useAuthStore((state) => state.logout);
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => void logout()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `,
@@ -1074,7 +1136,7 @@ export default function HomeScreen() {
     return {
         login: `import React, { useContext, useState } from "react";
 import { Button, Text, TextInput } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { loginApi } from "../../api";
 import { AuthContext } from "../../context/AuthContext";
 
@@ -1095,7 +1157,7 @@ export default function LoginScreen() {
   };
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -1132,24 +1194,24 @@ export default function LoginScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `,
         register: registerContext,
         home: `import React, { useContext } from "react";
 import { Button, Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import ScreenLayout from "../../components/layout/ScreenLayout";
 import { AuthContext } from "../../context/AuthContext";
 
 export default function HomeScreen() {
   const { logout } = useContext(AuthContext);
 
   return (
-    <SafeAreaView style={{ flex: 1, padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => void logout()} />
-    </SafeAreaView>
+    </ScreenLayout>
   );
 }
 `,

package/dist/templates/cli-base/App.tsx

@@ -1,44 +1,182 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
-
-import { NewAppScreen } from '@react-native/new-app-screen';
-import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
+import React, { useRef, useState } from "react";
+import {
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StatusBar,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
 import {
   SafeAreaProvider,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+  SafeAreaView,
+} from "react-native-safe-area-context";
 
-function App() {
-  const isDarkMode = useColorScheme() === 'dark';
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Start with a clean React Native CLI project structure.",
+    image: require("./assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Ready for Scale",
+    description: "Build faster with sensible architecture you can extend.",
+    image: require("./assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Use this onboarding as a placeholder for your product design.",
+    image: require("./assets/images/icon.png"),
+  },
+];
 
+function App() {
   return (
     <SafeAreaProvider>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
+      <StatusBar barStyle="dark-content" />
+      <WelcomeScreen />
     </SafeAreaProvider>
   );
 }
 
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
+function WelcomeScreen() {
+  const { width } = useWindowDimensions();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef<FlatList<Slide>>(null);
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
+      if (viewableItems[0]?.index != null) {
+        setActiveIndex(viewableItems[0].index);
+      }
+    },
+  ).current;
+
+  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 60 }).current;
+
+  const goNext = () => {
+    const nextIndex = activeIndex + 1;
+    if (nextIndex < slides.length) {
+      listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+    }
+  };
+
+  const isLastSlide = activeIndex === slides.length - 1;
 
   return (
-    <View style={styles.container}>
-      <NewAppScreen
-        templateFileName="App.tsx"
-        safeAreaInsets={safeAreaInsets}
+    <SafeAreaView style={styles.safeArea}>
+      <FlatList
+        ref={listRef}
+        data={slides}
+        horizontal
+        pagingEnabled
+        bounces={false}
+        keyExtractor={(item) => item.id}
+        showsHorizontalScrollIndicator={false}
+        renderItem={({ item }) => (
+          <View style={[styles.slide, { width }]}>
+            <Image source={item.image} style={styles.image} resizeMode="contain" />
+            <Text style={styles.title}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+          </View>
+        )}
+        onViewableItemsChanged={onViewableItemsChanged}
+        viewabilityConfig={viewabilityConfig}
       />
-    </View>
+
+      <View style={styles.footer}>
+        <View style={styles.dotsRow}>
+          {slides.map((slide, index) => (
+            <View
+              key={slide.id}
+              style={[styles.dot, index === activeIndex && styles.dotActive]}
+            />
+          ))}
+        </View>
+
+        <Pressable style={styles.button} onPress={goNext}>
+          <Text style={styles.buttonLabel}>{isLastSlide ? "Get Started" : "Next"}</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  safeArea: {
+    flex: 1,
+    backgroundColor: "#F7F7F9",
+  },
+  slide: {
     flex: 1,
+    paddingHorizontal: 24,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    width: 220,
+    height: 220,
+    marginBottom: 28,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: "#4B5563",
+    textAlign: "center",
+    maxWidth: 320,
+  },
+  footer: {
+    paddingHorizontal: 24,
+    paddingBottom: 28,
+    gap: 20,
+  },
+  dotsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: "#D1D5DB",
+  },
+  dotActive: {
+    width: 24,
+    backgroundColor: "#111827",
+  },
+  button: {
+    height: 52,
+    borderRadius: 12,
+    backgroundColor: "#111827",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
   },
 });