@varunindiit/create-rn-starter 1.0.1

package/template/src/components/Common/SosSheet.tsx

@@ -0,0 +1,344 @@
+import React, { useCallback } from "react";
+import { Linking, StyleSheet, TouchableOpacity, View } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import BottomSheet from "../BottomSheet/BottomSheet";
+import RNButton from "../Button/RNButton";
+import RNText from "../Text/RNText";
+import {
+  CloseIcon,
+  PhoneIcon,
+  PlusIcon,
+  ShieldCheckIcon,
+  UserCircleIcon,
+} from "../Icon/SvgIcons";
+import { THEME } from "../../theme";
+import { useLanguage } from "../../localization";
+import { showToast } from "../../utils/functions";
+
+export interface EmergencyService {
+  id: string;
+  /** Localized display name. */
+  name: string;
+  /** Dialable number. */
+  number: string;
+  /** Accent color for the leading icon. */
+  color: string;
+  /** Soft background tint for the leading icon. */
+  tint: string;
+}
+
+export interface TrustedContact {
+  id: string;
+  name: string;
+  number: string;
+}
+
+interface SosSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  /** Emergency services list — falls back to local defaults when omitted. */
+  services?: EmergencyService[];
+  trustedContacts?: TrustedContact[];
+  /** Number dialed by the big primary CTA. Defaults to the universal 112. */
+  primaryNumber?: string;
+  onAddTrustedContact?: () => void;
+}
+
+const sanitize = (number: string) => number.replace(/[^\d+]/g, "");
+
+/**
+ * Premium emergency action sheet: emergency services with one-tap call,
+ * a trusted-contacts section and a prominent "call emergency" CTA.
+ * Reusable across screens — pass `services` / `trustedContacts` to customize.
+ */
+const SosSheet: React.FC<SosSheetProps> = ({
+  visible,
+  onClose,
+  services,
+  trustedContacts = [],
+  primaryNumber = "112",
+  onAddTrustedContact,
+}) => {
+  const { t } = useLanguage();
+
+  const defaultServices: EmergencyService[] = [
+    {
+      id: "police",
+      name: t("sos.police"),
+      number: "117",
+      color: THEME.danger,
+      tint: THEME.dangerLight,
+    },
+    {
+      id: "ambulance",
+      name: t("sos.ambulance"),
+      number: "119",
+      color: THEME.info,
+      tint: "#E8F1FF",
+    },
+    {
+      id: "fire",
+      name: t("sos.fire"),
+      number: "118",
+      color: THEME.warning,
+      tint: THEME.warningLight,
+    },
+  ];
+
+  const list = services ?? defaultServices;
+
+  const call = useCallback(
+    (number: string) => {
+      const url = `tel:${sanitize(number)}`;
+      Linking.openURL(url).catch(() => showToast(t("sos.callFailed"), "danger"));
+    },
+    [t],
+  );
+
+  return (
+    <BottomSheet visible={visible} onClose={onClose} contentStyle={styles.sheet}>
+      {/* Header */}
+      <View style={styles.headerRow}>
+        <View style={styles.headerBadge}>
+          <ShieldCheckIcon size={moderateScale(22)} color={THEME.textOnPrimary} />
+        </View>
+        <View style={styles.headerText}>
+          <RNText font="bold" size={18} color={THEME.text}>
+            {t("sos.title")}
+          </RNText>
+          <RNText size={12} color={THEME.textMuted} style={styles.headerSubtitle}>
+            {t("sos.subtitle")}
+          </RNText>
+        </View>
+        <TouchableOpacity
+          onPress={onClose}
+          hitSlop={10}
+          style={styles.closeBtn}
+          activeOpacity={0.7}
+        >
+          <CloseIcon size={moderateScale(18)} color={THEME.textMuted} />
+        </TouchableOpacity>
+      </View>
+
+      {/* Warning */}
+      <View style={styles.warning}>
+        <RNText size={12} color={THEME.danger} style={styles.warningText}>
+          {t("sos.warning")}
+        </RNText>
+      </View>
+
+      {/* Emergency services */}
+      <RNText font="semibold" size={13} color={THEME.text} style={styles.sectionLabel}>
+        {t("sos.emergencyServices")}
+      </RNText>
+      {list.map((s) => (
+        <View key={s.id} style={styles.row}>
+          <View style={[styles.rowIcon, { backgroundColor: s.tint }]}>
+            <PhoneIcon size={moderateScale(18)} color={s.color} />
+          </View>
+          <View style={styles.rowInfo}>
+            <RNText font="semibold" size={14} color={THEME.text}>
+              {s.name}
+            </RNText>
+            <RNText size={12} color={THEME.textMuted} style={styles.rowSub}>
+              {s.number}
+            </RNText>
+          </View>
+          <TouchableOpacity
+            onPress={() => call(s.number)}
+            activeOpacity={0.85}
+            style={styles.callPill}
+          >
+            <PhoneIcon size={moderateScale(14)} color={THEME.textOnPrimary} />
+            <RNText
+              font="semibold"
+              size={12}
+              color={THEME.textOnPrimary}
+              style={styles.callPillText}
+            >
+              {t("sos.call")}
+            </RNText>
+          </TouchableOpacity>
+        </View>
+      ))}
+
+      <View style={styles.divider} />
+
+      {/* Trusted contacts */}
+      <RNText font="semibold" size={13} color={THEME.text} style={styles.sectionLabel}>
+        {t("sos.trustedContacts")}
+      </RNText>
+      {trustedContacts.length > 0 ? (
+        trustedContacts.map((c) => (
+          <View key={c.id} style={styles.row}>
+            <View style={styles.trustedIcon}>
+              <UserCircleIcon size={moderateScale(22)} color={THEME.primary} />
+            </View>
+            <View style={styles.rowInfo}>
+              <RNText font="semibold" size={14} color={THEME.text}>
+                {c.name}
+              </RNText>
+              <RNText size={12} color={THEME.textMuted} style={styles.rowSub}>
+                {c.number}
+              </RNText>
+            </View>
+            <TouchableOpacity
+              onPress={() => call(c.number)}
+              activeOpacity={0.85}
+              style={styles.callPill}
+            >
+              <PhoneIcon size={moderateScale(14)} color={THEME.textOnPrimary} />
+              <RNText
+                font="semibold"
+                size={12}
+                color={THEME.textOnPrimary}
+                style={styles.callPillText}
+              >
+                {t("sos.call")}
+              </RNText>
+            </TouchableOpacity>
+          </View>
+        ))
+      ) : (
+        <RNText size={12} color={THEME.textMuted} style={styles.emptyTrusted}>
+          {t("sos.noTrustedContacts")}
+        </RNText>
+      )}
+
+      {/* <TouchableOpacity
+        onPress={onAddTrustedContact}
+        activeOpacity={0.8}
+        style={styles.addRow}
+      >
+        <View style={styles.addPlus}>
+          <PlusIcon size={moderateScale(15)} color={THEME.primary} />
+        </View>
+        <RNText font="semibold" size={13} color={THEME.primary}>
+          {t("sos.addTrustedContact")}
+        </RNText>
+      </TouchableOpacity> */}
+
+      {/* Primary CTA */}
+      <RNButton
+        title={t("sos.callEmergency", { number: primaryNumber })}
+        onPress={() => call(primaryNumber)}
+        containerStyle={styles.emergencyBtn}
+        leftIcon={
+          <PhoneIcon size={moderateScale(18)} color={THEME.textOnPrimary} />
+        }
+      />
+    </BottomSheet>
+  );
+};
+
+export default React.memo(SosSheet);
+
+const styles = StyleSheet.create({
+  sheet: {
+    paddingBottom: moderateScale(20),
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  headerBadge: {
+    width: moderateScale(44),
+    height: moderateScale(44),
+    borderRadius: moderateScale(22),
+    backgroundColor: THEME.danger,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  headerText: {
+    flex: 1,
+    marginLeft: moderateScale(12),
+  },
+  headerSubtitle: {
+    marginTop: moderateScale(2),
+  },
+  closeBtn: {
+    width: moderateScale(32),
+    height: moderateScale(32),
+    borderRadius: moderateScale(16),
+    backgroundColor: THEME.surfaceMuted,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  warning: {
+    backgroundColor: THEME.dangerLight,
+    borderRadius: moderateScale(12),
+    padding: moderateScale(12),
+    marginTop: moderateScale(16),
+  },
+  warningText: {
+    lineHeight: moderateScale(17),
+  },
+  sectionLabel: {
+    marginTop: moderateScale(20),
+    marginBottom: moderateScale(10),
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: moderateScale(8),
+  },
+  rowIcon: {
+    width: moderateScale(40),
+    height: moderateScale(40),
+    borderRadius: moderateScale(20),
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  trustedIcon: {
+    width: moderateScale(40),
+    height: moderateScale(40),
+    borderRadius: moderateScale(20),
+    backgroundColor: THEME.primaryFaint,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  rowInfo: {
+    flex: 1,
+    marginLeft: moderateScale(12),
+  },
+  rowSub: {
+    marginTop: moderateScale(2),
+  },
+  callPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: THEME.success,
+    paddingHorizontal: moderateScale(14),
+    paddingVertical: moderateScale(8),
+    borderRadius: moderateScale(999),
+  },
+  callPillText: {
+    marginLeft: moderateScale(6),
+  },
+  divider: {
+    height: 1,
+    backgroundColor: THEME.divider,
+    marginTop: moderateScale(14),
+  },
+  emptyTrusted: {
+    lineHeight: moderateScale(17),
+  },
+  addRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: moderateScale(12),
+  },
+  addPlus: {
+    width: moderateScale(26),
+    height: moderateScale(26),
+    borderRadius: moderateScale(13),
+    backgroundColor: THEME.primaryFaint,
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: moderateScale(8),
+  },
+  emergencyBtn: {
+    backgroundColor: THEME.danger,
+    marginTop: moderateScale(22),
+  },
+});

package/template/src/components/Common/StarRating.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { THEME } from "../../theme";
+
+interface StarRatingProps {
+  value: number;
+  total?: number;
+  size?: number;
+  spacing?: number;
+  onChange?: (n: number) => void;
+  color?: string;
+  inactiveColor?: string;
+  disabled?: boolean;
+}
+
+const Star = ({ size, color }: { size: number; color: string }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 2.5l2.97 6.02 6.65.97-4.81 4.69 1.14 6.62L12 17.77 6.05 20.8l1.14-6.62L2.38 9.49l6.65-.97L12 2.5Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+const StarRating: React.FC<StarRatingProps> = ({
+  value,
+  total = 5,
+  size = 20,
+  spacing = 4,
+  onChange,
+  color = THEME.star,
+  inactiveColor = THEME.unselectedStar,
+  disabled,
+}) => (
+  <View style={styles.row}>
+    {Array.from({ length: total }).map((_, i) => {
+      const active = i < value;
+      return (
+        <Pressable
+          key={i}
+          disabled={disabled || !onChange}
+          onPress={() => onChange?.(i + 1)}
+          style={{ marginRight: i === total - 1 ? 0 : spacing }}
+          hitSlop={6}
+        >
+          <Star size={size} color={active ? color : inactiveColor} />
+        </Pressable>
+      );
+    })}
+  </View>
+);
+
+export default StarRating;
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center" },
+});

package/template/src/components/Common/StatusBadge.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+type Tone = "success" | "warning" | "danger" | "info" | "primary";
+
+interface StatusBadgeProps {
+  label: string;
+  tone?: Tone;
+  dot?: boolean;
+}
+
+const PALETTE: Record<Tone, { bg: string; fg: string }> = {
+  success: { bg: THEME.successLight, fg: THEME.success },
+  warning: { bg: THEME.warningLight, fg: THEME.warning },
+  danger: { bg: THEME.dangerLight, fg: THEME.danger },
+  info: { bg: "#E6F0FF", fg: THEME.info },
+  primary: { bg: THEME.primaryFaint, fg: THEME.primary },
+};
+
+const StatusBadge: React.FC<StatusBadgeProps> = ({
+  label,
+  tone = "success",
+  dot,
+}) => {
+  const p = PALETTE[tone];
+  return (
+    <View style={[styles.badge, { backgroundColor: p.bg }]}>
+      {dot ? <View style={[styles.dot, { backgroundColor: p.fg }]} /> : null}
+      <RNText font="medium" size={11} color={p.fg}>
+        {label}
+      </RNText>
+    </View>
+  );
+};
+
+export default StatusBadge;
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: moderateScale(6),
+    paddingHorizontal: moderateScale(8),
+    paddingVertical: moderateScale(4),
+    borderRadius: SPACING.radiusPill,
+    alignSelf: "flex-start",
+  },
+  dot: {
+    width: moderateScale(6),
+    height: moderateScale(6),
+    borderRadius: moderateScale(3),
+  },
+});

package/template/src/components/Common/Toggle.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
+import { THEME } from "../../theme";
+
+interface ToggleProps {
+  value: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+}
+
+const Toggle: React.FC<ToggleProps> = ({ value, onChange, disabled }) => {
+  const tx = useSharedValue(value ? moderateScale(22) : 0);
+
+  useEffect(() => {
+    tx.value = withTiming(value ? moderateScale(22) : 0, {
+      duration: 160,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [tx, value]);
+
+  const thumb = useAnimatedStyle(() => ({
+    transform: [{ translateX: tx.value }],
+  }));
+
+  return (
+    <Pressable
+      disabled={disabled}
+      onPress={() => onChange(!value)}
+      hitSlop={6}
+      style={[
+        styles.track,
+        {
+          backgroundColor: value ? THEME.primary : "#E2D7CB",
+          opacity: disabled ? 0.4 : 1,
+        },
+      ]}
+    >
+      <Animated.View style={[styles.thumb, thumb]} />
+    </Pressable>
+  );
+};
+
+export default Toggle;
+
+const styles = StyleSheet.create({
+  track: {
+    width: moderateScale(48),
+    height: moderateScale(28),
+    borderRadius: moderateScale(14),
+    padding: moderateScale(3),
+    justifyContent: "center",
+  },
+  thumb: {
+    width: moderateScale(20),
+    height: moderateScale(20),
+    borderRadius: moderateScale(11),
+    backgroundColor: "#FFFFFF",
+  },
+});