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

package/template/src/services/errors/backendErrorCodes.ts

@@ -0,0 +1,7 @@
+export const BACKEND_ERROR_MAP: Record<string, string> = {
+  USER_NOT_FOUND: 'apiErrors.userNotFound',
+  INVALID_TOKEN: 'apiErrors.invalidToken',
+  EMAIL_ALREADY_EXISTS: 'apiErrors.emailExists',
+  PASSWORD_TOO_WEAK: 'apiErrors.weakPassword',
+  ACCOUNT_DISABLED: 'apiErrors.accountDisabled',
+};

package/template/src/services/errors/errorHandler.ts

@@ -0,0 +1,94 @@
+import axios from 'axios';
+import i18n from '@/i18n';
+import { FIREBASE_ERROR_MAP } from './firebaseErrorMap';
+import { BACKEND_ERROR_MAP } from './backendErrorCodes';
+import { HTTP_STATUS_MAP } from './httpStatusMap';
+import { ErrorToast } from '../toast';
+
+export type BackendErrorResponse = {
+  code?: string;
+  error_code?: string;
+  message?: string;
+  error?: string;
+  msg?: string;
+  errors?: Record<string, string[]>;
+};
+
+function extractBackendMessage(data: any): string | null {
+  if (!data) return null;
+  if (typeof data === 'string') return data;
+
+  return (
+    data.message ||
+    data.error ||
+    data.msg ||
+    (data.errors && Object.values<any>(data.errors)[0]?.[0]) ||
+    null
+  );
+}
+
+function extractBackendCode(data: any): string | null {
+  return data?.code || data?.error_code || null; //"code": "EMAIL_ALREADY_EXISTS" OR "error_code": "EMAIL_ALREADY_EXISTS"
+}
+
+export function getErrorMessage(error: any): string {
+  /* 1️⃣ Firebase Auth */
+  if (
+    typeof error?.code === 'string' &&
+    error.code.startsWith('auth/') &&
+    FIREBASE_ERROR_MAP[error.code]
+  ) {
+    return i18n.t(FIREBASE_ERROR_MAP[error.code] as any);
+  }
+
+  /* 2️⃣ Axios backend / network */
+  if (axios.isAxiosError(error)) {
+    // network error
+    if (error.message === 'Network Error') {
+      return i18n.t('errors.network');
+    }
+
+    const status = error.response?.status;
+    const data = error.response?.data;
+
+    // backend business code
+    const backendCode = extractBackendCode(data);
+    if (backendCode && BACKEND_ERROR_MAP[backendCode]) {
+      return i18n.t(BACKEND_ERROR_MAP[backendCode] as any);
+    }
+
+    // raw backend message
+    const backendMsg = extractBackendMessage(data);
+    if (backendMsg) return backendMsg;
+
+    // http status → i18n
+    if (status && HTTP_STATUS_MAP[status]) {
+      return i18n.t(HTTP_STATUS_MAP[status] as any);
+    }
+  }
+
+  /* 3️⃣ Fetch style */
+  if (error?.status && HTTP_STATUS_MAP[error.status]) {
+    return i18n.t(HTTP_STATUS_MAP[error.status] as any);
+  }
+
+  /* 4️⃣ JS runtime */
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+
+  /* 5️⃣ Final fallback */
+  return i18n.t('errors.generic');
+}
+
+export function ErrorHandler(error: unknown) {
+  if (__DEV__) {
+    console.log('[ErrorHandler]', error);
+  }
+
+  const message = getErrorMessage(error);
+
+  ErrorToast({
+    message,
+  });
+}

package/template/src/services/errors/firebaseErrorMap.ts

@@ -0,0 +1,61 @@
+export const FIREBASE_ERROR_MAP: Record<string, string> = {
+  'auth/too-many-requests': 'firebase.tooManyRequests',
+  'auth/claims-too-large': 'firebase.claimsTooLarge',
+  'auth/email-already-exists': 'firebase.emailExists',
+  'auth/user-not-found': 'firebase.userNotFound',
+  'auth/wrong-password': 'firebase.wrongPassword',
+  'auth/email-already-in-use': 'firebase.emailAlreadyInUse',
+  'auth/insufficient-permission': 'firebase.insufficientPermission',
+  'auth/internal-error': 'firebase.internalError',
+  'auth/invalid-argument': 'firebase.invalidArgument',
+  'auth/invalid-claims': 'firebase.invalidClaims',
+  'auth/invalid-continue-uri': 'firebase.invalidContinueUri',
+  'auth/invalid-creation-time': 'firebase.invalidCreationTime',
+  'auth/invalid-credential': 'firebase.invalidCredential',
+  'auth/invalid-disabled-field': 'firebase.invalidDisabledField',
+  'auth/invalid-display-name': 'firebase.invalidDisplayName',
+  'auth/invalid-dynamic-link-domain': 'firebase.invalidDynamicLinkDomain',
+  'auth/invalid-email': 'firebase.invalidEmail',
+  'auth/invalid-email-verified': 'firebase.invalidEmailVerified',
+  'auth/invalid-hash-algorithm': 'firebase.invalidHashAlgorithm',
+  'auth/invalid-hash-block-size': 'firebase.invalidHashBlockSize',
+  'auth/invalid-hash-derived-key-length':
+    'firebase.invalidHashDerivedKeyLength',
+  'auth/invalid-hash-key': 'firebase.invalidHashKey',
+  'auth/invalid-hash-memory-cost': 'firebase.invalidHashMemoryCost',
+  'auth/invalid-hash-parallelization': 'firebase.invalidHashParallelization',
+  'auth/invalid-hash-rounds': 'firebase.invalidHashRounds',
+  'auth/invalid-hash-salt-separator': 'firebase.invalidHashSaltSeparator',
+  'auth/invalid-id-token': 'firebase.invalidIdToken',
+  'auth/invalid-last-sign-in-time': 'firebase.invalidLastSignInTime',
+  'auth/invalid-page-token': 'firebase.invalidPageToken',
+  'auth/invalid-password': 'firebase.invalidPassword',
+  'auth/invalid-password-has': 'firebase.invalidPasswordHash',
+  'auth/invalid-password-salt': 'firebase.invalidPasswordSalt',
+  'auth/invalid-phone-number': 'firebase.invalidPhoneNumber',
+  'auth/invalid-photo-url': 'firebase.invalidPhotoUrl',
+  'auth/invalid-provider-data': 'firebase.invalidProviderData',
+  'auth/invalid-provider-id': 'firebase.invalidProviderId',
+  'auth/invalid-oauth-responsetype': 'firebase.invalidOauthResponseType',
+  'auth/invalid-session-cookie-duration':
+    'firebase.invalidSessionCookieDuration',
+  'auth/invalid-uid': 'firebase.invalidUid',
+  'auth/invalid-user-import': 'firebase.invalidUserImport',
+  'auth/maximum-user-count-exceeded': 'firebase.maximumUserCountExceeded',
+  'auth/missing-android-pkg-name': 'firebase.missingAndroidPkgName',
+  'auth/missing-continue-uri': 'firebase.missingContinueUri',
+  'auth/missing-hash-algorithm': 'firebase.missingHashAlgorithm',
+  'auth/missing-ios-bundle-id': 'firebase.missingIosBundleId',
+  'auth/missing-uid': 'firebase.missingUid',
+  'auth/missing-oauth-client-secret': 'firebase.missingOauthClientSecret',
+  'auth/operation-not-allowed': 'firebase.operationNotAllowed',
+  'auth/phone-number-already-exists': 'firebase.phoneNumberExists',
+  'auth/project-not-found': 'firebase.projectNotFound',
+  'auth/reserved-claims': 'firebase.reservedClaims',
+  'auth/session-cookie-expired': 'firebase.sessionCookieExpired',
+  'auth/session-cookie-revoked': 'firebase.sessionCookieRevoked',
+  'auth/uid-already-exists': 'firebase.uidExists',
+  'auth/unauthorized-continue-uri': 'firebase.unauthorizedContinueUri',
+  'auth/network-request-failed': 'firebase.networkFailed',
+  'auth/developer-error': 'firebase.developerError',
+};

package/template/src/services/errors/httpStatusMap.ts

@@ -0,0 +1,47 @@
+export const HTTP_STATUS_MAP: Record<number, string> = {
+  100: 'http.100',
+  101: 'http.101',
+  200: 'http.200',
+  201: 'http.201',
+  202: 'http.202',
+  203: 'http.203',
+  204: 'http.204',
+  205: 'http.205',
+  206: 'http.206',
+  300: 'http.300',
+  301: 'http.301',
+  302: 'http.302',
+  303: 'http.303',
+  304: 'http.304',
+  305: 'http.305',
+  307: 'http.307',
+  400: 'http.400',
+  401: 'http.401',
+  402: 'http.402',
+  403: 'http.403',
+  404: 'http.404',
+  405: 'http.405',
+  406: 'http.406',
+  407: 'http.407',
+  408: 'http.408',
+  409: 'http.409',
+  410: 'http.410',
+  411: 'http.411',
+  412: 'http.412',
+  413: 'http.413',
+  414: 'http.414',
+  415: 'http.415',
+  416: 'http.416',
+  417: 'http.417',
+  422: 'http.422',
+  426: 'http.426',
+  428: 'http.428',
+  429: 'http.429',
+  431: 'http.431',
+  500: 'http.500',
+  501: 'http.501',
+  502: 'http.502',
+  503: 'http.503',
+  504: 'http.504',
+  505: 'http.505',
+};

package/template/src/services/errors/index.ts

@@ -0,0 +1,4 @@
+export * from './errorHandler';
+export * from './backendErrorCodes';
+export * from './firebaseErrorMap';
+export * from './httpStatusMap';

package/template/src/services/network/index.ts

@@ -0,0 +1 @@
+export { isDeviceOnline, setupOnlineManager } from './onlineManager';

package/template/src/services/network/onlineManager.ts

@@ -0,0 +1,22 @@
+import NetInfo from '@react-native-community/netinfo';
+import { onlineManager } from '@tanstack/react-query';
+
+/**
+ * Standard TanStack Query + NetInfo wiring.
+ * When offline, queries with networkMode: 'online' pause
+ * and do not hit the network. Cached data remains available.
+ *
+ * `setEventListener` returns void; the listener callback itself returns
+ * the NetInfo unsubscribe that Query owns internally.
+ */
+export const setupOnlineManager = (): void => {
+  onlineManager.setEventListener(setOnline => {
+    return NetInfo.addEventListener(state => {
+      const online =
+        state.isConnected === true && state.isInternetReachable !== false;
+      setOnline(online);
+    });
+  });
+};
+
+export const isDeviceOnline = (): boolean => onlineManager.isOnline();

package/template/src/services/query/index.ts

@@ -0,0 +1 @@
+export { queryClient } from './queryClient';

package/template/src/services/query/queryClient.ts

@@ -0,0 +1,23 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      /** Pause fetches while offline; serve cache when available. */
+      networkMode: 'online',
+      staleTime: 5 * 60 * 1000,
+      gcTime: 10 * 60 * 1000,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+      retry: 2,
+    },
+    mutations: {
+      /**
+       * 'online' would pause mutations offline and leave isPending stuck true.
+       * The axios offline guard rejects immediately instead, so the UI recovers.
+       */
+      networkMode: 'always',
+    },
+  },
+});

package/template/src/services/toast/ToastCard.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { IconName } from '@/assets/icons';
+import Icon from '@/components/shared/Icon';
+import { useAppTheme } from '@/context/ThemeContext';
+import { FontFamily } from '@/theme';
+import { BaseToast, BaseToastProps } from 'react-native-toast-message';
+import { StyleSheet } from 'react-native';
+
+type ToastCardType = 'success' | 'error' | 'info';
+
+const TEXT_PROPS = { allowFontScaling: false } as const;
+
+interface ToastCardProps extends BaseToastProps {
+  type: ToastCardType;
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+}
+
+const ToastCard = ({ type, leftIcon, rightIcon, ...rest }: ToastCardProps) => {
+  const { color } = useAppTheme();
+
+  const accentByType: Record<ToastCardType, string> = {
+    success: color.success,
+    error: color.danger_soft,
+    info: color.info,
+  };
+
+  const renderLeadingIcon = leftIcon
+    ? () => <Icon name={leftIcon} size={24} style={styles.leadingIcon} />
+    : undefined;
+
+  const renderTrailingIcon = rightIcon
+    ? () => <Icon name={rightIcon} size={24} style={styles.trailingIcon} />
+    : undefined;
+
+  return (
+    <BaseToast
+      {...rest}
+      renderLeadingIcon={renderLeadingIcon}
+      renderTrailingIcon={renderTrailingIcon}
+      style={[
+        styles.base,
+        leftIcon ? styles.hasLeftIcon : styles.noLeftIcon,
+        rightIcon ? styles.hasRightIcon : styles.noRightIcon,
+        {
+          borderLeftColor: accentByType[type],
+          backgroundColor: color.background_secondary,
+        },
+      ]}
+      contentContainerStyle={[
+        styles.contentContainer,
+        leftIcon ? styles.contentHasLeftIcon : styles.contentNoLeftIcon,
+        rightIcon ? styles.contentHasRightIcon : styles.contentNoRightIcon,
+        {
+          backgroundColor: color.background_secondary,
+        },
+      ]}
+      text1NumberOfLines={2}
+      text2NumberOfLines={3}
+      text1Props={TEXT_PROPS}
+      text2Props={TEXT_PROPS}
+      text1Style={[
+        styles.text1,
+        {
+          color: color.text_primary,
+        },
+      ]}
+      text2Style={[
+        styles.text2,
+        {
+          color: color.text_primary,
+        },
+      ]}
+    />
+  );
+};
+
+export default ToastCard;
+
+const styles = StyleSheet.create({
+  base: {
+    overflow: 'hidden',
+  },
+
+  contentContainer: {
+    paddingVertical: 8,
+  },
+
+  leadingIcon: {
+    alignSelf: 'center',
+  },
+
+  trailingIcon: {
+    alignSelf: 'center',
+  },
+
+  text1: {
+    fontFamily: FontFamily.InterTightSemiBold,
+  },
+
+  text2: {
+    fontFamily: FontFamily.InterTightRegular,
+    fontSize: 12,
+  },
+
+  hasLeftIcon: {
+    paddingLeft: 10,
+  },
+
+  noLeftIcon: {
+    paddingLeft: 0,
+  },
+
+  hasRightIcon: {
+    paddingRight: 10,
+  },
+
+  noRightIcon: {
+    paddingRight: 2,
+  },
+
+  contentHasLeftIcon: {
+    paddingLeft: 10,
+  },
+
+  contentNoLeftIcon: {
+    paddingLeft: 15,
+  },
+
+  contentHasRightIcon: {
+    paddingRight: 10,
+  },
+
+  contentNoRightIcon: {
+    paddingRight: 15,
+  },
+});

package/template/src/services/toast/ToastConfig.tsx

@@ -0,0 +1,32 @@
+import { ToastConfig } from 'react-native-toast-message';
+import ToastCard from './ToastCard';
+
+export const toastConfig: ToastConfig = {
+  success: props => <ToastCard {...props} type="success" />,
+  error: props => <ToastCard {...props} type="error" />,
+  info: props => <ToastCard {...props} type="info" />,
+  successWithIcon: props => (
+    <ToastCard
+      {...props}
+      type="success"
+      leftIcon={props.props?.leftIcon}
+      rightIcon={props.props?.rightIcon}
+    />
+  ),
+  errorWithIcon: props => (
+    <ToastCard
+      {...props}
+      type="error"
+      leftIcon={props.props?.leftIcon}
+      rightIcon={props.props?.rightIcon}
+    />
+  ),
+  infoWithIcon: props => (
+    <ToastCard
+      {...props}
+      type="info"
+      leftIcon={props.props?.leftIcon}
+      rightIcon={props.props?.rightIcon}
+    />
+  ),
+};

package/template/src/services/toast/index.ts

@@ -0,0 +1,3 @@
+export * from './toast';
+export * from './ToastCard';
+export * from './ToastConfig';

package/template/src/services/toast/toast.ts

@@ -0,0 +1,68 @@
+import Toast, { ToastShowParams } from 'react-native-toast-message';
+import { IconName } from '@/assets/icons';
+import i18n from '@/i18n';
+
+type AtLeastOne<T, Keys extends keyof T = keyof T> = Partial<T> &
+  { [K in Keys]-?: Required<Pick<T, K>> }[Keys];
+
+type IconProps = {
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+};
+
+type BaseToastArgs = {
+  title?: string;
+  message?: string;
+};
+
+type ToastWithIconArgs = BaseToastArgs & {
+  icons: AtLeastOne<IconProps>;
+};
+
+const DEFAULT_OPTIONS: Omit<ToastShowParams, 'props' | 'type'> = {
+  position: 'top' as const,
+  visibilityTime: 4000,
+  autoHide: true,
+  topOffset: 50,
+  avoidKeyboard: true,
+};
+
+const showToast = (
+  type: ToastShowParams['type'],
+  defaultTitle: string,
+  args: BaseToastArgs,
+  icons?: ToastWithIconArgs['icons'],
+) => {
+  const resolvedTitle = args.title ?? defaultTitle;
+
+  if (!resolvedTitle && !args.message) {
+    __DEV__ && console.warn('[Toast] title or message should be provided');
+    return;
+  }
+
+  Toast.show({
+    ...DEFAULT_OPTIONS,
+    type,
+    text1: resolvedTitle,
+    text2: args.message,
+    props: icons,
+  });
+};
+
+export const SuccessToast = (args: BaseToastArgs) =>
+  showToast('success', i18n.t('common.success'), args);
+
+export const ErrorToast = (args: BaseToastArgs) =>
+  showToast('error', i18n.t('common.error'), args);
+
+export const InfoToast = (args: BaseToastArgs) =>
+  showToast('info', i18n.t('common.info'), args);
+
+export const SuccessToastWithIcon = (args: ToastWithIconArgs) =>
+  showToast('successWithIcon', i18n.t('common.success'), args, args.icons);
+
+export const ErrorToastWithIcon = (args: ToastWithIconArgs) =>
+  showToast('errorWithIcon', i18n.t('common.error'), args, args.icons);
+
+export const InfoToastWithIcon = (args: ToastWithIconArgs) =>
+  showToast('infoWithIcon', i18n.t('common.info'), args, args.icons);

package/template/src/storage/mmkvAdapter.ts

@@ -0,0 +1,3 @@
+import { createMMKV } from 'react-native-mmkv';
+
+export const createMMKVInstance = (id: string) => createMMKV({ id });

package/template/src/storage/mmkvInstance.ts

@@ -0,0 +1,16 @@
+import { MMKV } from 'react-native-mmkv';
+
+export const createMMKVAdapter = (storage: MMKV) => ({
+  setItem: (key: string, value: string) => {
+    storage.set(key, value);
+    return Promise.resolve();
+  },
+  getItem: (key: string) => {
+    const value = storage.getString(key);
+    return Promise.resolve(value ?? null);
+  },
+  removeItem: (key: string) => {
+    storage.remove(key);
+    return Promise.resolve();
+  },
+});

package/template/src/store/index.ts

@@ -0,0 +1,15 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { persistedReducer } from './persist';
+import { persistStore } from 'redux-persist';
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+});
+
+export const persistor = persistStore(store);
+
+export type AppDispatch = typeof store.dispatch;

package/template/src/store/mmkv.ts

@@ -0,0 +1,6 @@
+import { createMMKVInstance } from '@/storage/mmkvAdapter';
+import { createMMKVAdapter } from '@/storage/mmkvInstance';
+
+const reduxMMKV = createMMKVInstance('reduxStorage');
+
+export const reduxStorage = createMMKVAdapter(reduxMMKV);

package/template/src/store/persist.ts

@@ -0,0 +1,10 @@
+import { PersistConfig, persistReducer } from 'redux-persist';
+import { reduxStorage } from './mmkv';
+import { rootReducer, RootStoreState } from './rootReducer';
+
+const persistConfig: PersistConfig<RootStoreState> = {
+  key: 'root',
+  storage: reduxStorage,
+};
+
+export const persistedReducer = persistReducer(persistConfig, rootReducer);

package/template/src/store/rootReducer.ts

@@ -0,0 +1,26 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import authReducer from '@/redux/slice/auth.slice';
+import userReducer from '@/redux/slice/user.slice';
+import loaderReducer from '@/redux/slice/loader.slice';
+import settingsReducer from '@/redux/slice/settings.slice';
+import i18n from '@/i18n';
+
+const appReducer = combineReducers({
+  auth: authReducer,
+  user: userReducer,
+  loader: loaderReducer,
+  settings: settingsReducer,
+});
+
+export const rootReducer = (
+  state: ReturnType<typeof appReducer> | undefined,
+  action: any,
+) => {
+  if (action.type === 'auth/logout') {
+    state = undefined;
+    void i18n.changeLanguage('en');
+  }
+  return appReducer(state, action);
+};
+
+export type RootStoreState = ReturnType<typeof rootReducer>;

package/template/src/theme/dark.ts

@@ -0,0 +1,40 @@
+import { palette } from './palette';
+import { light } from './light';
+import { IconName } from '@/assets/icons';
+
+export const dark = {
+  color: {
+    primary: palette.blue[400],
+    primary_soft: palette.blue[500],
+    primary_wash: palette.black[200],
+    primary_accent: palette.blue[400],
+    primary_deep: palette.blue[600],
+    secondary: palette.blue[400],
+    secondary_muted: palette.blue[600],
+    background_primary: palette.black[900],
+    background_secondary: palette.black[200],
+    background_muted: palette.black[200],
+    background_soft: palette.black[200],
+    text_primary: palette.white[900],
+    text_secondary: palette.gray[400],
+    text_heading: palette.white[900],
+    text_body: palette.gray[400],
+    text_subtle: palette.gray[400],
+    text_input: palette.white[900],
+    text_placeholder: palette.gray[400],
+    border: palette.gray[300],
+    placeholder: palette.gray[400],
+    text_default: palette.white[900],
+    danger: palette.red[500],
+    danger_soft: palette.red[500],
+    danger_strong: palette.red[600],
+    success: palette.green[500],
+    info: palette.blue[400],
+    disabled: palette.gray[300],
+    shadow: palette.black[500],
+    shadow_strong: palette.black[900],
+  },
+  icon: {
+    tooltip: 'tooltip_dark',
+  } satisfies Record<keyof typeof light.icon, IconName>,
+} satisfies typeof light;

package/template/src/theme/fonts.ts

@@ -0,0 +1,20 @@
+export const FontFamily = {
+  InterTightBlack: 'InterTight-Black',
+  InterTightBlackItalic: 'InterTight-BlackItalic',
+  InterTightBold: 'InterTight-Bold',
+  InterTightBoldItalic: 'InterTight-BoldItalic',
+  InterTightExtraBold: 'InterTight-ExtraBold',
+  InterTightExtraBoldItalic: 'InterTight-ExtraBoldItalic',
+  InterTightExtraLight: 'InterTight-ExtraLight',
+  InterTightExtraLightItalic: 'InterTight-ExtraLightItalic',
+  InterTightItalic: 'InterTight-Italic',
+  InterTightLight: 'InterTight-Light',
+  InterTightLightItalic: 'InterTight-LightItalic',
+  InterTightMedium: 'InterTight-Medium',
+  InterTightMediumItalic: 'InterTight-MediumItalic',
+  InterTightRegular: 'InterTight-Regular',
+  InterTightSemiBold: 'InterTight-SemiBold',
+  InterTightSemiBoldItalic: 'InterTight-SemiBoldItalic',
+  InterTightThin: 'InterTight-Thin',
+  InterTightThinItalic: 'InterTight-ThinItalic',
+} as const;

package/template/src/theme/index.ts

@@ -0,0 +1,6 @@
+export * from './palette';
+export * from './light';
+export * from './dark';
+export * from './spacing';
+export * from './fonts';
+export * from './typography';