@highbeek/create-rnstarterkit 1.0.2-beta.7 → 1.1.1

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,5 +1,6 @@
 import React, { useState } from "react";
-import { View, TextInput, Button } from "react-native";
+import { TextInput, Button, Text } from "react-native";
+import ScreenLayout from "../components/layout/ScreenLayout";
 import { registerApi } from "../api";
 import { useAuthStore } from "../store/authStore";
 
@@ -7,22 +8,56 @@ 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' },
+});

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
+import { Formik } from 'formik';
+import { FormikInput } from './FormikInput';
+import { loginSchema, type LoginFormValues } from '../../schemas/auth.schema';
+
+interface LoginFormProps {
+  onSubmit: (values: LoginFormValues) => Promise<void>;
+  isLoading?: boolean;
+}
+
+const initialValues: LoginFormValues = { email: '', password: '' };
+
+export function LoginForm({ onSubmit, isLoading = false }: LoginFormProps) {
+  return (
+    <Formik initialValues={initialValues} validationSchema={loginSchema} onSubmit={onSubmit}>
+      {({ handleSubmit }) => (
+        <View style={styles.container}>
+          <FormikInput
+            name="email"
+            label="Email"
+            autoCapitalize="none"
+            keyboardType="email-address"
+            autoComplete="email"
+          />
+          <FormikInput
+            name="password"
+            label="Password"
+            secureTextEntry
+            autoComplete="current-password"
+          />
+          <TouchableOpacity
+            style={[styles.button, isLoading && styles.buttonDisabled]}
+            onPress={() => handleSubmit()}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <ActivityIndicator color="#FFFFFF" />
+            ) : (
+              <Text style={styles.buttonText}>Sign In</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+      )}
+    </Formik>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { width: '100%' },
+  button: {
+    backgroundColor: '#6366F1',
+    borderRadius: 8,
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  buttonDisabled: { opacity: 0.6 },
+  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
+});

package/dist/templates/optional/formik/schemas/auth.schema.ts

@@ -0,0 +1,17 @@
+import * as Yup from 'yup';
+
+export const loginSchema = Yup.object({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+  password: Yup.string().min(8, 'Minimum 8 characters').required('Password is required'),
+});
+
+export const registerSchema = Yup.object({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+  password: Yup.string().min(8, 'Minimum 8 characters').required('Password is required'),
+  confirmPassword: Yup.string()
+    .oneOf([Yup.ref('password')], 'Passwords must match')
+    .required('Please confirm your password'),
+});
+
+export type LoginFormValues = Yup.InferType<typeof loginSchema>;
+export type RegisterFormValues = Yup.InferType<typeof registerSchema>;

package/dist/templates/optional/i18n/src/i18n/hooks/useAppTranslation.ts

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import type en from '../locales/en.json';
+
+// Derive the full key union from the English locale so translations are type-safe
+type TranslationKeys = typeof en;
+type DotPrefix<T extends string, K extends string> = `${T}.${K}`;
+
+type LeafKeys<T, Prefix extends string = ''> = {
+  [K in keyof T]: T[K] extends object
+    ? LeafKeys<T[K], Prefix extends '' ? Extract<K, string> : DotPrefix<Prefix, Extract<K, string>>>
+    : Prefix extends ''
+    ? Extract<K, string>
+    : DotPrefix<Prefix, Extract<K, string>>;
+}[keyof T];
+
+export type AppTranslationKey = LeafKeys<TranslationKeys>;
+
+/**
+ * Typed wrapper around react-i18next's useTranslation.
+ * Keys are inferred from en.json so you get autocompletion + compile-time safety.
+ *
+ * @example
+ *   const { t } = useAppTranslation();
+ *   <Text>{t('auth.signIn')}</Text>
+ */
+export function useAppTranslation() {
+  return useTranslation();
+}

package/dist/templates/optional/i18n/src/i18n/i18n.ts

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import * as RNLocalize from 'react-native-localize';
+
+import en from './locales/en.json';
+import es from './locales/es.json';
+
+const resources = {
+  en: { translation: en },
+  es: { translation: es },
+};
+
+const fallbackLocale = 'en';
+const deviceLocales = RNLocalize.getLocales();
+const bestMatch = deviceLocales[0]?.languageCode ?? fallbackLocale;
+
+void i18n
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: bestMatch,
+    fallbackLng: fallbackLocale,
+    interpolation: {
+      // React already escapes values
+      escapeValue: false,
+    },
+    compatibilityJSON: 'v4',
+  });
+
+export default i18n;

package/dist/templates/optional/i18n/src/i18n/locales/en.json

@@ -0,0 +1,32 @@
+{
+  "welcome": {
+    "title": "Welcome",
+    "subtitle": "Get started with your app",
+    "getStarted": "Get Started"
+  },
+  "auth": {
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "signOut": "Sign Out",
+    "email": "Email",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "forgotPassword": "Forgot password?",
+    "noAccount": "Don't have an account?",
+    "haveAccount": "Already have an account?"
+  },
+  "common": {
+    "loading": "Loading...",
+    "error": "Something went wrong",
+    "retry": "Try again",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "confirm": "Confirm"
+  },
+  "screens": {
+    "home": "Home",
+    "profile": "Profile",
+    "settings": "Settings"
+  }
+}

package/dist/templates/optional/i18n/src/i18n/locales/es.json

@@ -0,0 +1,32 @@
+{
+  "welcome": {
+    "title": "Bienvenido",
+    "subtitle": "Empieza con tu aplicación",
+    "getStarted": "Comenzar"
+  },
+  "auth": {
+    "signIn": "Iniciar sesión",
+    "signUp": "Registrarse",
+    "signOut": "Cerrar sesión",
+    "email": "Correo electrónico",
+    "password": "Contraseña",
+    "confirmPassword": "Confirmar contraseña",
+    "forgotPassword": "¿Olvidaste tu contraseña?",
+    "noAccount": "¿No tienes cuenta?",
+    "haveAccount": "¿Ya tienes cuenta?"
+  },
+  "common": {
+    "loading": "Cargando...",
+    "error": "Algo salió mal",
+    "retry": "Intentar de nuevo",
+    "cancel": "Cancelar",
+    "save": "Guardar",
+    "delete": "Eliminar",
+    "confirm": "Confirmar"
+  },
+  "screens": {
+    "home": "Inicio",
+    "profile": "Perfil",
+    "settings": "Configuración"
+  }
+}

package/dist/templates/optional/maestro/.maestro/flows/01_welcome.yaml

@@ -0,0 +1,5 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- assertVisible: "Get Started"
+- tapOn: "Get Started"

package/dist/templates/optional/maestro-auth/.maestro/flows/01_welcome.yaml

@@ -0,0 +1,5 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- assertVisible: "Get Started"
+- tapOn: "Get Started"

package/dist/templates/optional/maestro-auth/.maestro/flows/02_login.yaml

@@ -0,0 +1,13 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- tapOn: "Get Started"
+- tapOn: "Sign In"
+- tapOn:
+    id: "email-input"
+- inputText: "test@example.com"
+- tapOn:
+    id: "password-input"
+- inputText: "password123"
+- tapOn: "Sign In"
+- assertVisible: "Home"

package/dist/templates/optional/maestro-auth/.maestro/flows/03_logout.yaml

@@ -0,0 +1,16 @@
+appId: com.rnstarterkit.app
+---
+- launchApp
+- tapOn: "Get Started"
+- tapOn: "Sign In"
+- tapOn:
+    id: "email-input"
+- inputText: "test@example.com"
+- tapOn:
+    id: "password-input"
+- inputText: "password123"
+- tapOn: "Sign In"
+- assertVisible: "Home"
+- tapOn: "Profile"
+- tapOn: "Sign Out"
+- assertVisible: "Welcome"