@highbeek/create-rnstarterkit 1.0.2-beta.2 → 1.0.2-beta.3

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

@@ -0,0 +1,47 @@
+{
+  "name": "{{projectName}}",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.33",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-linking": "~8.0.11",
+    "expo-router": "~6.0.23",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.10",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-worklets": "0.5.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0"
+  },
+  "private": true
+}

package/dist/templates/expo-base/scripts/reset-project.js

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+const root = process.cwd();
+const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
+const exampleDir = "app-example";
+const newAppDir = "app";
+const exampleDirPath = path.join(root, exampleDir);
+
+const indexContent = `import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}
+`;
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const moveDirectories = async (userInput) => {
+  try {
+    if (userInput === "y") {
+      // Create the app-example directory
+      await fs.promises.mkdir(exampleDirPath, { recursive: true });
+      console.log(`📁 /${exampleDir} directory created.`);
+    }
+
+    // Move old directories to new app-example directory or delete them
+    for (const dir of oldDirs) {
+      const oldDirPath = path.join(root, dir);
+      if (fs.existsSync(oldDirPath)) {
+        if (userInput === "y") {
+          const newDirPath = path.join(root, exampleDir, dir);
+          await fs.promises.rename(oldDirPath, newDirPath);
+          console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
+        } else {
+          await fs.promises.rm(oldDirPath, { recursive: true, force: true });
+          console.log(`❌ /${dir} deleted.`);
+        }
+      } else {
+        console.log(`➡️ /${dir} does not exist, skipping.`);
+      }
+    }
+
+    // Create new /app directory
+    const newAppDirPath = path.join(root, newAppDir);
+    await fs.promises.mkdir(newAppDirPath, { recursive: true });
+    console.log("\n📁 New /app directory created.");
+
+    // Create index.tsx
+    const indexPath = path.join(newAppDirPath, "index.tsx");
+    await fs.promises.writeFile(indexPath, indexContent);
+    console.log("📄 app/index.tsx created.");
+
+    // Create _layout.tsx
+    const layoutPath = path.join(newAppDirPath, "_layout.tsx");
+    await fs.promises.writeFile(layoutPath, layoutContent);
+    console.log("📄 app/_layout.tsx created.");
+
+    console.log("\n✅ Project reset complete. Next steps:");
+    console.log(
+      `1. Run \`npx expo start\` to start a development server.\n2. Edit app/index.tsx to edit the main screen.${
+        userInput === "y"
+          ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
+          : ""
+      }`
+    );
+  } catch (error) {
+    console.error(`❌ Error during script execution: ${error.message}`);
+  }
+};
+
+rl.question(
+  "Do you want to move existing files to /app-example instead of deleting them? (Y/n): ",
+  (answer) => {
+    const userInput = answer.trim().toLowerCase() || "y";
+    if (userInput === "y" || userInput === "n") {
+      moveDirectories(userInput).finally(() => rl.close());
+    } else {
+      console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
+      rl.close();
+    }
+  }
+);

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

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

package/dist/templates/optional/apiClient/api/client.ts

@@ -0,0 +1,86 @@
+import { API_BASE_URL } from "../config/env";
+
+export class ApiError extends Error {
+  status: number;
+  data: unknown;
+
+  constructor(status: number, message: string, data: unknown) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.data = data;
+  }
+}
+
+type RequestOptions = {
+  headers?: Record<string, string>;
+  query?: Record<string, string | number | boolean | undefined>;
+  body?: unknown;
+  token?: string | null;
+  signal?: AbortSignal;
+};
+
+function buildUrl(path: string, query?: RequestOptions["query"]) {
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  const url = new URL(`${API_BASE_URL}${normalizedPath}`);
+
+  if (query) {
+    Object.entries(query).forEach(([key, value]) => {
+      if (value !== undefined) url.searchParams.set(key, String(value));
+    });
+  }
+
+  return url.toString();
+}
+
+async function parseResponse<T>(response: Response): Promise<T> {
+  const contentType = response.headers.get("content-type") || "";
+  const data = contentType.includes("application/json")
+    ? await response.json()
+    : await response.text();
+
+  if (!response.ok) {
+    const message =
+      typeof data === "object" && data !== null && "message" in data
+        ? String((data as { message: unknown }).message)
+        : `Request failed with status ${response.status}`;
+
+    throw new ApiError(response.status, message, data);
+  }
+
+  return data as T;
+}
+
+async function request<T>(
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
+  path: string,
+  options: RequestOptions = {},
+): Promise<T> {
+  const { headers = {}, query, body, token, signal } = options;
+
+  const response = await fetch(buildUrl(path, query), {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...headers,
+    },
+    body: body === undefined ? undefined : JSON.stringify(body),
+    signal,
+  });
+
+  return parseResponse<T>(response);
+}
+
+export const apiClient = {
+  get: <T>(path: string, options?: Omit<RequestOptions, "body">) =>
+    request<T>("GET", path, options),
+  post: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>("POST", path, { ...options, body }),
+  put: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>("PUT", path, { ...options, body }),
+  patch: <T>(path: string, body?: unknown, options?: RequestOptions) =>
+    request<T>("PATCH", path, { ...options, body }),
+  delete: <T>(path: string, options?: Omit<RequestOptions, "body">) =>
+    request<T>("DELETE", path, options),
+};

package/dist/templates/optional/apiClient/api/index.ts

@@ -0,0 +1 @@
+export * from "./client";

package/dist/templates/optional/apiClient/config/env.cli.ts

@@ -0,0 +1,5 @@
+import { API_BASE_URL as DOTENV_API_BASE_URL } from "@env";
+
+const FALLBACK_API_URL = "https://example.com/api";
+
+export const API_BASE_URL = DOTENV_API_BASE_URL || FALLBACK_API_URL;

package/dist/templates/optional/apiClient/config/env.expo.ts

@@ -0,0 +1,4 @@
+const FALLBACK_API_URL = "https://example.com/api";
+
+export const API_BASE_URL =
+  process.env.EXPO_PUBLIC_API_URL ?? process.env.API_BASE_URL ?? FALLBACK_API_URL;

package/dist/templates/optional/apiClient/config/env.ts

@@ -0,0 +1 @@
+export { API_BASE_URL } from "./env.expo";

package/dist/templates/optional/apiClient/env.d.ts

@@ -0,0 +1,3 @@
+declare module "@env" {
+  export const API_BASE_URL: string;
+}

package/dist/templates/optional/auth-context/api/authApi.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-context/context/AuthContext.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, ReactNode, useEffect, useState } from "react";
+import { getToken, removeToken, storeToken } from "../utils/storage";
+
+interface AuthContextType {
+  token: string | null;
+  isHydrated: boolean;
+  login: (token: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+export const AuthContext = createContext<AuthContextType>({
+  token: null,
+  isHydrated: false,
+  login: async () => {},
+  logout: async () => {},
+});
+
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [token, setToken] = useState<string | null>(null);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    const hydrate = async () => {
+      const savedToken = await getToken();
+      setToken(savedToken);
+      setIsHydrated(true);
+    };
+
+    void hydrate();
+  }, []);
+
+  const login = async (nextToken: string) => {
+    setToken(nextToken);
+    await storeToken(nextToken);
+  };
+
+  const logout = async () => {
+    setToken(null);
+    await removeToken();
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, isHydrated, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React, { useContext } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { AuthContext } from "../context/AuthContext";
+import LoginScreen from "../screens/LoginScreen";
+import RegisterScreen from "../screens/RegisterScreen";
+import BottomTabs from "./BottomTabs";
+
+const Stack = createNativeStackNavigator();
+
+export default function ProtectedStack() {
+  const { token, isHydrated } = useContext(AuthContext);
+
+  if (!isHydrated) {
+    return (
+      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  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-context/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-context/navigation/expo/BottomTabs.tsx

@@ -0,0 +1,29 @@
+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-context/screens/HomeScreen.tsx

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

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

@@ -0,0 +1,28 @@
+import React, { useContext, useState } from "react";
+import { View, TextInput, Button } from "react-native";
+import { AuthContext } from "../context/AuthContext";
+import { loginApi } from "../api/authApi";
+
+export default function LoginScreen() {
+  const { login } = useContext(AuthContext);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    const token = await loginApi(email, password);
+    await login(token);
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Button title="Login" onPress={() => void handleLogin()} />
+    </View>
+  );
+}

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

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

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

@@ -0,0 +1,28 @@
+import React, { useContext, useState } from "react";
+import { View, TextInput, Button } from "react-native";
+import { AuthContext } from "../context/AuthContext";
+import { registerApi } from "../api/authApi";
+
+export default function RegisterScreen() {
+  const { login } = useContext(AuthContext);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleRegister = async () => {
+    const token = await registerApi(email, password);
+    await login(token);
+  };
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+      />
+      <Button title="Register" onPress={() => void handleRegister()} />
+    </View>
+  );
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function SettingsScreen() {
+  return (
+    <View style={{ padding: 20 }}>
+      <Text>This is the Settings Screen</Text>
+    </View>
+  );
+}

package/dist/templates/optional/auth-context/utils/storage.ts

@@ -0,0 +1,13 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+export const storeToken = async (token: string) => {
+  await AsyncStorage.setItem("@token", token);
+};
+
+export const getToken = async () => {
+  return await AsyncStorage.getItem("@token");
+};
+
+export const removeToken = async () => {
+  await AsyncStorage.removeItem("@token");
+};

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useSelector } from "react-redux";
+import type { RootState } from "../store/store";
+import LoginScreen from "../screens/LoginScreen";
+import RegisterScreen from "../screens/RegisterScreen";
+import BottomTabs from "./BottomTabs";
+
+const Stack = createNativeStackNavigator();
+
+export default function ProtectedStack() {
+  const token = useSelector((state: RootState) => state.auth.token);
+
+  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-redux/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-redux/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-redux/screens/HomeScreen.tsx

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