@highbeek/create-rnstarterkit 1.0.2-beta.10 → 1.0.2-beta.12

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

@@ -1,44 +1,222 @@
-/**
- * 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";
+
+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() {
-  const isDarkMode = useColorScheme() === 'dark';
+  const [isOnboarded, setIsOnboarded] = useState(false);
 
   return (
     <SafeAreaProvider>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <AppContent />
+      <StatusBar barStyle="dark-content" />
+      {isOnboarded ? (
+        <HomeScreen />
+      ) : (
+        <WelcomeScreen onFinish={() => setIsOnboarded(true)} />
+      )}
     </SafeAreaProvider>
   );
 }
 
-function AppContent() {
-  const safeAreaInsets = useSafeAreaInsets();
+function WelcomeScreen({ onFinish }: { onFinish: () => void }) {
+  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 handleNext = () => {
+    const nextIndex = activeIndex + 1;
+    if (nextIndex < slides.length) {
+      listRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+    } else {
+      onFinish();
+    }
+  };
+
+  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={handleNext}>
+          <Text style={styles.buttonLabel}>{isLastSlide ? "Get Started" : "Next"}</Text>
+        </Pressable>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function HomeScreen() {
+  return (
+    <SafeAreaView style={homeStyles.container}>
+      <Text style={homeStyles.title}>Home</Text>
+      <Text style={homeStyles.subtitle}>
+        Replace this screen with your app content.
+      </Text>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  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",
+  },
+});
+
+const homeStyles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: "#F7F7F9",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#4B5563",
+    textAlign: "center",
   },
 });
 

package/dist/templates/cli-base/jest.config.js

@@ -1,3 +1,7 @@
 module.exports = {
   preset: 'react-native',
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|@react-native|@react-navigation|react-native-reanimated)/)',
+  ],
 };

package/dist/templates/cli-base/package.json

@@ -5,15 +5,17 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "lint": "eslint .",
     "start": "react-native start",
+    "lint": "eslint . --max-warnings 0",
+    "format": "prettier --write .",
+    "type-check": "tsc --noEmit",
     "test": "jest"
   },
   "dependencies": {
     "react": "19.2.3",
     "react-native": "0.84.0",
-    "@react-native/new-app-screen": "0.84.0",
-    "react-native-safe-area-context": "^5.5.2"
+    "react-native-safe-area-context": "^5.5.2",
+    "react-native-reanimated": "^3.17.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package/dist/templates/cli-base/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@react-native/typescript-config",
   "compilerOptions": {
+    "strict": true,
     "types": ["jest"]
   },
   "include": ["**/*.ts", "**/*.tsx"],

package/dist/templates/expo-base/app/_layout.tsx

@@ -1,9 +1,12 @@
 import { Stack } from "expo-router";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 export default function RootLayout() {
   return (
-    <Stack>
-      <Stack.Screen name="index" options={{ title: "Home" }} />
-    </Stack>
+    <SafeAreaProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ title: "Home" }} />
+      </Stack>
+    </SafeAreaProvider>
   );
 }

package/dist/templates/expo-base/app/index.tsx

@@ -1,9 +1,168 @@
-import { Text, View } from "react-native";
+import React, { useRef, useState } from "react";
+import {
+  FlatList,
+  Image,
+  ImageSourcePropType,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+  View,
+  ViewToken,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Kickstart your app with Expo and a clean production-ready baseline.",
+    image: require("../assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Built for Real Projects",
+    description: "State, auth, API layers, and folder structure are ready for scaling.",
+    image: require("../assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Customize and Ship",
+    description: "Replace this screen with your own brand and ship faster.",
+    image: require("../assets/images/icon.png"),
+  },
+];
+
+export default 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;
 
-export default function HomeScreen() {
   return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
-      <Text>Welcome to RN Starter Kit</Text>
-    </View>
+    <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 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({
+  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",
+  },
+});

package/dist/templates/expo-base/package.json

@@ -7,7 +7,9 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "expo lint"
+    "lint": "expo lint",
+    "format": "prettier --write .",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
@@ -40,7 +42,8 @@
     "@types/react": "~19.1.0",
     "typescript": "~5.9.2",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~10.0.0"
+    "eslint-config-expo": "~10.0.0",
+    "prettier": "^3.5.0"
   },
   "private": true
 }

package/dist/templates/optional/auth-context/components/layout/ScreenLayout.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
+
+type ScreenLayoutProps = {
+  children: React.ReactNode;
+  padded?: boolean;
+  centered?: boolean;
+  edges?: Edge[];
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function ScreenLayout({
+  children,
+  padded = true,
+  centered = false,
+  edges = ["top", "left", "right"],
+  style,
+}: ScreenLayoutProps) {
+  return (
+    <SafeAreaView
+      edges={edges}
+      style={[
+        styles.container,
+        padded && styles.padded,
+        centered && styles.centered,
+        style,
+      ]}
+    >
+      {children}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  padded: {
+    padding: 20,
+  },
+  centered: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/dist/templates/optional/auth-context/navigation/ProtectedStack.tsx

@@ -1,24 +1,52 @@
-import React, { useContext } from "react";
-import { ActivityIndicator, View } from "react-native";
+import React, { useContext, useEffect, useState } from "react";
+import { ActivityIndicator } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { AuthContext } from "../context/AuthContext";
 import LoginScreen from "../screens/LoginScreen";
 import RegisterScreen from "../screens/RegisterScreen";
+import WelcomeScreen from "../screens/WelcomeScreen";
 import BottomTabs from "./BottomTabs";
 
 const Stack = createNativeStackNavigator();
+const WELCOME_SEEN_KEY = "@rnskit_has_seen_welcome";
 
 export default function ProtectedStack() {
   const { token, isHydrated } = useContext(AuthContext);
+  const [showWelcome, setShowWelcome] = useState(false);
+  const [isCheckingWelcome, setIsCheckingWelcome] = useState(true);
 
-  if (!isHydrated) {
+  useEffect(() => {
+    const readWelcomeState = async () => {
+      try {
+        const seen = await AsyncStorage.getItem(WELCOME_SEEN_KEY);
+        setShowWelcome(seen !== "true");
+      } finally {
+        setIsCheckingWelcome(false);
+      }
+    };
+
+    void readWelcomeState();
+  }, []);
+
+  const handleWelcomeContinue = async () => {
+    await AsyncStorage.setItem(WELCOME_SEEN_KEY, "true");
+    setShowWelcome(false);
+  };
+
+  if (!isHydrated || isCheckingWelcome) {
     return (
-      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+      <ScreenLayout centered padded={false}>
         <ActivityIndicator />
-      </View>
+      </ScreenLayout>
     );
   }
 
+  if (showWelcome) {
+    return <WelcomeScreen onContinue={() => void handleWelcomeContinue()} />;
+  }
+
   return (
     <Stack.Navigator>
       {token ? (

package/dist/templates/optional/auth-context/screens/HomeScreen.tsx

@@ -1,14 +1,15 @@
 import React, { useContext } from "react";
-import { View, Text, Button } from "react-native";
+import { Text, Button } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { AuthContext } from "../context/AuthContext";
 
 export default function HomeScreen() {
   const { logout } = useContext(AuthContext);
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => void logout()} />
-    </View>
+    </ScreenLayout>
   );
 }

package/dist/templates/optional/auth-context/screens/LoginScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
-import { View, TextInput, Button, Text } from "react-native";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { AuthContext } from "../context/AuthContext";
 import { loginApi } from "../api";
 
@@ -20,7 +21,7 @@ export default function LoginScreen() {
   };
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -57,6 +58,6 @@ export default function LoginScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Login" onPress={() => void handleLogin()} />
-    </View>
+    </ScreenLayout>
   );
 }

package/dist/templates/optional/auth-context/screens/ProfileScreen.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { View, Text } from "react-native";
+import { Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 
 export default function ProfileScreen() {
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>This is the Profile Screen</Text>
-    </View>
+    </ScreenLayout>
   );
 }

package/dist/templates/optional/auth-context/screens/RegisterScreen.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
-import { View, TextInput, Button, Text } from "react-native";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { AuthContext } from "../context/AuthContext";
 import { registerApi } from "../api";
 
@@ -20,7 +21,7 @@ export default function RegisterScreen() {
   };
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -57,6 +58,6 @@ export default function RegisterScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Register" onPress={() => void handleRegister()} />
-    </View>
+    </ScreenLayout>
   );
 }