create-react-native-starter-kit 0.0.0-stage → 1.0.0

package/template/src/screens/auth/login/index.tsx

@@ -0,0 +1,137 @@
+import CustomButton from '@/components/shared/CustomButton';
+import CustomText from '@/components/shared/text/CustomText';
+import FormInput from '@/components/shared/form-input/FormInput';
+import { useAppTheme } from '@/context/ThemeContext';
+import { AuthStackScreenProps } from '@/types';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { View } from 'react-native';
+import { layout } from '@/theme/layout';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { loginAction } from '@/redux/slice/auth.slice';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { loginSchema } from '@/validation/schema/auth.schema';
+import { tValError } from '@/validation/tValError';
+import { InferType } from 'yup';
+import { LIMITS } from '@/constants/limits';
+
+type Props = AuthStackScreenProps<'Login'>;
+
+export type LoginFormType = InferType<typeof loginSchema>;
+
+const Login = ({ navigation }: Props) => {
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<LoginFormType>({
+    resolver: yupResolver(loginSchema),
+  });
+
+  const { color } = useAppTheme();
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const onNavigateToSignup = () => {
+    navigation.navigate('Signup');
+  };
+  const onNavigateToForgotPassword = () => {
+    navigation.navigate('ForgotPassword');
+  };
+
+  const handleLogin = () => {
+    dispatch(loginAction({ access_token: 'dummy_token' }));
+  };
+
+  return (
+    <SafeAreaView style={layout.flexContainer}>
+      <CustomText
+        variant="header"
+        weight="600"
+        textColor={color.text_primary}
+        textAlign="center"
+      >
+        {t('auth.welcome-back')}
+      </CustomText>
+      <FormInput
+        control={control}
+        name="email"
+        //If you don't want to use validation schema, you can add rules like this
+        // rules={rules.email}
+        label={t('auth.email')}
+        placeholder={t('placeholder.enterEmail')}
+        textInputProps={{
+          keyboardType: 'email-address',
+        }}
+        error={tValError(t, errors.email, {
+          field: t('auth.email'),
+        })}
+        variant="text"
+        isTooltip
+        tooltipMessage='We"ll never share your email with anyone else.'
+      />
+
+      <FormInput
+        control={control}
+        name="password"
+        label={t('auth.password')}
+        placeholder={t('placeholder.enterPassword')}
+        error={tValError(t, errors.password, {
+          field: t('auth.password'),
+          ...LIMITS.PASSWORD,
+        })}
+        isPassword
+        variant="text"
+        // isTooltip
+        // tooltipMessage="Make sure your password is strong and secure."
+      />
+
+      <CustomButton
+        title={t('auth.login')}
+        onPress={handleSubmit(handleLogin)}
+        variant="primary"
+        fullWidth
+      />
+
+      <View style={layout.rowGapCenter}>
+        <CustomText textColor={color.text_secondary}>
+          {t('auth.forgotPassword')}
+        </CustomText>
+        <CustomText
+          textColor={color.secondary}
+          onPress={onNavigateToForgotPassword}
+        >
+          {t('auth.reset')}
+        </CustomText>
+      </View>
+
+      <View style={layout.flexEnd}>
+        <View style={layout.rowGapCenter}>
+          <CustomText textColor={color.text_secondary}>
+            {t('auth.dont-have-an-account')}
+          </CustomText>
+          <CustomText textColor={color.secondary} onPress={onNavigateToSignup}>
+            {t('auth.create-account')}
+          </CustomText>
+        </View>
+
+        <View style={[layout.separator, { backgroundColor: color.border }]} />
+
+        <CustomText textColor={color.text_secondary} textAlign="center">
+          {t('auth.by-continuing-you-agree-to-our')}{' '}
+          <CustomText textColor={color.text_primary} onPress={() => {}}>
+            {t('auth.terms-of-service')}
+          </CustomText>{' '}
+          and{' '}
+          <CustomText textColor={color.text_primary} onPress={() => {}}>
+            {t('auth.privacy-policy')}
+          </CustomText>
+        </CustomText>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default Login;

package/template/src/screens/auth/login/styles.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({});

package/template/src/screens/auth/signup/index.tsx

@@ -0,0 +1,110 @@
+import CustomButton from '@/components/shared/CustomButton';
+import CustomText from '@/components/shared/text/CustomText';
+import FormInput from '@/components/shared/form-input/FormInput';
+import { useAppTheme } from '@/context/ThemeContext';
+import { AuthStackScreenProps } from '@/types';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { View } from 'react-native';
+import { layout } from '@/theme/layout';
+import { InferType } from 'yup';
+import { registerSchema } from '@/validation/schema/auth.schema';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { tValError } from '@/validation/tValError';
+import { LIMITS } from '@/constants/limits';
+
+type Props = AuthStackScreenProps<'Signup'>;
+
+export type RegisterFormType = InferType<typeof registerSchema>;
+
+const Signup = ({ navigation }: Props) => {
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<RegisterFormType>({
+    resolver: yupResolver(registerSchema),
+  });
+
+  const { color } = useAppTheme();
+  const { t } = useTranslation();
+
+  const onNavigateToLogin = () => {
+    navigation.navigate('Login');
+  };
+
+  return (
+    <SafeAreaView style={layout.flexContainer}>
+      <CustomText
+        variant="header"
+        weight="600"
+        textColor={color.text_primary}
+        textAlign="center"
+      >
+        {t('auth.lets-get-started')}
+      </CustomText>
+      <FormInput
+        control={control}
+        name="email"
+        placeholder={t('placeholder.enterEmail')}
+        label={t('auth.email')}
+        textInputProps={{
+          keyboardType: 'email-address',
+        }}
+        error={tValError(t, errors.email, {
+          field: t('auth.email'),
+          ...LIMITS.EMAIL,
+        })}
+        variant="text"
+      />
+
+      <FormInput
+        control={control}
+        name="password"
+        label={t('auth.password')}
+        placeholder={t('placeholder.enterPassword')}
+        isPassword
+        variant="text"
+        error={tValError(t, errors.password, {
+          field: t('auth.password'),
+          ...LIMITS.PASSWORD,
+        })}
+      />
+
+      <CustomButton
+        title={t('auth.create-account')}
+        onPress={handleSubmit(onNavigateToLogin)}
+        variant="primary"
+        fullWidth
+      />
+
+      <View style={layout.flexEnd}>
+        <View style={layout.rowGapCenter}>
+          <CustomText textColor={color.text_secondary}>
+            {t('auth.alreadyHaveAccount')}
+          </CustomText>
+          <CustomText textColor={color.secondary} onPress={onNavigateToLogin}>
+            Login
+          </CustomText>
+        </View>
+
+        <View style={[layout.separator, { backgroundColor: color.border }]} />
+
+        <CustomText textColor={color.text_secondary} textAlign="center">
+          {t('auth.by-continuing-you-agree-to-our')}{' '}
+          <CustomText textColor={color.text_primary} onPress={() => {}}>
+            {t('auth.terms-of-service')}
+          </CustomText>{' '}
+          and{' '}
+          <CustomText textColor={color.text_primary} onPress={() => {}}>
+            {t('auth.privacy-policy')}
+          </CustomText>
+        </CustomText>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default Signup;

package/template/src/screens/auth/signup/styles.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({});

package/template/src/screens/auth/verify-email/index.tsx

@@ -0,0 +1,15 @@
+import { AuthStackScreenProps } from '@/types';
+import React from 'react';
+import { View, Text } from 'react-native';
+
+type props = AuthStackScreenProps<'VerifyEmail'>;
+
+const VerifyEmail = ({}: props) => {
+  return (
+    <View>
+      <Text>VerifyEmail Screen</Text>
+    </View>
+  );
+};
+
+export default VerifyEmail;

package/template/src/screens/auth/verify-email/styles.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({});

package/template/src/screens/tab/home/index.tsx

@@ -0,0 +1,49 @@
+import CustomText from '@/components/shared/text/CustomText';
+import AvatarPicker from '@/components/shared/AvatarPicker';
+import { OfflineQueryBoundary } from '@/components/shared/offline';
+import { layout } from '@/theme/layout';
+import { TabScreenProps } from '@/types';
+import React from 'react';
+import { ShimmerHolder } from '@/components/shared/skelton/ShimmerHolder';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
+
+type props = TabScreenProps<'Home'>;
+
+/**
+ * Set to `false`, then turn on airplane mode, to see the offline screen.
+ * In a real screen pass whether the query has data, e.g. `hasData={!!data}`.
+ */
+const HAS_DATA = true;
+
+const Home = ({}: props) => {
+  const { t } = useTranslation();
+
+  return (
+    <SafeAreaView style={layout.flex}>
+        <CustomText
+          variant="header"
+          textAlign="center"
+          style={layout.marginTopMd}
+        >
+          {t('home-screen')}
+        </CustomText>
+      <OfflineQueryBoundary
+        hasData={HAS_DATA}
+        loading={<ShimmerHolder.Home />}
+      >
+        <AvatarPicker
+          editable
+          width={150}
+          height={150}
+          editIconSize={39}
+          source="both"
+          onImageChange={(image: any) => console.log('Selected image:', image)}
+          isLoading={false}
+        />
+      </OfflineQueryBoundary>
+    </SafeAreaView>
+  );
+};
+
+export default Home;

package/template/src/screens/tab/home/styles.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({});

package/template/src/screens/tab/index.ts

@@ -0,0 +1,2 @@
+export { default as Home } from './home';
+export { default as Profile } from './profile';

package/template/src/screens/tab/profile/index.tsx

@@ -0,0 +1,50 @@
+import CustomButton from '@/components/shared/CustomButton';
+import CustomText from '@/components/shared/text/CustomText';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { hideLoader, showLoader } from '@/redux/slice/loader.slice';
+import { layout } from '@/theme/layout';
+import { TabScreenProps } from '@/types';
+import React, { useEffect } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+type props = TabScreenProps<'Profile'>;
+
+const Profile = ({ navigation }: props) => {
+  const dispatch = useAppDispatch();
+
+  /**
+   * Global loader reference: `showLoader()` puts a full-screen overlay on top of the app
+   * and `hideLoader()` removes it. Use it for blocking work (submit, upload, delete);
+   * use a shimmer (see Home) for first-time screen data instead.
+   */
+  useEffect(() => {
+    const loadData = async () => {
+      dispatch(showLoader());
+
+      await new Promise(resolve => setTimeout(resolve as any, 2000));
+
+      dispatch(hideLoader());
+    };
+
+    loadData();
+  }, [dispatch]);
+
+  const handlePress = () => {
+    navigation.navigate('MainTabs');
+  };
+
+  return (
+    <SafeAreaView>
+      <CustomText
+        variant="header"
+        textAlign="center"
+        style={layout.marginTopMd}
+      >
+        Profile Screen
+      </CustomText>
+      <CustomButton title="Go to Main Tab" onPress={handlePress} />
+    </SafeAreaView>
+  );
+};
+
+export default Profile;

package/template/src/screens/tab/profile/styles.ts

@@ -0,0 +1,3 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({});

package/template/src/services/api/auth/auth.api.ts

@@ -0,0 +1,22 @@
+import { ApiResponse, ApiSuccess } from '@/types';
+import { apiClient } from '../axios';
+import { AUTH_ENDPOINTS } from './auth.endpoints';
+import { LoginArgs, LoginResponse } from './auth.types';
+
+export const loginApi = async (
+  data: LoginArgs,
+): Promise<ApiSuccess<LoginResponse>> => {
+  const res = await apiClient.post<ApiResponse<LoginResponse>>(
+    AUTH_ENDPOINTS.LOGIN,
+    data,
+  );
+
+  if (!res.data.result) {
+    throw new Error(res.data.message || 'Login failed');
+  }
+
+  return {
+    data: res.data.payload,
+    message: res.data.message,
+  };
+};

package/template/src/services/api/auth/auth.endpoints.ts

@@ -0,0 +1,7 @@
+import { ENDPOINTS } from '@/constants/endpoint';
+
+export const AUTH_ENDPOINTS = {
+  LOGIN: ENDPOINTS.auth.login,
+  SIGNUP: ENDPOINTS.auth.signup,
+  LOGOUT: ENDPOINTS.auth.logout,
+} as const;

package/template/src/services/api/auth/auth.types.ts

@@ -0,0 +1,9 @@
+export interface LoginResponse {
+  access_token: string;
+}
+
+//Arguments for login API
+export type LoginArgs = {
+  email: string;
+  password: string;
+};

package/template/src/services/api/auth/index.ts

@@ -0,0 +1,3 @@
+export * from './auth.api';
+export * from './auth.types';
+export * from './auth.endpoints';

package/template/src/services/api/axios/axios.instance.ts

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import { mockAdapter } from '../mock/mockAdapter';
+
+/** No API_BASE_URL in `.env` → every request is answered by the built-in mock backend. */
+export const USE_MOCK_API = !process.env.API_BASE_URL;
+
+export const apiClient = axios.create({
+  baseURL: process.env.API_BASE_URL,
+  timeout: 15000,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+  ...(USE_MOCK_API ? { adapter: mockAdapter } : {}),
+});

package/template/src/services/api/axios/axios.interceptors.ts

@@ -0,0 +1,43 @@
+import { AxiosError } from 'axios';
+import { store } from '@/store';
+import { isDeviceOnline } from '@/services/network';
+import { clearAppSession } from '@/utils/clearAppSession';
+import { apiClient } from './axios.instance';
+
+/* ================= REQUEST ================= */
+
+apiClient.interceptors.request.use(
+  config => {
+    if (!isDeviceOnline()) {
+      return Promise.reject(
+        new AxiosError('Network Error', AxiosError.ERR_NETWORK, config),
+      );
+    }
+
+    const token = store.getState().auth?.access_token;
+
+    if (token) {
+      config.headers = config.headers ?? {};
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+
+    return config;
+  },
+  error => Promise.reject(error),
+);
+
+/* ================= RESPONSE ================= */
+
+apiClient.interceptors.response.use(
+  res => res,
+  async error => {
+    const status = error.response?.status;
+    const token = store.getState().auth?.access_token;
+
+    if (status === 401 && token) {
+      await clearAppSession();
+    }
+
+    return Promise.reject(error);
+  },
+);

package/template/src/services/api/axios/index.ts

@@ -0,0 +1,2 @@
+export * from './axios.instance';
+export * from './axios.interceptors';

package/template/src/services/api/mock/mockAdapter.ts

@@ -0,0 +1,97 @@
+import { AxiosError, type AxiosAdapter, type AxiosResponse } from 'axios';
+import { ENDPOINTS } from '@/constants/endpoint';
+import type { ApiResponse } from '@/types';
+import type { UserProfile } from '../user/user.api';
+
+/**
+ * Built-in fake backend used while `API_BASE_URL` is not set in `.env`.
+ * Lets screens call the real API functions and hooks on day one.
+ * Add a handler here for every new endpoint you want to design against.
+ */
+
+const MOCK_DELAY_MS = 600;
+
+let mockProfile: UserProfile = {
+  id: 'user_1',
+  isProfileSetup: true,
+  name: 'Alex Johnson',
+  email: 'alex@example.com',
+  image_url: null,
+};
+
+type MockHandler = (body: unknown) => { message: string; payload: unknown };
+
+/** React Native's FormData exposes its fields through getParts(). */
+const readFormData = (body: unknown): Record<string, unknown> => {
+  const parts =
+    (body as { getParts?: () => Array<Record<string, unknown>> })?.getParts?.() ?? [];
+  return parts.reduce<Record<string, unknown>>((acc, part) => {
+    const key = part.fieldName as string;
+    acc[key] = part.string ?? part.uri;
+    return acc;
+  }, {});
+};
+
+const handlers: Record<string, MockHandler> = {
+  [`post ${ENDPOINTS.auth.login}`]: () => ({
+    message: 'Logged in',
+    payload: { access_token: 'mock-access-token' },
+  }),
+  [`post ${ENDPOINTS.auth.signup}`]: () => ({
+    message: 'Account created',
+    payload: { access_token: 'mock-access-token' },
+  }),
+  [`post ${ENDPOINTS.auth.logout}`]: () => ({
+    message: 'Logged out',
+    payload: null,
+  }),
+  [`get ${ENDPOINTS.app.profile}`]: () => ({
+    message: 'Profile loaded',
+    payload: mockProfile,
+  }),
+  [`patch ${ENDPOINTS.app.updateProfile}`]: body => {
+    mockProfile = { ...mockProfile, ...readFormData(body) };
+    return { message: 'Profile updated successfully', payload: mockProfile };
+  },
+};
+
+const wrap = <T>(message: string, payload: T, result = true): ApiResponse<T> => ({
+  result,
+  requestId: `mock-${Date.now()}`,
+  message,
+  messageLBL: message,
+  payload,
+});
+
+export const mockAdapter: AxiosAdapter = async config => {
+  await new Promise<void>(resolve => setTimeout(resolve, MOCK_DELAY_MS));
+
+  const key = `${(config.method ?? 'get').toLowerCase()} ${config.url ?? ''}`;
+  const handler = handlers[key];
+
+  if (!handler) {
+    const response: AxiosResponse = {
+      data: wrap(`No mock for ${key}`, null, false),
+      status: 404,
+      statusText: 'Not Found',
+      headers: {},
+      config,
+    };
+    throw new AxiosError(
+      `No mock handler for ${key}. Add one in services/api/mock/mockAdapter.ts`,
+      AxiosError.ERR_BAD_REQUEST,
+      config,
+      undefined,
+      response,
+    );
+  }
+
+  const { message, payload } = handler(config.data);
+  return {
+    data: wrap(message, payload),
+    status: 200,
+    statusText: 'OK',
+    headers: {},
+    config,
+  };
+};

package/template/src/services/api/user/index.ts

@@ -0,0 +1,2 @@
+export { getProfile, updateProfile } from './user.api';
+export type { UserProfile, UpdateProfileArgs } from './user.api';

package/template/src/services/api/user/user.api.ts

@@ -0,0 +1,67 @@
+import { ApiResponse, ApiSuccess } from '@/types';
+import { ENDPOINTS } from '@/constants/endpoint';
+import { getCompressedImageForUpload } from '@/utils/imageCompress';
+import { apiClient } from '../axios';
+
+export type UserProfile = {
+  id: string;
+  isProfileSetup: boolean;
+  name?: string;
+  email?: string;
+  image_url?: string | null;
+};
+
+/** Text fields are sent as-is; `image_url` is a local file URI that gets compressed and uploaded. */
+export type UpdateProfileArgs = {
+  image_url?: string;
+} & Record<string, string | undefined>;
+
+export const getProfile = async (): Promise<ApiSuccess<UserProfile>> => {
+  const res = await apiClient.get<ApiResponse<UserProfile>>(
+    ENDPOINTS.app.profile,
+  );
+
+  if (!res.data.result) {
+    throw new Error(res.data.message || 'Failed to load profile');
+  }
+
+  return {
+    data: res.data.payload,
+    message: res.data.message,
+  };
+};
+
+export const updateProfile = async (
+  args: UpdateProfileArgs,
+): Promise<ApiSuccess<UserProfile>> => {
+  const formData = new FormData();
+  const { image_url, ...fields } = args;
+
+  Object.entries(fields).forEach(([key, value]) => {
+    if (value !== undefined && value !== null && value !== '') {
+      formData.append(key, value);
+    }
+  });
+
+  if (image_url) {
+    const file = await getCompressedImageForUpload(image_url);
+    if (file) {
+      formData.append('image_url', file as unknown as Blob);
+    }
+  }
+
+  const res = await apiClient.patch<ApiResponse<UserProfile>>(
+    ENDPOINTS.app.updateProfile,
+    formData,
+    { headers: { 'Content-Type': 'multipart/form-data' } },
+  );
+
+  if (!res.data.result) {
+    throw new Error(res.data.message || 'Failed to update profile');
+  }
+
+  return {
+    data: res.data.payload,
+    message: res.data.message,
+  };
+};