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

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

@@ -0,0 +1,49 @@
+{
+  "name": "{{projectName}}",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint",
+    "format": "prettier --write .",
+    "type-check": "tsc --noEmit"
+  },
+  "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",
+    "prettier": "^3.5.0"
+  },
+  "private": true
+}

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,142 @@
+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;
+};
+
+type RequestInterceptor = (
+  input: {
+    method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+    path: string;
+    options: RequestOptions;
+  },
+) =>
+  | {
+      method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+      path: string;
+      options: RequestOptions;
+    }
+  | Promise<{
+      method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
+      path: string;
+      options: RequestOptions;
+    }>;
+type ResponseInterceptor = (response: Response) => Response | Promise<Response>;
+
+let authTokenGetter: (() => string | null | undefined) | null = null;
+const requestInterceptors: RequestInterceptor[] = [];
+const responseInterceptors: ResponseInterceptor[] = [];
+
+export function setAuthTokenGetter(getter: (() => string | null | undefined) | null) {
+  authTokenGetter = getter;
+}
+
+export function addRequestInterceptor(interceptor: RequestInterceptor) {
+  requestInterceptors.push(interceptor);
+}
+
+export function addResponseInterceptor(interceptor: ResponseInterceptor) {
+  responseInterceptors.push(interceptor);
+}
+
+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> {
+  let requestInput = { method, path, options };
+  for (const interceptor of requestInterceptors) {
+    requestInput = await interceptor(requestInput);
+  }
+
+  const { headers = {}, query, body, token, signal } = requestInput.options;
+
+  let response = await fetch(buildUrl(requestInput.path, query), {
+    method: requestInput.method,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...headers,
+    },
+    body: body === undefined ? undefined : JSON.stringify(body),
+    signal,
+  });
+
+  for (const interceptor of responseInterceptors) {
+    response = await interceptor(response);
+  }
+
+  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),
+};
+
+// Default interceptor setup: attach bearer token if configured.
+addRequestInterceptor((input) => {
+  const token = input.options.token ?? authTokenGetter?.() ?? null;
+  return {
+    ...input,
+    options: {
+      ...input.options,
+      token,
+    },
+  };
+});

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

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

@@ -0,0 +1,63 @@
+import React, { useContext, useState } from "react";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
+import { AuthContext } from "../context/AuthContext";
+import { loginApi } from "../api";
+
+export default function LoginScreen() {
+  const { login } = useContext(AuthContext);
+  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-context/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-context/screens/RegisterScreen.tsx

@@ -0,0 +1,63 @@
+import React, { useContext, useState } from "react";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
+import { AuthContext } from "../context/AuthContext";
+import { registerApi } from "../api";
+
+export default function RegisterScreen() {
+  const { login } = useContext(AuthContext);
+  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-context/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>
+  );
+}