@highbeek/create-rnstarterkit 1.0.2-beta.1 → 1.0.2-beta.11

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-redux/store/authSlice.ts

@@ -0,0 +1,25 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface AuthState {
+  token: string | null;
+}
+
+const initialState: AuthState = {
+  token: null,
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    login(state, action: PayloadAction<string>) {
+      state.token = action.payload;
+    },
+    logout(state) {
+      state.token = null;
+    },
+  },
+});
+
+export const { login, logout } = authSlice.actions;
+export default authSlice.reducer;

package/dist/templates/optional/auth-redux/store/store.ts

@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "./authSlice";
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

package/dist/templates/optional/auth-zustand/api/endpoints/auth.ts

@@ -0,0 +1,14 @@
+function assertCredentials(email: string, password: string) {
+  if (!email.trim()) throw new Error("Email is required");
+  if (!password.trim()) throw new Error("Password is required");
+}
+
+export const loginApi = async (email: string, password: string) => {
+  assertCredentials(email, password);
+  return `demo-token-${email.trim().toLowerCase()}`;
+};
+
+export const registerApi = async (email: string, password: string) => {
+  assertCredentials(email, password);
+  return `demo-token-${email.trim().toLowerCase()}`;
+};

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/BottomTabs.tsx

@@ -0,0 +1 @@
+export { default } from "./cli/BottomTabs";

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

@@ -0,0 +1,72 @@
+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 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]);
+
+  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 (
+      <ScreenLayout centered padded={false}>
+        <ActivityIndicator />
+      </ScreenLayout>
+    );
+  }
+
+  if (showWelcome) {
+    return <WelcomeScreen onContinue={() => void handleWelcomeContinue()} />;
+  }
+
+  return (
+    <Stack.Navigator>
+      {token ? (
+        <Stack.Screen
+          name="Main"
+          component={BottomTabs}
+          options={{ headerShown: false }}
+        />
+      ) : (
+        <>
+          <Stack.Screen name="Login" component={LoginScreen} />
+          <Stack.Screen name="Register" component={RegisterScreen} />
+        </>
+      )}
+    </Stack.Navigator>
+  );
+}

package/dist/templates/optional/auth-zustand/navigation/cli/BottomTabs.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import HomeScreen from "../../screens/HomeScreen";
+import ProfileScreen from "../../screens/ProfileScreen";
+import SettingsScreen from "../../screens/SettingsScreen";
+
+const Tab = createBottomTabNavigator();
+
+export default function BottomTabs() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}

package/dist/templates/optional/auth-zustand/navigation/expo/BottomTabs.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Ionicons } from "@expo/vector-icons";
+import HomeScreen from "../../screens/HomeScreen";
+import ProfileScreen from "../../screens/ProfileScreen";
+import SettingsScreen from "../../screens/SettingsScreen";
+
+const Tab = createBottomTabNavigator();
+
+export default function BottomTabs() {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarIcon: ({ color, size }) => {
+          let iconName: string = "home";
+
+          if (route.name === "Home") iconName = "home";
+          else if (route.name === "Profile") iconName = "person";
+          else if (route.name === "Settings") iconName = "settings";
+
+          return <Ionicons name={iconName as any} size={size} color={color} />;
+        },
+      })}
+    >
+      <Tab.Screen name="Home" component={HomeScreen} />
+      <Tab.Screen name="Profile" component={ProfileScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
+    </Tab.Navigator>
+  );
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+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 (
+    <ScreenLayout>
+      <Text>Welcome Home!</Text>
+      <Button title="Logout" onPress={() => void logout()} />
+    </ScreenLayout>
+  );
+}

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

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+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 () => {
+    try {
+      setError("");
+      const token = await loginApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    }
+  };
+
+  return (
+    <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()} />
+    </ScreenLayout>
+  );
+}

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

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

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

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+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 () => {
+    try {
+      setError("");
+      const token = await registerApi(email, password);
+      await login(token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    }
+  };
+
+  return (
+    <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()} />
+    </ScreenLayout>
+  );
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
+
+export default function SettingsScreen() {
+  return (
+    <ScreenLayout>
+      <Text>This is the Settings Screen</Text>
+    </ScreenLayout>
+  );
+}