@highbeek/create-rnstarterkit 1.0.2-beta.5 → 1.1.0

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 ? (

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

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

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

@@ -1,28 +1,63 @@
 import React, { useState } from "react";
-import { View, TextInput, Button } from "react-native";
-import { loginApi } from "../api/authApi";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
+import { loginApi } from "../api";
 import { useAuthStore } from "../store/authStore";
 
 export default function LoginScreen() {
   const login = useAuthStore((state) => state.login);
   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-zustand/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-zustand/screens/RegisterScreen.tsx

@@ -1,28 +1,63 @@
 import React, { useState } from "react";
-import { View, TextInput, Button } from "react-native";
-import { registerApi } from "../api/authApi";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
+import { registerApi } from "../api";
 import { useAuthStore } from "../store/authStore";
 
 export default function RegisterScreen() {
   const login = useAuthStore((state) => state.login);
   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-zustand/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-zustand/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/ci/.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - run: npm run lint
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm install
+      - run: npm test -- --passWithNoTests

package/dist/templates/optional/error-boundary/components/ErrorBoundary.tsx

@@ -0,0 +1,83 @@
+import React, { Component, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+
+type Props = {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onReset?: () => void;
+};
+
+type State = {
+  hasError: boolean;
+  error: Error | null;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: { componentStack: string }) {
+    console.error("ErrorBoundary caught:", error, info.componentStack);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <View style={styles.container}>
+          <Text style={styles.title}>Something went wrong</Text>
+          <Text style={styles.message}>{this.state.error?.message}</Text>
+          <Pressable style={styles.button} onPress={this.handleReset}>
+            <Text style={styles.buttonLabel}>Try again</Text>
+          </Pressable>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 8,
+  },
+  message: {
+    fontSize: 14,
+    color: "#6B7280",
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  button: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    backgroundColor: "#111827",
+    borderRadius: 8,
+  },
+  buttonLabel: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+  },
+});

package/dist/templates/optional/formik/components/formik/FormikInput.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, TextInput, Text, StyleSheet, TextInputProps } from 'react-native';
+import { useField } from 'formik';
+
+interface FormikInputProps extends TextInputProps {
+  name: string;
+  label: string;
+}
+
+export function FormikInput({ name, label, ...props }: FormikInputProps) {
+  const [field, meta, helpers] = useField(name);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <TextInput
+        style={[styles.input, meta.touched && meta.error ? styles.inputError : undefined]}
+        value={field.value}
+        onChangeText={helpers.setValue}
+        onBlur={() => helpers.setTouched(true)}
+        {...props}
+      />
+      {meta.touched && meta.error ? (
+        <Text style={styles.errorText}>{meta.error}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { marginBottom: 16 },
+  label: { fontSize: 14, fontWeight: '500', marginBottom: 6, color: '#374151' },
+  input: {
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    color: '#111827',
+    backgroundColor: '#FFFFFF',
+  },
+  inputError: { borderColor: '#EF4444' },
+  errorText: { marginTop: 4, fontSize: 12, color: '#EF4444' },
+});