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

package/template/src/theme/layout.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { spacing } from './spacing';
+
+export const layout = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+    padding: spacing.md,
+  },
+  rowGapCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    justifyContent: 'center',
+    marginTop: spacing.md,
+  },
+  flexEnd: { flex: 1, justifyContent: 'flex-end' },
+  flexStart: { flex: 1, justifyContent: 'flex-start' },
+  flex: { flex: 1 },
+  separator: { height: 1, marginVertical: spacing.md },
+  marginTopMd: { marginTop: spacing.md },
+  marginBottomMd: { marginBottom: spacing.md },
+  marginBottomLg: { marginBottom: spacing.lg },
+});

package/template/src/theme/light.ts

@@ -0,0 +1,41 @@
+import { IconName } from '@/assets/icons';
+import { palette } from './palette';
+
+export const light = {
+  color: {
+    primary: palette.blue[500],
+    primary_soft: palette.blue[400],
+    primary_wash: palette.blue[50],
+    primary_accent: palette.blue[400],
+    primary_deep: palette.blue[600],
+    secondary: palette.blue[500],
+    secondary_muted: palette.blue[50],
+    background_primary: palette.white[900],
+    background_secondary: palette.white[200],
+    background_muted: palette.white[100],
+    background_soft: palette.white[100],
+    text_primary: palette.black[500],
+    text_secondary: palette.gray[100],
+    text_heading: palette.black[600],
+    text_body: palette.gray[300],
+    text_subtle: palette.gray[100],
+    text_input: palette.black[500],
+    text_placeholder: palette.gray[400],
+    border: palette.gray[200],
+    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.white[100],
+    shadow: palette.black[500],
+    shadow_strong: palette.black[900],
+  },
+  icon: {
+    tooltip: 'tooltip_light' as IconName,
+  } satisfies Record<string, IconName>,
+};
+
+export type ColorType = typeof light.color;

package/template/src/theme/palette.ts

@@ -0,0 +1,32 @@
+export const palette = {
+  blue: {
+    50: '#E8F3FF',
+    400: '#0597FF',
+    500: '#082B60',
+    600: '#061E45',
+  },
+  white: {
+    100: '#F5F6FB',
+    200: '#FAFAFA',
+    900: '#FFFFFF',
+  },
+  black: {
+    200: '#121212',
+    500: '#2D2D2D',
+    600: '#010407',
+    900: '#000000',
+  },
+  gray: {
+    100: '#89909D',
+    200: '#E4E6F4',
+    300: '#43434C',
+    400: '#A6ADB9',
+  },
+  red: {
+    500: '#F64649',
+    600: '#D83A52',
+  },
+  green: {
+    500: '#22C55E',
+  },
+};

package/template/src/theme/spacing.ts

@@ -0,0 +1,7 @@
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+};

package/template/src/theme/typography.ts

@@ -0,0 +1,80 @@
+import { normalize } from '@/utils/normalize';
+import { FontFamily } from './fonts';
+
+export type FontWeight = '200' | '300' | '400' | '500' | '600' | '700' | '800';
+
+export const FONT_MAP: Record<FontWeight, string> = {
+  '200': FontFamily.InterTightExtraLight,
+  '300': FontFamily.InterTightLight,
+  '400': FontFamily.InterTightRegular,
+  '500': FontFamily.InterTightMedium,
+  '600': FontFamily.InterTightSemiBold,
+  '700': FontFamily.InterTightBold,
+  '800': FontFamily.InterTightExtraBold,
+};
+
+export type TextVariant =
+  | 'caption'
+  | 'micro'
+  | 'footnote'
+  | 'subtitle'
+  | 'label'
+  | 'callout'
+  | 'body'
+  | 'titleMd'
+  | 'titleSm'
+  | 'title'
+  | 'header'
+  | 'display'
+  | 'hero'
+  | 'button';
+
+export const TYPOGRAPHY = {
+  caption: {
+    fontSize: normalize(10),
+  },
+  micro: {
+    fontSize: normalize(11),
+  },
+  footnote: {
+    fontSize: normalize(12),
+  },
+  subtitle: {
+    fontSize: normalize(13),
+  },
+  label: {
+    fontSize: normalize(14),
+    marginBottom: 8,
+  },
+  callout: {
+    fontSize: normalize(15),
+  },
+  body: {
+    fontSize: normalize(16),
+    marginBottom: 8,
+  },
+  titleMd: {
+    fontSize: normalize(17),
+  },
+  titleSm: {
+    fontSize: normalize(18),
+  },
+  title: {
+    fontSize: normalize(20),
+    marginBottom: 8,
+  },
+  header: {
+    fontSize: normalize(24),
+    marginBottom: 24,
+  },
+  display: {
+    fontSize: normalize(26),
+  },
+  hero: {
+    fontSize: normalize(30),
+  },
+  button: {
+    fontSize: normalize(16),
+    textAlign: 'center',
+  },
+} as const;

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

@@ -0,0 +1,34 @@
+export interface ApiResponse<T> {
+  result: boolean;
+  requestId: string;
+  message: string;
+  messageLBL: string;
+  payload: T;
+}
+
+export interface MetaLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+export interface PaginationMeta {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: MetaLink[];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+}
+
+export interface PaginatedPayload<T> {
+  data: T[];
+  meta: PaginationMeta;
+}
+
+export type ApiSuccess<T> = {
+  data: T;
+  message?: string;
+};

package/template/src/types/env.d.ts

@@ -0,0 +1,6 @@
+declare const process: {
+  env: {
+    API_BASE_URL?: string;
+    [key: string]: string | undefined;
+  };
+};

package/template/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './api.types';
+export * from './navigation.types';

package/template/src/types/navigation.types.ts

@@ -0,0 +1,94 @@
+import {
+  createNavigationContainerRef,
+  NavigatorScreenParams,
+  type CompositeScreenProps,
+} from '@react-navigation/native';
+import type { NativeStackScreenProps } from '@react-navigation/native-stack';
+import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
+
+// ============================================================================
+// Auth Stack - Unauthenticated screens
+// ============================================================================
+
+export type AuthStackParamList = {
+  Login: undefined;
+  Signup: undefined;
+  ForgotPassword: undefined;
+  VerifyEmail: undefined;
+  ResetPassword: undefined;
+};
+
+// ============================================================================
+// Main Tab Navigator - Bottom tabs for authenticated users
+// ============================================================================
+
+export type BottomTabParamList = {
+  Home: undefined;
+  Profile: undefined;
+};
+
+// ============================================================================
+// App Stack - Authenticated screens (including tabs)
+// ============================================================================
+
+export type AppStackParamList = {
+  MainTabs: undefined;
+  ProfileSetup: undefined;
+  BottomTabs: NavigatorScreenParams<BottomTabParamList>;
+};
+
+// ============================================================================
+// Screen Props Types - For use in screen components
+// ============================================================================
+
+/**
+ * --------------------
+ * Auth Screens
+ * --------------------
+ * Used ONLY inside AuthStack screens
+ */
+export type AuthStackScreenProps<RouteName extends keyof AuthStackParamList> =
+  NativeStackScreenProps<AuthStackParamList, RouteName>;
+
+/**
+ * --------------------
+ * App Stack Screens
+ * --------------------
+ * Used for non-tab authenticated screens
+ * (Settings, Help, About, etc.)
+ */
+export type AppStackScreenProps<RouteName extends keyof AppStackParamList> =
+  NativeStackScreenProps<AppStackParamList, RouteName>;
+
+/**
+ * --------------------
+ * Tab Screens (Nested inside AppStack)
+ * --------------------
+ * These screens can navigate:
+ * - within tabs
+ * - to AppStack screens
+ */
+export type TabScreenProps<RouteName extends keyof BottomTabParamList> =
+  CompositeScreenProps<
+    BottomTabScreenProps<BottomTabParamList, RouteName>,
+    NativeStackScreenProps<AppStackParamList>
+  >;
+
+// ============================================================================
+// Global React Navigation typing
+// ============================================================================
+// This tells React Navigation what the ROOT navigation param list is.
+// It enables type-safe `useNavigation()` without generics
+// and prevents navigating to invalid routes globally.
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends AppStackParamList {}
+  }
+}
+
+// ============================================================================
+// Navigation Ref - For navigating outside of components
+// ============================================================================
+
+export const navigationRef = createNavigationContainerRef<AppStackParamList>();

package/template/src/utils/clearAppSession.ts

@@ -0,0 +1,10 @@
+import { logoutAction } from '@/redux/slice/auth.slice';
+import { queryClient } from '@/services/query/queryClient';
+import { persistor, store } from '@/store';
+
+/** Clears Redux, React Query cache, and persisted storage. */
+export const clearAppSession = async () => {
+  store.dispatch(logoutAction());
+  queryClient.clear();
+  await persistor.purge();
+};

package/template/src/utils/date.ts

@@ -0,0 +1,19 @@
+/**
+ * Convert a stored ISO date string into a Date for form fields.
+ */
+export const toDate = (iso: string | null | undefined): Date | undefined => {
+  if (!iso) return undefined;
+  const parsed = new Date(iso);
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+};
+
+/**
+ * Convert a form Date (or string) into an ISO string for storage / API.
+ */
+export const toIso = (
+  value: Date | string | null | undefined,
+): string | null => {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+};

package/template/src/utils/documentPickerHandler.ts

@@ -0,0 +1,96 @@
+import {
+  errorCodes,
+  isErrorWithCode,
+  keepLocalCopy,
+  pick,
+  types,
+  type DocumentPickerOptionsBase,
+} from '@react-native-documents/picker';
+import { ErrorHandler } from '@/services/errors';
+
+export type PickedDocument = {
+  uri: string;
+  name: string;
+  type: string | null;
+};
+
+export type PickDocumentResult = {
+  documents: PickedDocument[];
+  cancelled: boolean;
+};
+
+type PickDocumentOptions = {
+  multiple?: boolean;
+  /** MIME / UTI groups to allow. Defaults to images + common docs. */
+  type?: DocumentPickerOptionsBase['type'];
+};
+
+const DEFAULT_TYPES: NonNullable<DocumentPickerOptionsBase['type']> = [
+  types.images,
+  types.pdf,
+  types.doc,
+  types.docx,
+  types.plainText,
+];
+
+/**
+ * Pick one or more files from the device (images, PDFs, docs, etc.).
+ */
+export const pickDocument = async (
+  options?: PickDocumentOptions,
+): Promise<PickDocumentResult> => {
+  const multiple = options?.multiple ?? false;
+  const type = options?.type ?? DEFAULT_TYPES;
+
+  try {
+    const results = await pick({
+      type,
+      allowMultiSelection: multiple,
+    });
+
+    if (!results.length) {
+      return { documents: [], cancelled: true };
+    }
+
+    const documents: PickedDocument[] = [];
+
+    for (const file of results) {
+      if (!file.uri) continue;
+
+      const fileName = file.name ?? 'document';
+      const [copyResult] = await keepLocalCopy({
+        files: [
+          {
+            uri: file.uri,
+            fileName,
+          },
+        ],
+        destination: 'cachesDirectory',
+      });
+
+      const localUri =
+        copyResult?.status === 'success' ? copyResult.localUri : file.uri;
+
+      documents.push({
+        uri: localUri,
+        name: fileName,
+        type: file.type ?? null,
+      });
+    }
+
+    return {
+      documents,
+      cancelled: documents.length === 0,
+    };
+  } catch (error) {
+    if (
+      isErrorWithCode(error) &&
+      error.code === errorCodes.OPERATION_CANCELED
+    ) {
+      return { documents: [], cancelled: true };
+    }
+
+    ErrorHandler(error);
+    return { documents: [], cancelled: false };
+  }
+};

package/template/src/utils/getFileNameFromUri.ts

@@ -0,0 +1,18 @@
+/**
+ * Resolves a display file name from an optional known name or a URI path segment.
+ */
+export const getFileNameFromUri = (
+  uri: string,
+  fallbackName?: string | null,
+): string => {
+  if (fallbackName?.trim()) {
+    return fallbackName.trim();
+  }
+
+  const segment = uri.split('/').filter(Boolean).pop();
+  if (!segment) {
+    return 'file';
+  }
+
+  return decodeURIComponent(segment);
+};

package/template/src/utils/getInitials.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns up to two initials from a display name.
+ */
+export const getInitials = (name?: string | null): string => {
+  if (!name?.trim()) return '';
+
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+
+  return `${parts[0][0] ?? ''}${parts[1][0] ?? ''}`.toUpperCase();
+};

package/template/src/utils/hindiText.ts

@@ -0,0 +1,33 @@
+import {
+  Platform,
+  StyleSheet,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native';
+import { normalize } from '@/utils/normalize';
+
+/** Devanagari needs more vertical room than Latin for matras. */
+const HINDI_LINE_HEIGHT_RATIO = 1.45;
+
+export const isHindiLanguage = (lng?: string | null) =>
+  (lng ?? '').toLowerCase().startsWith('hi');
+
+/**
+ * Hindi-only text metrics. Apply after the base styles so other languages stay unchanged.
+ * Inflates tight lineHeights and restores Android font padding for matras.
+ */
+export const getHindiTextStyle = (
+  style?: StyleProp<TextStyle>,
+): TextStyle | undefined => {
+  const flat = StyleSheet.flatten(style) ?? {};
+  const fontSize =
+    typeof flat.fontSize === 'number' ? flat.fontSize : normalize(14);
+  const minLineHeight = Math.ceil(fontSize * HINDI_LINE_HEIGHT_RATIO);
+  const currentLineHeight =
+    typeof flat.lineHeight === 'number' ? flat.lineHeight : fontSize;
+
+  return {
+    lineHeight: Math.max(currentLineHeight, minLineHeight),
+    ...(Platform.OS === 'android' ? { includeFontPadding: true } : null),
+  };
+};

package/template/src/utils/imageCompress.ts

@@ -0,0 +1,97 @@
+import ImageResizer, { Response } from '@bam.tech/react-native-image-resizer';
+import { isAndroid, isIOS } from '@/constants/device';
+
+export const getCompressedImage = async ({
+  path,
+  maxWidth = 256,
+  maxHeight = 256,
+  quality = 80,
+  maxSize = 256,
+}: {
+  path: string;
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number;
+  maxSize?: number;
+}): Promise<Response | null> => {
+  const getCalculatedSize = (width: number, height: number) => {
+    let ratio = maxSize / width;
+    let newWidth = maxSize;
+    let newHeight = height * ratio;
+
+    if (newHeight > maxSize) {
+      ratio = maxSize / height;
+      newHeight = maxSize;
+      newWidth = width * ratio;
+    }
+
+    return { width: newWidth, height: newHeight };
+  };
+
+  let newSize = { width: maxWidth, height: maxHeight };
+
+  if (maxWidth > maxSize || maxHeight > maxSize) {
+    newSize = getCalculatedSize(maxWidth, maxHeight);
+  }
+
+  try {
+    const result = await ImageResizer.createResizedImage(
+      path,
+      newSize.width,
+      newSize.height,
+      'JPEG',
+      quality,
+    );
+
+    if (result?.path) {
+      return {
+        ...result,
+        path: isAndroid ? 'file://' + result.path : result.path,
+      };
+    }
+
+    return null;
+  } catch (err) {
+    console.warn('Image compression error:', err);
+    return null;
+  }
+};
+
+export type CompressedUploadFile = {
+  uri: string;
+  name: string;
+  type: 'image/jpeg';
+};
+
+/** Compress a local image and shape it for multipart FormData upload. */
+export const getCompressedImageForUpload = async (
+  path: string,
+  options?: { maxSize?: number; quality?: number },
+): Promise<CompressedUploadFile | null> => {
+  const maxSize = options?.maxSize ?? 256;
+  const quality = options?.quality ?? 80;
+
+  const compressed = await getCompressedImage({
+    path,
+    maxWidth: maxSize,
+    maxHeight: maxSize,
+    maxSize,
+    quality,
+  });
+
+  if (!compressed?.path) {
+    return null;
+  }
+
+  const uri = compressed.path;
+  const rawName = uri.split('/').pop() || 'profile.jpg';
+  const name = rawName.includes('.')
+    ? rawName.replace(/\.\w+$/, '.jpg')
+    : `${rawName}.jpg`;
+
+  return {
+    uri: isIOS ? uri.replace('file://', '') : uri,
+    name,
+    type: 'image/jpeg',
+  };
+};