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

package/template/src/components/shared/skelton/BaseSkelton.tsx

@@ -0,0 +1,71 @@
+import React, { memo, ReactNode } from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import Skeleton from 'react-native-reanimated-skeleton';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ICustomViewStyle } from 'react-native-reanimated-skeleton/lib/typescript/constants';
+
+export interface SkeletonLayoutItem {
+  key: string;
+  width: number;
+  height: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  borderRadius?: number;
+}
+
+export interface SkeletonBaseProps {
+  children?: ReactNode;
+  isLoading?: boolean;
+  layout?: ICustomViewStyle[];
+  duration?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  boneColor?: string;
+  highlightColor?: string;
+  animationType?: 'pulse' | 'shiver' | 'none';
+  animationDirection?:
+    | 'horizontalLeft'
+    | 'horizontalRight'
+    | 'verticalTop'
+    | 'verticalDown'
+    | 'diagonalDownLeft'
+    | 'diagonalDownRight'
+    | 'diagonalTopLeft'
+    | 'diagonalTopRight';
+}
+
+const BaseSkelton = ({
+  children,
+  isLoading = false,
+  layout,
+  duration = 1000,
+  containerStyle,
+  boneColor,
+  highlightColor,
+  animationType = 'shiver',
+  animationDirection = 'horizontalRight',
+}: SkeletonBaseProps) => {
+  const { color } = useAppTheme();
+
+  const defaultBoneColor = boneColor ?? color.background_secondary;
+  const defaultHighlightColor = highlightColor ?? color.border;
+
+  return (
+    <Skeleton
+      isLoading={isLoading}
+      layout={layout}
+      animationType={animationType}
+      animationDirection={animationDirection}
+      boneColor={defaultBoneColor}
+      highlightColor={defaultHighlightColor}
+      duration={duration}
+      containerStyle={[containerStyle]}
+      hasFadeIn={true}
+    >
+      {children}
+    </Skeleton>
+  );
+};
+
+export default memo(BaseSkelton);

package/template/src/components/shared/skelton/ShimmerHolder.ts

@@ -0,0 +1,6 @@
+import { HomeShimmer } from './holders';
+
+/** Named shimmer screens for list / full-page loading states. */
+export const ShimmerHolder = {
+  Home: HomeShimmer,
+} as const;

package/template/src/components/shared/skelton/holders/HomeShimmer.tsx

@@ -0,0 +1,25 @@
+import React, { memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import BaseSkelton from '@/components/shared/skelton/BaseSkelton';
+import { homeShimmerLayout } from '@/components/shared/skelton/layouts';
+
+const HomeShimmer = () => {
+  const layout = useMemo(() => homeShimmerLayout(), []);
+
+  return (
+    <View style={styles.content}>
+      <BaseSkelton isLoading layout={layout} containerStyle={styles.skeleton} />
+    </View>
+  );
+};
+
+export default memo(HomeShimmer);
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+  },
+  skeleton: {
+    width: '100%',
+  },
+});

package/template/src/components/shared/skelton/holders/index.ts

@@ -0,0 +1 @@
+export { default as HomeShimmer } from './HomeShimmer';

package/template/src/components/shared/skelton/layouts/avatar.layout.ts

@@ -0,0 +1,18 @@
+import { ICustomViewStyle } from 'react-native-reanimated-skeleton/lib/typescript/constants';
+
+interface AvatarProps {
+  size?: number;
+}
+
+export const avatarPickerLayout = ({ size = 100 }: AvatarProps) => {
+  const layout: ICustomViewStyle[] = [
+    {
+      key: 'avatar',
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+    },
+  ];
+
+  return layout;
+};

package/template/src/components/shared/skelton/layouts/home.layout.ts

@@ -0,0 +1,16 @@
+import { spacing } from '@/theme';
+import { ICustomViewStyle } from 'react-native-reanimated-skeleton/lib/typescript/constants';
+
+const AVATAR_SIZE = 150;
+
+/** Matches Home content: the centered AvatarPicker (the title is rendered outside the boundary). */
+export const homeShimmerLayout = (): ICustomViewStyle[] => [
+  {
+    key: 'avatar',
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
+    borderRadius: AVATAR_SIZE / 2,
+    alignSelf: 'center',
+    marginTop: spacing.md,
+  },
+];

package/template/src/components/shared/skelton/layouts/index.ts

@@ -0,0 +1,3 @@
+export * from './avatar.layout';
+export * from './text.layout';
+export * from './home.layout';

package/template/src/components/shared/skelton/layouts/text.layout.ts

@@ -0,0 +1,18 @@
+import { ICustomViewStyle } from 'react-native-reanimated-skeleton/lib/typescript/constants';
+
+interface TextProps {
+  width?: number;
+  height?: number;
+}
+
+export const textLayout = ({ width = 100, height = 40 }: TextProps) => {
+  const layout: ICustomViewStyle[] = [
+    {
+      width: width,
+      height: height,
+      borderRadius: 50,
+    },
+  ];
+
+  return layout;
+};

package/template/src/components/shared/text/CustomText.tsx

@@ -0,0 +1,85 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import { FONT_MAP, TYPOGRAPHY } from '@/theme/typography';
+import { getHindiTextStyle, isHindiLanguage } from '@/utils/hindiText';
+import React, { memo, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, StyleSheet } from 'react-native';
+import { CustomTextProps } from './types';
+
+const CustomText = ({
+  weight = '400',
+  variant = 'body',
+  textColor,
+  style,
+  textAlign,
+  onPress,
+  ellipsizeMode,
+  numberOfLines,
+  adjustsFontSizeToFit,
+  minimumFontScale,
+  children,
+  ...restTextProps
+}: CustomTextProps) => {
+  const { color } = useAppTheme();
+  const { i18n } = useTranslation();
+  const [pressed, setPressed] = useState<boolean>(false);
+  const opacity = pressed ? 0.8 : 1;
+  const isPressable = typeof onPress === 'function';
+  const isHindi = isHindiLanguage(i18n.language);
+
+  const composedStyle = useMemo(() => {
+    const base = [
+      styles.base,
+      TYPOGRAPHY[variant],
+      {
+        fontFamily: FONT_MAP[weight],
+        opacity: opacity,
+        color: textColor || color.text_primary,
+        textAlign: textAlign,
+      },
+      style,
+    ];
+
+    if (!isHindi) {
+      return base;
+    }
+
+    return [...base, getHindiTextStyle(base)];
+  }, [
+    variant,
+    weight,
+    opacity,
+    textColor,
+    color.text_primary,
+    textAlign,
+    style,
+    isHindi,
+  ]);
+
+  const handlePressIn = () => setPressed(true);
+  const handlePressOut = () => setPressed(false);
+  return (
+    <Text
+      allowFontScaling={false}
+      onPressIn={isPressable ? handlePressIn : undefined}
+      onPressOut={isPressable ? handlePressOut : undefined}
+      style={composedStyle}
+      children={children}
+      onPress={isPressable ? onPress : undefined}
+      ellipsizeMode={ellipsizeMode}
+      numberOfLines={numberOfLines}
+      adjustsFontSizeToFit={adjustsFontSizeToFit}
+      minimumFontScale={minimumFontScale}
+      {...restTextProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+});
+
+export default memo(CustomText);

package/template/src/components/shared/text/ShimmerText.tsx

@@ -0,0 +1,159 @@
+import { useAppTheme } from '@/context/ThemeContext';
+import { FONT_MAP, TYPOGRAPHY } from '@/theme/typography';
+import { getHindiTextStyle, isHindiLanguage } from '@/utils/hindiText';
+import React, { memo, useState, useMemo } from 'react';
+import { Text, StyleSheet, View, ViewStyle } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import BaseSkelton from '../skelton/BaseSkelton';
+import { textLayout } from '../skelton/layouts';
+import { ShimmerTextProps } from './types';
+
+const ShimmerText = ({
+  weight = '400',
+  variant = 'body',
+  textColor,
+  style,
+  textAlign,
+  isLoading = false,
+  shimmerWidth = 100,
+  shimmerHeight = 30,
+  containerStyle,
+  onPress,
+  children,
+  ellipsizeMode,
+  numberOfLines,
+}: ShimmerTextProps) => {
+  const { color } = useAppTheme();
+  const { i18n } = useTranslation();
+  const isHindi = isHindiLanguage(i18n.language);
+  const [pressed, setPressed] = useState<boolean>(false);
+  const opacity = pressed ? 0.8 : 1;
+  const isPressable = typeof onPress === 'function';
+
+  const handlePressIn = () => setPressed(true);
+  const handlePressOut = () => setPressed(false);
+
+  const typographyStyle = TYPOGRAPHY[variant];
+
+  const containerAlignStyle = useMemo((): ViewStyle => {
+    switch (textAlign) {
+      case 'center':
+        return { alignItems: 'center' };
+      case 'right':
+        return { alignItems: 'flex-end' };
+      default:
+        return { alignItems: 'flex-start' };
+    }
+  }, [textAlign]);
+
+  const flatStyle = StyleSheet.flatten(style) || {};
+  const {
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginHorizontal,
+    marginVertical,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingHorizontal,
+    paddingVertical,
+    alignSelf,
+    flex,
+    flexGrow,
+    flexShrink,
+    width,
+    ...textOnlyStyle
+  } = flatStyle;
+
+  const positioningStyle: ViewStyle = {
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginHorizontal,
+    marginVertical,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingHorizontal,
+    paddingVertical,
+    alignSelf,
+    flex,
+    flexGrow,
+    flexShrink,
+    width,
+  };
+
+  Object.keys(positioningStyle).forEach(key => {
+    if (positioningStyle[key as keyof ViewStyle] === undefined) {
+      delete positioningStyle[key as keyof ViewStyle];
+    }
+  });
+
+  const textStyle = useMemo(() => {
+    const base = [
+      styles.base,
+      typographyStyle,
+      {
+        fontFamily: FONT_MAP[weight],
+        opacity: opacity,
+        color: textColor || color.text_primary,
+        textAlign: textAlign,
+      },
+      textOnlyStyle,
+    ];
+    if (!isHindi) {
+      return base;
+    }
+    return [...base, getHindiTextStyle(base)];
+  }, [
+    typographyStyle,
+    weight,
+    opacity,
+    textColor,
+    color.text_primary,
+    textAlign,
+    textOnlyStyle,
+    isHindi,
+  ]);
+
+  return (
+    <View style={[containerAlignStyle, positioningStyle, containerStyle]}>
+      <BaseSkelton
+        isLoading={isLoading}
+        layout={textLayout({
+          width: shimmerWidth,
+          height: shimmerHeight,
+        })}
+      >
+        <Text
+          allowFontScaling={false}
+          onPressIn={isPressable ? handlePressIn : undefined}
+          onPressOut={isPressable ? handlePressOut : undefined}
+          style={textStyle}
+          onPress={isPressable ? onPress : undefined}
+          children={children}
+          ellipsizeMode={ellipsizeMode}
+          numberOfLines={numberOfLines}
+        />
+      </BaseSkelton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
+});
+
+export default memo(ShimmerText);

package/template/src/components/shared/text/types.ts

@@ -0,0 +1,40 @@
+import { FontWeight, TextVariant } from '@/theme/typography';
+import { ReactNode } from 'react';
+import { StyleProp, TextProps, TextStyle, ViewStyle } from 'react-native';
+
+export type EllipsizeMode = TextProps['ellipsizeMode'];
+export type TextAlignType = 'auto' | 'left' | 'right' | 'center' | 'justify';
+
+export interface CustomTextProps {
+  weight?: FontWeight;
+  variant?: TextVariant;
+  textColor?: string;
+  textAlign?: TextAlignType;
+  style?: StyleProp<TextStyle>;
+  ellipsizeMode?: EllipsizeMode;
+  numberOfLines?: number;
+  adjustsFontSizeToFit?: boolean;
+  minimumFontScale?: number;
+  children: ReactNode;
+  onPress?: () => void;
+  restTextProps?: Omit<
+    TextProps,
+    | 'style'
+    | 'onPress'
+    | 'onPressIn'
+    | 'onPressOut'
+    | 'children'
+    | 'ellipsizeMode'
+    | 'numberOfLines'
+    | 'allowFontScaling'
+    | 'adjustsFontSizeToFit'
+    | 'minimumFontScale'
+  >;
+}
+
+export interface ShimmerTextProps extends CustomTextProps {
+  isLoading?: boolean;
+  shimmerWidth?: number;
+  shimmerHeight?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}

package/template/src/constants/device.ts

@@ -0,0 +1,12 @@
+import { Dimensions, PixelRatio, Platform } from 'react-native';
+
+export const AppDimensions = {
+  screenWidth: Dimensions.get('screen').width,
+  screenHeight: Dimensions.get('screen').height,
+  windowWidth: Dimensions.get('window').width,
+  windowHeight: Dimensions.get('window').height,
+  pixelRatio: PixelRatio.get(),
+} as const;
+
+export const isIOS = Platform.OS === 'ios';
+export const isAndroid = Platform.OS === 'android';

package/template/src/constants/endpoint.ts

@@ -0,0 +1,11 @@
+export const ENDPOINTS = {
+  auth: {
+    login: '/auth/login',
+    signup: '/auth/register',
+    logout: '/auth/logout',
+  },
+  app: {
+    profile: '/profile',
+    updateProfile: '/profile',
+  },
+} as const;

package/template/src/constants/keyExtractor.ts

@@ -0,0 +1,6 @@
+export const keyExtractorById = <T extends { id: string }>(item: T): string =>
+  item.id.toString();
+
+export const KEY_EXTRACTORS = {
+  byId: keyExtractorById,
+} as const;

package/template/src/constants/limits.ts

@@ -0,0 +1,9 @@
+export const LIMITS = {
+  EMAIL: { min: 5, max: 255 },
+  NAME: { min: 1, max: 100 },
+  DESCRIPTION: { min: 1, max: 5000 },
+  ADDRESS: { min: 1, max: 255 },
+  ZIP_CODE: { max: 20 },
+  PASSWORD: { min: 8, max: 16 },
+  PHONE: { min: 7, max: 15 },
+} as const;

package/template/src/constants/queryKey.ts

@@ -0,0 +1,3 @@
+export const QUERY_KEYS = {
+  profile: 'profile',
+} as const;

package/template/src/constants/regex.ts

@@ -0,0 +1,7 @@
+export const REGEX = {
+  HAS_LETTER: /[a-zA-Z]/,
+  ZIP_CODE: /^[A-Za-z0-9\s]+$/,
+  PHONE: /^[\d\s+]+$/,
+  EMAIL: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  STRONG_PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/,
+};

package/template/src/context/NetworkContext.tsx

@@ -0,0 +1,102 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import NetInfo, { type NetInfoState } from '@react-native-community/netinfo';
+import { useTranslation } from 'react-i18next';
+import { setupOnlineManager } from '@/services/network';
+import { ErrorToast } from '@/services/toast';
+
+type NetworkContextValue = {
+  isConnected: boolean;
+  isOffline: boolean;
+  isHydrated: boolean;
+  refresh: () => Promise<boolean>;
+};
+
+const NetworkContext = createContext<NetworkContextValue | null>(null);
+
+const resolveOnline = (state: NetInfoState): boolean =>
+  state.isConnected === true && state.isInternetReachable !== false;
+
+type Props = {
+  children: ReactNode;
+};
+
+export const NetworkProvider = ({ children }: Props) => {
+  const { t } = useTranslation();
+  const [isConnected, setIsConnected] = useState(true);
+  const [isHydrated, setIsHydrated] = useState(false);
+  const previousOnlineRef = useRef<boolean | null>(null);
+  const toastShownForOfflineRef = useRef(false);
+
+  const applyState = useCallback(
+    (state: NetInfoState) => {
+      const online = resolveOnline(state);
+      setIsConnected(online);
+      setIsHydrated(true);
+
+      const wasOnline = previousOnlineRef.current;
+      previousOnlineRef.current = online;
+
+      // Toast on cold-start offline, and again only when transitioning online → offline.
+      const shouldToast =
+        (!online && wasOnline === null) || (!online && wasOnline === true);
+
+      if (shouldToast && !toastShownForOfflineRef.current) {
+        toastShownForOfflineRef.current = true;
+        ErrorToast({
+          title: t('network.unavailableTitle'),
+          message: t('network.unavailableMessage'),
+        });
+      }
+
+      if (online) {
+        toastShownForOfflineRef.current = false;
+      }
+    },
+    [t],
+  );
+
+  useEffect(() => {
+    setupOnlineManager();
+    const unsubscribeNetInfo = NetInfo.addEventListener(applyState);
+    return () => {
+      unsubscribeNetInfo();
+    };
+  }, [applyState]);
+
+  // NetInfo.refresh() forces a new check and notifies listeners.
+  const refresh = useCallback(async () => {
+    const state = await NetInfo.refresh();
+    return resolveOnline(state);
+  }, []);
+
+  const value = useMemo<NetworkContextValue>(
+    () => ({
+      isConnected,
+      isOffline: !isConnected,
+      isHydrated,
+      refresh,
+    }),
+    [isConnected, isHydrated, refresh],
+  );
+
+  return (
+    <NetworkContext.Provider value={value}>{children}</NetworkContext.Provider>
+  );
+};
+
+export const useNetwork = (): NetworkContextValue => {
+  const context = useContext(NetworkContext);
+  if (!context) {
+    throw new Error('useNetwork must be used within NetworkProvider');
+  }
+  return context;
+};

package/template/src/context/ThemeContext.tsx

@@ -0,0 +1,56 @@
+import { dark, light } from '@/theme';
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  ReactNode,
+  useState,
+} from 'react';
+import { useColorScheme } from 'react-native';
+
+export type ThemeMode = 'system' | 'light' | 'dark';
+export type AppTheme = typeof light;
+
+interface ThemeContextValue {
+  theme: AppTheme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  color: AppTheme['color'];
+  icon: AppTheme['icon'];
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: light,
+  color: light.color,
+  icon: light.icon,
+  mode: 'system',
+  setMode: () => {},
+});
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const systemScheme = useColorScheme();
+  const [mode, setMode] = useState<ThemeMode>('system');
+
+  const resolvedTheme = useMemo<AppTheme>(() => {
+    if (mode === 'dark') return dark;
+    if (mode === 'light') return light;
+    return systemScheme === 'dark' ? dark : light;
+  }, [mode, systemScheme]);
+
+  const value = useMemo(
+    () => ({
+      theme: resolvedTheme,
+      mode,
+      setMode,
+      color: resolvedTheme.color,
+      icon: resolvedTheme.icon,
+    }),
+    [resolvedTheme, mode],
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+};
+
+export const useAppTheme = () => useContext(ThemeContext);

package/template/src/hooks/app/index.ts

@@ -0,0 +1,2 @@
+export { useGetProfile } from './useGetProfile';
+export { useUpdateProfile } from './useUpdateProfile';