@highbeek/create-rnstarterkit 1.0.2-beta.7 → 1.1.1

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

@@ -1,9 +1,170 @@
-import { Text, View } from "react-native";
+import { router } from "expo-router";
+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 isLastSlide = activeIndex === slides.length - 1;
+
+  const goNext = () => {
+    if (isLastSlide) {
+      router.replace("/home");
+      return;
+    }
+    listRef.current?.scrollToIndex({ index: activeIndex + 1, animated: true });
+  };
 
-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/app.json

@@ -41,8 +41,7 @@
       ]
     ],
     "experiments": {
-      "typedRoutes": true,
-      "reactCompiler": true
+      "typedRoutes": true
     }
   }
 }

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 } 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";
 
@@ -7,22 +8,56 @@ export default function LoginScreen() {
   const { login } = useContext(AuthContext);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   const handleLogin = async () => {
-    const token = await loginApi(email, password);
-    await login(token);
+    try {
+      setError("");
+      const token = await loginApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
   };
 
   return (
-    <View style={{ padding: 20 }}>
-      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
       <TextInput
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
       />
+      {!!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 } 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";
 
@@ -7,22 +8,56 @@ export default function RegisterScreen() {
   const { login } = useContext(AuthContext);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   const handleRegister = async () => {
-    const token = await registerApi(email, password);
-    await login(token);
+    try {
+      setError("");
+      const token = await registerApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    }
   };
 
   return (
-    <View style={{ padding: 20 }}>
-      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+    <ScreenLayout>
+      <TextInput
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        autoCapitalize="none"
+        autoCorrect={false}
+        keyboardType="email-address"
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
+      />
       <TextInput
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
         secureTextEntry
+        placeholderTextColor="#888"
+        style={{
+          borderWidth: 1,
+          borderColor: "#ccc",
+          borderRadius: 8,
+          paddingHorizontal: 12,
+          paddingVertical: 10,
+          color: "#111",
+          marginBottom: 12,
+        }}
       />
+      {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Register" onPress={() => void handleRegister()} />
-    </View>
+    </ScreenLayout>
   );
 }

package/dist/templates/optional/auth-context/screens/SettingsScreen.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 SettingsScreen() {
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>This is the Settings Screen</Text>
-    </View>
+    </ScreenLayout>
   );
 }

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

@@ -0,0 +1,174 @@
+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 WelcomeScreenProps = {
+  onContinue: () => void;
+};
+
+type Slide = {
+  id: string;
+  title: string;
+  description: string;
+  image: ImageSourcePropType;
+};
+
+const slides: Slide[] = [
+  {
+    id: "1",
+    title: "Welcome to RN Starter Kit",
+    description: "Build faster with a clean, production-ready app foundation.",
+    image: require("../assets/images/react-logo.png"),
+  },
+  {
+    id: "2",
+    title: "Structure That Scales",
+    description: "Auth, state, and API setup are organized for real-world apps.",
+    image: require("../assets/images/partial-react-logo.png"),
+  },
+  {
+    id: "3",
+    title: "Make It Yours",
+    description: "Swap this welcome flow with your own brand and product journey.",
+    image: require("../assets/images/icon.png"),
+  },
+];
+
+export default function WelcomeScreen({ onContinue }: WelcomeScreenProps) {
+  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 });
+      return;
+    }
+    onContinue();
+  };
+
+  const isLastSlide = activeIndex === slides.length - 1;
+
+  return (
+    <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={handleNext}>
+          <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",
+  },
+});