@varunindiit/create-rn-starter 1.0.1

package/template/src/components/ImagePickerSheet/ImagePickerSheet.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import ImageCropPicker, {
+  Image as PickedImage,
+  Options,
+} from "react-native-image-crop-picker";
+import { moderateScale } from "react-native-size-matters";
+import { CameraIcon, GalleryIcon } from "../Icon/SvgIcons";
+import { SPACING, THEME } from "../../theme";
+import { showToast } from "../../utils/functions";
+import { useLanguage } from "../../localization";
+import BottomSheet from "../BottomSheet/BottomSheet";
+import RNText from "../Text/RNText";
+
+export interface ImagePickerSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  onPicked: (image: PickedImage) => void;
+  title?: string;
+  subtitle?: string;
+  cropping?: boolean;
+  circular?: boolean;
+  width?: number;
+  height?: number;
+  compressImageQuality?: number;
+}
+
+const ImagePickerSheet: React.FC<ImagePickerSheetProps> = ({
+  visible,
+  onClose,
+  onPicked,
+  title,
+  subtitle,
+  cropping = true,
+  circular = false,
+  width = 1200,
+  height = 1200,
+  compressImageQuality = 0.85,
+}) => {
+  const { t } = useLanguage();
+  const [busy, setBusy] = useState<"camera" | "gallery" | null>(null);
+
+  const titleText = title ?? t("imagePicker.updatePhoto");
+  const subtitleText = subtitle ?? t("imagePicker.subtitle");
+
+  const baseOptions: Options = useMemo(
+    () => ({
+      width,
+      height,
+      cropping,
+      cropperCircleOverlay: circular,
+      mediaType: "photo",
+      includeBase64: false,
+      compressImageQuality,
+      forceJpg: true,
+      cropperToolbarTitle: t("imagePicker.cropTitle"),
+      cropperActiveWidgetColor: THEME.primary,
+      cropperStatusBarLight: false,
+      cropperToolbarColor: THEME.background,
+      cropperToolbarWidgetColor: THEME.text,
+    }),
+    [width, height, cropping, circular, compressImageQuality, t],
+  );
+
+  const handleResult = useCallback(
+    (image: PickedImage) => {
+      onPicked(image);
+      onClose();
+    },
+    [onPicked, onClose],
+  );
+
+  const handleError = useCallback((err: any) => {
+    const code = err?.code ?? err?.message;
+    if (/cancel/i.test(String(code))) return;
+    if (
+      code === "E_NO_LIBRARY_PERMISSION" ||
+      code === "E_NO_CAMERA_PERMISSION"
+    ) {
+      showToast(t("imagePicker.permissionDenied"), "warning");
+      return;
+    }
+    showToast(t("common.somethingWrong"), "danger");
+  }, [t]);
+
+  const openCamera = useCallback(async () => {
+    if (busy) return;
+    setBusy("camera");
+    try {
+      const image = (await ImageCropPicker.openCamera(
+        baseOptions,
+      )) as PickedImage;
+      handleResult(image);
+    } catch (err) {
+      handleError(err);
+    } finally {
+      setBusy(null);
+    }
+  }, [busy, baseOptions, handleResult, handleError]);
+
+  const openGallery = useCallback(async () => {
+    if (busy) return;
+    setBusy("gallery");
+    try {
+      const image = (await ImageCropPicker.openPicker(
+        baseOptions,
+      )) as PickedImage;
+      handleResult(image);
+    } catch (err) {
+      handleError(err);
+    } finally {
+      setBusy(null);
+    }
+  }, [busy, baseOptions, handleResult, handleError]);
+
+  return (
+    <BottomSheet visible={visible} onClose={onClose}>
+      <RNText font="semibold" size={18} color={THEME.text}>
+        {titleText}
+      </RNText>
+      <RNText size={12} color={THEME.textMuted} style={styles.subtitle}>
+        {subtitleText}
+      </RNText>
+
+      <View style={styles.card}>
+        <Row
+          icon={
+            <CameraIcon size={moderateScale(20)} color={THEME.primary} />
+          }
+          label={t("imagePicker.openCamera")}
+          caption={t("imagePicker.openCameraCaption")}
+          onPress={openCamera}
+          disabled={!!busy}
+        />
+        <View style={styles.divider} />
+        <Row
+          icon={
+            <GalleryIcon size={moderateScale(20)} color={THEME.primary} />
+          }
+          label={t("imagePicker.chooseFromGallery")}
+          caption={t("imagePicker.galleryCaption")}
+          onPress={openGallery}
+          disabled={!!busy}
+        />
+      </View>
+
+      <Pressable onPress={onClose} style={styles.cancel}>
+        <RNText font="semibold" size={15} color={THEME.text}>
+          {t("common.cancel")}
+        </RNText>
+      </Pressable>
+    </BottomSheet>
+  );
+};
+
+const Row = ({
+  icon,
+  label,
+  caption,
+  onPress,
+  disabled,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  caption: string;
+  onPress: () => void;
+  disabled?: boolean;
+}) => (
+  <Pressable
+    onPress={onPress}
+    disabled={disabled}
+    style={[styles.row, disabled && styles.rowDisabled]}
+  >
+    <View style={styles.iconBubble}>{icon}</View>
+    <View style={styles.rowBody}>
+      <RNText font="semibold" size={14} color={THEME.text}>
+        {label}
+      </RNText>
+      <RNText size={11} color={THEME.textMuted} style={styles.caption}>
+        {caption}
+      </RNText>
+    </View>
+  </Pressable>
+);
+
+export default ImagePickerSheet;
+
+const styles = StyleSheet.create({
+  subtitle: { marginTop: moderateScale(4), marginBottom: SPACING.lg },
+  card: {
+    backgroundColor: THEME.backgroundAlt,
+    borderRadius: SPACING.radiusLg,
+    padding: moderateScale(6),
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: moderateScale(10),
+    paddingVertical: moderateScale(14),
+    gap: moderateScale(14),
+    borderRadius: SPACING.radiusMd,
+  },
+  rowDisabled: {
+    opacity: 0.5,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: THEME.divider,
+    marginHorizontal: moderateScale(10),
+  },
+  rowBody: {
+    flex: 1,
+  },
+  caption: {
+    marginTop: moderateScale(2),
+  },
+  iconBubble: {
+    width: moderateScale(40),
+    height: moderateScale(40),
+    borderRadius: moderateScale(12),
+    backgroundColor: THEME.primaryFaint,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cancel: {
+    marginTop: SPACING.md,
+    height: moderateScale(52),
+    borderRadius: SPACING.radiusPill,
+    backgroundColor: THEME.surfaceMuted,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/template/src/components/ImagePickerSheet/index.ts

@@ -0,0 +1,2 @@
+export { default as ImagePickerSheet } from "./ImagePickerSheet";
+export type { ImagePickerSheetProps } from "./ImagePickerSheet";

package/template/src/components/Input/CountryDropdown.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SIZES, SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+import { ChevronDownIcon } from "../Icon/SvgIcons";
+
+export interface CountryItem {
+  name: string;
+  code: string;
+  flag: string;
+}
+
+interface CountryDropdownProps {
+  value: CountryItem;
+  onPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  compact?: boolean;
+}
+
+const CountryDropdown: React.FC<CountryDropdownProps> = ({
+  value,
+  onPress,
+  containerStyle,
+  compact,
+}) => (
+  <TouchableOpacity
+    activeOpacity={0.85}
+    onPress={onPress}
+    style={[styles.container, containerStyle]}
+  >
+    <RNText size={18} style={styles.flag}>
+      {value.flag}
+    </RNText>
+    <RNText size={14} font="medium" color={THEME.text}>
+      {value.code}
+    </RNText>
+    <ChevronDownIcon size={moderateScale(14)} color={THEME.textMuted} />
+    {!compact && (
+      <View style={styles.spacer}>
+        <RNText size={14} color={THEME.text}>
+          {value.name}
+        </RNText>
+      </View>
+    )}
+  </TouchableOpacity>
+);
+
+export default CountryDropdown;
+
+const styles = StyleSheet.create({
+  container: {
+    height: SIZES.inputHeight,
+    borderRadius: SPACING.radiusMd,
+    borderWidth: 1,
+    borderColor: THEME.inputBorder,
+    backgroundColor: THEME.surface,
+    paddingHorizontal: moderateScale(12),
+    flexDirection: "row",
+    alignItems: "center",
+    gap: moderateScale(6),
+  },
+  flag: { fontSize: moderateScale(18) },
+  spacer: { flex: 1, marginLeft: moderateScale(6) },
+});

package/template/src/components/Input/OtpInput.tsx

@@ -0,0 +1,117 @@
+import React, { useRef, useState } from "react";
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  TextInputKeyPressEventData,
+  View,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { FONTS, THEME } from "../../theme";
+
+interface OtpInputProps {
+  length?: number;
+  value: string;
+  onChange: (val: string) => void;
+  autoFocus?: boolean;
+  placeholder?: string;
+  cellSize?: number;
+}
+
+const OtpInput: React.FC<OtpInputProps> = ({
+  length = 4,
+  value,
+  onChange,
+  autoFocus = false,
+  placeholder = "",
+  cellSize,
+}) => {
+  const inputs = useRef<Array<TextInput | null>>([]);
+  const [focusIndex, setFocusIndex] = useState(autoFocus ? 0 : -1);
+
+  const setCharAt = (i: number, c: string) => {
+    const next = value.split("");
+    while (next.length < length) next.push("");
+    next[i] = c;
+    onChange(next.slice(0, length).join(""));
+  };
+
+  const handleChange = (text: string, index: number) => {
+    if (text.length > 1) {
+      const chars = text.replace(/\s/g, "").split("").slice(0, length);
+      onChange(chars.join("").padEnd(length, "").slice(0, length).trim());
+      const next = Math.min(chars.length, length - 1);
+      inputs.current[next]?.focus();
+      return;
+    }
+    setCharAt(index, text);
+    if (text && index < length - 1) inputs.current[index + 1]?.focus();
+  };
+
+  const handleKeyPress = (
+    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number,
+  ) => {
+    if (e.nativeEvent.key === "Backspace" && !value[index] && index > 0) {
+      inputs.current[index - 1]?.focus();
+      setCharAt(index - 1, "");
+    }
+  };
+
+  return (
+    <View style={styles.row}>
+      {Array.from({ length }).map((_, i) => {
+        const char = value[i] ?? "";
+        const active = focusIndex === i;
+        return (
+          <TextInput
+            allowFontScaling={false}
+            key={i}
+            ref={(r) => {
+              inputs.current[i] = r;
+            }}
+            value={char}
+            onChangeText={(t) => handleChange(t, i)}
+            onKeyPress={(e) => handleKeyPress(e, i)}
+            onFocus={() => setFocusIndex(i)}
+            onBlur={() => setFocusIndex(-1)}
+            keyboardType="number-pad"
+            maxLength={1}
+            autoFocus={autoFocus && i === 0}
+            placeholder={placeholder}
+            style={[
+              styles.cell,
+              cellSize
+                ? { width: cellSize, height: cellSize }
+                : null,
+              { borderColor: active ? THEME.primary : THEME.inputBorder },
+            ]}
+            selectionColor={THEME.primary}
+            placeholderTextColor={THEME.textPlaceholder}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default OtpInput;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    gap: moderateScale(12),
+  },
+  cell: {
+    flex: 1,
+    height: moderateScale(60),
+    borderRadius: moderateScale(20),
+    borderWidth: 1,
+    backgroundColor: THEME.surface,
+    textAlign: "center",
+    color: THEME.text,
+    fontFamily: FONTS.regular,
+    fontWeight: "400",
+    fontSize: moderateScale(14, 0.3),
+  },
+});

package/template/src/components/Input/RNInput.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useState } from "react";
+import {
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { FONTS, SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+import { EyeIcon, EyeOffIcon } from "../Icon/SvgIcons";
+
+interface RNInputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  secure?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onPressRightIcon?: () => void;
+  focusedBorderColor?: string;
+}
+
+const RNInput: React.FC<RNInputProps> = ({
+  label,
+  error,
+  secure = false,
+  containerStyle,
+  inputContainerStyle,
+  leftIcon,
+  rightIcon,
+  onPressRightIcon,
+  focusedBorderColor = THEME.primary,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const [secureVisible, setSecureVisible] = useState(false);
+  const [focused, setFocused] = useState(false);
+
+  const toggleSecure = useCallback(() => setSecureVisible((v) => !v), []);
+
+  const right = secure ? (
+    <TouchableOpacity onPress={toggleSecure} hitSlop={10}>
+      {secureVisible ? (
+        <EyeIcon color={THEME.textMuted} />
+      ) : (
+        <EyeOffIcon color={THEME.textMuted} />
+      )}
+    </TouchableOpacity>
+  ) : rightIcon ? (
+    <TouchableOpacity
+      onPress={onPressRightIcon}
+      hitSlop={10}
+      disabled={!onPressRightIcon}
+    >
+      {rightIcon}
+    </TouchableOpacity>
+  ) : null;
+
+  return (
+    <View style={[styles.wrap, containerStyle]}>
+      {label ? (
+        <RNText size={13} color={THEME.textSecondary} font="medium" style={styles.label}>
+          {label}
+        </RNText>
+      ) : null}
+      <View
+        style={[
+          styles.inputContainer,
+          {
+            borderColor: error
+              ? THEME.danger
+              : focused
+              ? focusedBorderColor
+              : THEME.border,
+          },
+          inputContainerStyle,
+        ]}
+      >
+        {leftIcon ? <View style={styles.left}>{leftIcon}</View> : null}
+        <TextInput
+          allowFontScaling={false}
+          {...rest}
+          onFocus={(e) => {
+            setFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setFocused(false);
+            onBlur?.(e);
+          }}
+          placeholderTextColor={THEME.textPlaceholder}
+          secureTextEntry={secure && !secureVisible}
+          style={[styles.input, style]}
+        />
+        {right ? <View style={styles.right}>{right}</View> : null}
+      </View>
+      {error ? (
+        <RNText size={11} color={THEME.danger} style={styles.errorText}>
+          {error}
+        </RNText>
+      ) : null}
+    </View>
+  );
+};
+
+export default React.memo(RNInput);
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%" },
+  label: { marginBottom: moderateScale(6) },
+  inputContainer: {
+    height: moderateScale(50),
+    paddingHorizontal: moderateScale(18),
+    borderRadius: SPACING.radiusPill,
+    borderWidth: 1,
+    borderColor: THEME.border,
+    backgroundColor: THEME.surface,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  input: {
+    flex: 1,
+    color: THEME.text,
+    fontFamily: FONTS.regular,
+    fontSize: moderateScale(14, 0.3),
+    paddingVertical: 0,
+  },
+  left: { marginRight: moderateScale(10) },
+  right: { marginLeft: moderateScale(10) },
+  errorText: { marginTop: moderateScale(6) },
+});

package/template/src/components/Input/index.ts

@@ -0,0 +1,4 @@
+export { default as RNInput } from "./RNInput";
+export { default as OtpInput } from "./OtpInput";
+export { default as CountryDropdown } from "./CountryDropdown";
+export type { CountryItem } from "./CountryDropdown";