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

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",
+  },
+});

package/dist/templates/optional/auth-redux/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-redux/navigation/ProtectedStack.tsx

@@ -1,15 +1,52 @@
-import React from "react";
+import React, { 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 { useSelector } from "react-redux";
-import type { RootState } from "../store/store";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import LoginScreen from "../screens/LoginScreen";
 import RegisterScreen from "../screens/RegisterScreen";
+import WelcomeScreen from "../screens/WelcomeScreen";
+import type { RootState } from "../store/store";
 import BottomTabs from "./BottomTabs";
 
 const Stack = createNativeStackNavigator();
+const WELCOME_SEEN_KEY = "@rnskit_has_seen_welcome";
 
 export default function ProtectedStack() {
   const token = useSelector((state: RootState) => state.auth.token);
+  const [showWelcome, setShowWelcome] = useState(false);
+  const [isCheckingWelcome, setIsCheckingWelcome] = useState(true);
+
+  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 (isCheckingWelcome) {
+    return (
+      <ScreenLayout centered padded={false}>
+        <ActivityIndicator />
+      </ScreenLayout>
+    );
+  }
+
+  if (showWelcome) {
+    return <WelcomeScreen onContinue={() => void handleWelcomeContinue()} />;
+  }
 
   return (
     <Stack.Navigator>

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { View, Text, Button } from "react-native";
+import { Text, Button } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { useDispatch } from "react-redux";
 import { logout } from "../store/authSlice";
 
@@ -7,9 +8,9 @@ export default function HomeScreen() {
   const dispatch = useDispatch();
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <Text>Welcome Home!</Text>
       <Button title="Logout" onPress={() => dispatch(logout())} />
-    </View>
+    </ScreenLayout>
   );
 }

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

@@ -1,5 +1,6 @@
 import React, { 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 { useDispatch } from "react-redux";
 import { login } from "../store/authSlice";
 import { loginApi } from "../api";
@@ -21,7 +22,7 @@ export default function LoginScreen() {
   };
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -58,6 +59,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-redux/screens/ProfileScreen.tsx

@@ -1,14 +1,11 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
+import React from "react";
+import { Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 
-const ProfileScreen = () => {
+export default function ProfileScreen() {
   return (
-    <View>
+    <ScreenLayout>
       <Text>ProfileScreen</Text>
-    </View>
-  )
+    </ScreenLayout>
+  );
 }
-
-export default ProfileScreen
-
-const styles = StyleSheet.create({})

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

@@ -1,5 +1,6 @@
 import React, { 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 { useDispatch } from "react-redux";
 import { login } from "../store/authSlice";
 import { registerApi } from "../api";
@@ -21,7 +22,7 @@ export default function RegisterScreen() {
   };
 
   return (
-    <View style={{ padding: 20 }}>
+    <ScreenLayout>
       <TextInput
         placeholder="Email"
         value={email}
@@ -58,6 +59,6 @@ export default function RegisterScreen() {
       />
       {!!error && <Text style={{ color: "red", marginBottom: 8 }}>{error}</Text>}
       <Button title="Register" onPress={() => void handleRegister()} />
-    </View>
+    </ScreenLayout>
   );
 }

package/dist/templates/optional/auth-redux/screens/SettingsScreen.tsx

@@ -1,14 +1,11 @@
-import { StyleSheet, Text, View } from "react-native";
 import React from "react";
+import { Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 
-const SettingsScreen = () => {
+export default function SettingsScreen() {
   return (
-    <View>
+    <ScreenLayout>
       <Text>SettingsScreen</Text>
-    </View>
+    </ScreenLayout>
   );
-};
-
-export default SettingsScreen;
-
-const styles = StyleSheet.create({});
+}

package/dist/templates/optional/auth-redux/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",
+  },
+});

package/dist/templates/optional/auth-zustand/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-zustand/navigation/ProtectedStack.tsx

@@ -1,30 +1,58 @@
-import React, { useEffect } from "react";
-import { ActivityIndicator, View } from "react-native";
+import React, { 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 LoginScreen from "../screens/LoginScreen";
 import RegisterScreen from "../screens/RegisterScreen";
-import BottomTabs from "./BottomTabs";
+import WelcomeScreen from "../screens/WelcomeScreen";
 import { useAuthStore } from "../store/authStore";
+import BottomTabs from "./BottomTabs";
 
 const Stack = createNativeStackNavigator();
+const WELCOME_SEEN_KEY = "@rnskit_has_seen_welcome";
 
 export default function ProtectedStack() {
   const token = useAuthStore((state) => state.token);
   const isHydrated = useAuthStore((state) => state.isHydrated);
   const hydrate = useAuthStore((state) => state.hydrate);
+  const [showWelcome, setShowWelcome] = useState(false);
+  const [isCheckingWelcome, setIsCheckingWelcome] = useState(true);
 
   useEffect(() => {
     void hydrate();
   }, [hydrate]);
 
-  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 ? (