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

package/template/src/components/shared/AppImage.tsx

@@ -0,0 +1,190 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import FastImage, {
+  FastImageProps,
+  OnErrorEvent,
+  type ImageStyle as FastImageStyle,
+} from '@d11/react-native-fast-image';
+import {
+  ActivityIndicator,
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { IconName } from '@/assets/icons';
+import { GlobalImage } from '@/assets/images';
+import CustomText from '@/components/shared/text/CustomText';
+import Icon from '@/components/shared/Icon';
+import { useAppTheme } from '@/context/ThemeContext';
+import { getInitials } from '@/utils/getInitials';
+
+interface AppImageProps extends Omit<FastImageProps, 'style' | 'source'> {
+  showLoader?: boolean;
+  /** Applied to the outer View wrapper, not FastImage itself. */
+  style?: StyleProp<ViewStyle>;
+  source?: FastImageProps['source'];
+  /** When present and loads successfully → show image. */
+  imageUrl?: string | null;
+  /** When provided (and no image / image error, and no icon) → initials. */
+  name?: string | null;
+  /** When provided (and no image / image error) → icon. */
+  icon?: IconName;
+  iconSize?: number;
+  iconStyle?: StyleProp<ViewStyle>;
+  /** Last fallback when no image, icon, or name. */
+  placeholder?: FastImageProps['source'];
+}
+
+const FILL = StyleSheet.absoluteFill as FastImageStyle;
+
+const hasImageUrl = (url?: string | null) => !!url?.trim();
+
+const AppImage = memo(
+  ({
+    resizeMode = FastImage.resizeMode.contain,
+    showLoader = false,
+    style,
+    onLoadStart,
+    onLoadEnd,
+    onError,
+    source,
+    imageUrl,
+    name,
+    icon,
+    iconSize = 24,
+    iconStyle,
+    placeholder = GlobalImage.profilePlaceholder,
+    ...rest
+  }: AppImageProps) => {
+    const { color } = useAppTheme();
+    const [loading, setLoading] = useState(false);
+    const [failedSource, setFailedSource] =
+      useState<FastImageProps['source']>(undefined);
+
+    const initials = useMemo(() => getInitials(name), [name]);
+
+    const resolvedSource = useMemo(() => {
+      if (hasImageUrl(imageUrl)) {
+        return { uri: imageUrl!.trim() };
+      }
+      return source;
+    }, [imageUrl, source]);
+
+    const hasError =
+      failedSource !== undefined &&
+      JSON.stringify(failedSource) === JSON.stringify(resolvedSource);
+
+    const canShowImage = !!resolvedSource && !hasError;
+
+    const handleLoadStart = useCallback(() => {
+      setLoading(true);
+      onLoadStart?.();
+    }, [onLoadStart]);
+
+    const handleLoadEnd = useCallback(() => {
+      setLoading(false);
+      onLoadEnd?.();
+    }, [onLoadEnd]);
+
+    const handleError = useCallback(
+      (event: OnErrorEvent) => {
+        setLoading(false);
+        setFailedSource(resolvedSource);
+        onError?.(event);
+      },
+      [onError, resolvedSource],
+    );
+
+    if (canShowImage) {
+      return (
+        <View style={[styles.container, style]}>
+          {showLoader && loading && (
+            <View style={styles.loader}>
+              <ActivityIndicator />
+            </View>
+          )}
+
+          <FastImage
+            {...rest}
+            style={FILL}
+            resizeMode={resizeMode}
+            source={resolvedSource}
+            onLoadStart={handleLoadStart}
+            onLoadEnd={handleLoadEnd}
+            onError={handleError}
+          />
+        </View>
+      );
+    }
+
+    if (icon) {
+      return (
+        <View style={[styles.container, styles.iconContainer, style]}>
+          <Icon
+            name={icon}
+            width={iconSize}
+            height={iconSize}
+            style={iconStyle}
+          />
+        </View>
+      );
+    }
+
+    if (initials) {
+      return (
+        <View
+          style={[
+            styles.container,
+            styles.initialsContainer,
+            { backgroundColor: color.primary },
+            style,
+          ]}
+        >
+          <CustomText
+            variant="title"
+            weight="700"
+            textColor={color.text_default}
+            style={styles.initialsText}
+          >
+            {initials}
+          </CustomText>
+        </View>
+      );
+    }
+
+    return (
+      <View style={[styles.container, style]}>
+        <FastImage
+          {...rest}
+          style={FILL}
+          resizeMode={resizeMode}
+          source={placeholder}
+        />
+      </View>
+    );
+  },
+);
+
+export default AppImage;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  initialsContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  initialsText: {
+    marginBottom: 0,
+  },
+  loader: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/template/src/components/shared/AvatarPicker.tsx

@@ -0,0 +1,175 @@
+import React, { useState, useCallback, useEffect, useRef, memo } from 'react';
+import { Pressable, StyleSheet, View, ViewStyle } from 'react-native';
+import AppImage from './AppImage';
+import { GlobalImage } from '@/assets/images';
+import Icon from './Icon';
+import { useAppTheme } from '@/context/ThemeContext';
+import { isIOS } from '@/constants/device';
+import { useImagePicker } from '@/hooks/useImagePicker';
+import ImagePickerSheet from './bottom-sheet/sheets/ImagePickerSheet';
+import { BSRef } from './bottom-sheet/types';
+import BaseSkelton from './skelton/BaseSkelton';
+import { avatarPickerLayout } from './skelton/layouts';
+
+type SourceType = 'gallery' | 'camera' | 'both';
+
+interface Props {
+  imageUrl?: string;
+  defaultImage?: any;
+  width?: number;
+  height?: number;
+  alignSelf?: ViewStyle['alignSelf'];
+  containerStyle?: ViewStyle;
+  editable?: boolean;
+  editIconSize?: number;
+  isLoading?: boolean;
+
+  source?: SourceType;
+  maxSize?: number;
+  quality?: number;
+  onImageChange?: (image: string) => void;
+}
+
+const AvatarPicker = ({
+  imageUrl,
+  defaultImage = GlobalImage.profilePlaceholder,
+  width = 100,
+  height = 100,
+  alignSelf = 'center',
+  containerStyle,
+  editable = false,
+  editIconSize = 28,
+  isLoading,
+  source = 'both',
+  maxSize = 256,
+  quality = 80,
+  onImageChange,
+}: Props) => {
+  const { color } = useAppTheme();
+  const { captureFromCamera, images, pickFromGallery } = useImagePicker({
+    maxSize,
+    quality,
+  });
+  const [localImageUri, setLocalImageUri] = useState<string | undefined>(
+    imageUrl,
+  );
+  const imageSource = localImageUri ? { uri: localImageUri } : defaultImage;
+  const sheetRef = useRef<BSRef>(null);
+
+  useEffect(() => {
+    if (images?.length > 0) {
+      const image = images[0];
+
+      setLocalImageUri(image.uri);
+      onImageChange?.(image.uri);
+    }
+  }, [images, onImageChange]);
+
+  useEffect(() => {
+    setLocalImageUri(imageUrl);
+  }, [imageUrl]);
+
+  const dynamicContainerStyle: ViewStyle = {
+    width,
+    height,
+    borderRadius: width / 2,
+    alignSelf,
+  };
+
+  // Main press handler
+  const handleEditPress = useCallback(() => {
+    if (source === 'both') {
+      sheetRef.current?.open();
+    } else if (source === 'camera') {
+      captureFromCamera();
+    } else {
+      pickFromGallery();
+    }
+  }, [source, captureFromCamera, pickFromGallery]);
+
+  return (
+    <>
+      <BaseSkelton
+        isLoading={isLoading}
+        layout={avatarPickerLayout({
+          size: width,
+        })}
+        containerStyle={[
+          styles.container,
+          dynamicContainerStyle,
+          containerStyle,
+        ]}
+      >
+        <View
+          style={[
+            styles.imageContainer,
+            { borderRadius: width / 2, borderColor: color.border },
+          ]}
+        >
+          <AppImage
+            source={imageSource}
+            style={styles.image}
+            resizeMode="cover"
+          />
+        </View>
+
+        {editable && (
+          <Pressable
+            onPress={handleEditPress}
+            style={({ pressed }) => [
+              styles.editIconContainer,
+              pressed && isIOS && { opacity: 0.7 },
+              {
+                width: editIconSize,
+                height: editIconSize,
+                borderRadius: editIconSize / 2,
+                backgroundColor: color.primary,
+                borderColor: color.background_secondary,
+              },
+            ]}
+            android_ripple={{
+              color: 'rgba(255,255,255,0.2)',
+              borderless: true,
+              foreground: true,
+            }}
+          >
+            <Icon name="edit" size={14} />
+          </Pressable>
+        )}
+      </BaseSkelton>
+      <ImagePickerSheet
+        ref={sheetRef}
+        onCamera={captureFromCamera}
+        onGallery={pickFromGallery}
+      />
+    </>
+  );
+};
+
+export default memo(AvatarPicker);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 16,
+  },
+  imageContainer: {
+    overflow: 'hidden',
+    width: '100%',
+    height: '100%',
+    borderWidth: 0.5,
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  editIconContainer: {
+    position: 'absolute',
+    bottom: 2,
+    right: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 3,
+    borderWidth: 2,
+    overflow: 'hidden',
+  },
+});

package/template/src/components/shared/CustomButton.tsx

@@ -0,0 +1,273 @@
+import { useNetwork } from '@/context/NetworkContext';
+import { useAppTheme } from '@/context/ThemeContext';
+import { ErrorToast } from '@/services/toast';
+import Haptics from '@mhpdev/react-native-haptics';
+import React, { memo, useRef, useCallback, ReactNode, useMemo } from 'react';
+import {
+  Pressable,
+  View,
+  ActivityIndicator,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import { useTranslation } from 'react-i18next';
+import CustomText from './text/CustomText';
+import { normalize } from '@/utils/normalize';
+import { isHindiLanguage } from '@/utils/hindiText';
+import { isIOS } from '@/constants/device';
+import Icon from './Icon';
+import { IconName } from '@/assets/icons';
+import type { FontWeight, TextVariant } from '@/theme/typography';
+
+/* ───────────────── Types ───────────────── */
+
+type Variant = 'primary' | 'outline' | 'danger' | 'ghost';
+type Align = 'left' | 'center' | 'right';
+type HapticType = 'light' | 'medium' | 'heavy' | 'soft' | 'rigid';
+
+export interface AppButtonProps {
+  title?: string;
+  onPress?: () => Promise<void> | void;
+  onLongPress?: () => void;
+
+  variant?: Variant;
+  overrideVariantColor?: string;
+  overrideVariantTextColor?: string;
+
+  disabled?: boolean;
+  loading?: boolean;
+  /** Blocks the press while offline and shows a toast (use for API actions). */
+  requiresNetwork?: boolean;
+
+  align?: Align;
+  fullWidth?: boolean;
+
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  iconSize?: number;
+
+  haptic?: HapticType;
+
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  textVariant?: TextVariant;
+  textWeight?: FontWeight;
+
+  backgroundColor?: string;
+  borderRadius?: number;
+
+  children?: ReactNode;
+}
+
+const CustomButton = ({
+  title,
+  onPress,
+  onLongPress,
+
+  variant = 'primary',
+  overrideVariantColor,
+  overrideVariantTextColor,
+
+  disabled = false,
+  loading = false,
+  requiresNetwork = false,
+
+  align = 'center',
+  fullWidth = false,
+
+  leftIcon,
+  rightIcon,
+  iconSize = 18,
+
+  haptic = 'light',
+
+  backgroundColor,
+  borderRadius = 16,
+
+  containerStyle,
+  textStyle,
+  textVariant = 'button',
+  textWeight = '600',
+  children,
+}: AppButtonProps) => {
+  const pressLock = useRef(false);
+  const { color } = useAppTheme();
+  const { t, i18n } = useTranslation();
+  const isHindi = isHindiLanguage(i18n.language);
+  const { isOffline } = useNetwork();
+  const isNetworkBlocked = requiresNetwork && isOffline;
+
+  const handlePress = useCallback(async () => {
+    if (pressLock.current || disabled || loading) return;
+
+    if (isNetworkBlocked) {
+      ErrorToast({
+        title: t('network.unavailableTitle'),
+        message: t('network.unavailableMessage'),
+      });
+      return;
+    }
+
+    pressLock.current = true;
+    try {
+      Haptics.impact(haptic);
+      await onPress?.();
+    } finally {
+      pressLock.current = false;
+    }
+  }, [isNetworkBlocked, disabled, loading, onPress, haptic, t]);
+
+  const alignSelf: ViewStyle['alignSelf'] =
+    align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center';
+
+  const isIconOnly = !title && !children && !!(leftIcon || rightIcon);
+
+  const variantButtonStyle = useMemo(
+    () => ({
+      primary: { backgroundColor: overrideVariantColor || color.primary },
+      danger: { backgroundColor: overrideVariantColor || color.danger },
+      outline: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderColor: overrideVariantColor || color.primary,
+      },
+      ghost: {
+        backgroundColor: overrideVariantColor || 'transparent',
+      },
+    }),
+    [color, overrideVariantColor],
+  );
+
+  const variantTextStyle = useMemo(
+    () => ({
+      primary: { color: overrideVariantTextColor || color.text_default },
+      danger: { color: overrideVariantTextColor || color.text_default },
+      outline: { color: overrideVariantTextColor || color.primary },
+      ghost: { color: color.primary },
+    }),
+    [color, overrideVariantTextColor],
+  );
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      onLongPress={onLongPress}
+      disabled={disabled || loading}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading, busy: loading }}
+      style={({ pressed }) => [
+        buttonStyles.base,
+        isHindi && buttonStyles.baseHindi,
+        variantButtonStyle[variant],
+        fullWidth && buttonStyles.fullWidth,
+        disabled && buttonStyles.disabled,
+        pressed && isIOS && buttonStyles.pressedIOS,
+        pressed && !isIOS && buttonStyles.pressedAndroid,
+        { alignSelf },
+        backgroundColor && { backgroundColor },
+        { borderRadius },
+        containerStyle,
+      ]}
+      android_ripple={{
+        color: 'rgba(255,255,255,0.2)',
+        borderless: true,
+        foreground: true,
+      }}
+    >
+      {isIconOnly ? (
+        <Icon name={(leftIcon || rightIcon)!} size={iconSize} />
+      ) : (
+        <>
+          {leftIcon && (
+            <View style={fullWidth && buttonStyles.leftIcon}>
+              <Icon name={leftIcon} size={iconSize} />
+            </View>
+          )}
+          <View style={buttonStyles.content}>
+            {title ? (
+              <CustomText
+                style={[
+                  buttonStyles.title,
+                  loading && buttonStyles.hidden,
+                  variantTextStyle[variant],
+                  textStyle,
+                ]}
+                variant={textVariant}
+                weight={textWeight}
+                numberOfLines={1}
+              >
+                {title}
+              </CustomText>
+            ) : (
+              children
+            )}
+          </View>
+          {rightIcon && (
+            <View style={fullWidth && buttonStyles.rightIcon}>
+              <Icon name={rightIcon} size={iconSize} />
+            </View>
+          )}
+        </>
+      )}
+
+      {loading && (
+        <View style={buttonStyles.loader}>
+          <ActivityIndicator color={variantTextStyle[variant].color} />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export default memo(CustomButton);
+
+const buttonStyles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: 12,
+    minHeight: normalize(46),
+    gap: 8,
+  },
+  /** Extra vertical room for Devanagari matras inside overflow:hidden. */
+  baseHindi: {
+    paddingVertical: 14,
+    minHeight: normalize(50),
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  disabled: {
+    opacity: 0.8,
+  },
+  pressedIOS: {
+    opacity: 0.9,
+    transform: [{ scale: 0.94 }],
+  },
+  pressedAndroid: {
+    opacity: 0.9,
+    transform: [{ scale: 0.96 }],
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  title: {
+    flexShrink: 0,
+  },
+  loader: {
+    ...StyleSheet.absoluteFill,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  hidden: {
+    opacity: 0,
+  },
+  leftIcon: { position: 'absolute', left: 14 },
+  rightIcon: { position: 'absolute', right: 14 },
+});