@varunindiit/create-rn-starter 1.0.1

package/template/src/theme/spacing.ts

@@ -0,0 +1,66 @@
+import { Dimensions } from "react-native";
+import { moderateScale, scale, verticalScale } from "react-native-size-matters";
+
+const { width, height } = Dimensions.get("window");
+
+export const SCREEN = { width, height };
+
+/** Margin / padding scale */
+export const SPACING = {
+  xxs: moderateScale(2),
+  xs: moderateScale(4),
+  sm: moderateScale(8),
+  md: moderateScale(12),
+  base: moderateScale(14),
+  lg: moderateScale(16),
+  xl: moderateScale(20),
+  xxl: moderateScale(24),
+  xxxl: moderateScale(32),
+  huge: moderateScale(40),
+
+  hPadding: scale(20),
+  vPadding: verticalScale(20),
+
+  radiusXs: moderateScale(4),
+  radiusSm: moderateScale(8),
+  radiusMd: moderateScale(12),
+  radiusLg: moderateScale(16),
+  radiusXl: moderateScale(20),
+  radiusXxl: moderateScale(28),
+  radiusPill: moderateScale(999),
+};
+
+export const SIZES = {
+  buttonHeight: moderateScale(52),
+  buttonHeightSm: moderateScale(40),
+  inputHeight: moderateScale(54),
+  iconXs: moderateScale(12),
+  iconSm: moderateScale(14),
+  iconMd: moderateScale(18),
+  iconLg: moderateScale(22),
+  iconXl: moderateScale(28),
+  iconXxl: moderateScale(34),
+  avatarSm: moderateScale(36),
+  avatar: moderateScale(48),
+  avatarLg: moderateScale(64),
+  circleBtn: moderateScale(40),
+  tabBarHeight: moderateScale(64),
+  headerHeight: moderateScale(50),
+};
+
+export const FONT_SIZE = {
+  xxs: moderateScale(10),
+  xs: moderateScale(11),
+  sm: moderateScale(12),
+  md: moderateScale(13),
+  base: moderateScale(14),
+  lg: moderateScale(15),
+  xl: moderateScale(16),
+  xxl: moderateScale(18),
+  h6: moderateScale(20),
+  h5: moderateScale(22),
+  h4: moderateScale(24),
+  h3: moderateScale(28),
+  h2: moderateScale(32),
+  h1: moderateScale(40),
+};

package/template/src/theme/theme.ts

@@ -0,0 +1,58 @@
+/**
+ * HD WAKA — design tokens
+ * Brand: warm orange on cream/peach. Cards are white with subtle shadows.
+ */
+export const COLORS = {
+  // Brand
+  primary: "rgba(232, 124, 62, 1)",
+  primaryDark: "rgba(196, 82, 26, 1)",
+  primaryLight: "#FCE4D2",
+  primaryFaint: "#FFF3EA",
+
+  // Backgrounds
+  background: "#FBE9D6",
+  backgroundAlt: "#FFF6EC",
+  surface: "rgba(255, 251, 249, 1)",
+  surfaceMuted: "#FAF7F4",
+  overlay: "rgba(0,0,0,0.45)",
+  labelBrown: "rgba(122, 90, 58, 1)",
+
+  // Text
+  text: "rgba(44, 26, 14, 1)",
+  textSecondary: "#5C5C5C",
+  textMuted: "#9A9A9A",
+  textPlaceholder: "#BDBDBD",
+  textOnPrimary: "#FFFFFF",
+
+  // Borders / Lines
+  border: "#F2DDC8",
+  divider: "#F0EAE3",
+  inputBorder: "#EADFD2",
+
+  // Status
+  success: "#1FA971",
+  successLight: "#E7F8F0",
+  warning: "#F4B400",
+  warningLight: "#FFF6DA",
+  danger: "#E5484D",
+  dangerLight: "#FDECEC",
+  info: "#2D7FF9",
+
+  // Misc
+  star: "#F4B400",
+  unselectedStar: "#E5DAC9",
+  shadow: "rgba(28, 22, 14, 0.10)",
+  greenDot: "#1FA971",
+  redDot: "#E5484D",
+
+  // Tab bar
+  tabActive: "#F26B2A",
+  tabInactive: "#9A9A9A",
+  tabBg: "#FFFFFF",
+};
+
+export const THEME = {
+  ...COLORS,
+};
+
+export type ThemeType = typeof THEME;

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

@@ -0,0 +1,8 @@
+declare module '@env' {
+  export const REACT_APP_ENV: string;
+  export const REACT_APP_VERSION: string;
+  export const REACT_APP_API: string;
+  export const REACT_APP_DOMAIN: string;
+  export const REACT_APP_SOCKET: string;
+  export const STRIPE_PUBLISHED_KEY: string;
+}

package/template/src/types/index.ts

@@ -0,0 +1,3 @@
+export interface Identifiable {
+  id: string;
+}

package/template/src/utils/card.ts

@@ -0,0 +1,101 @@
+/**
+ * Card helpers — brand detection, formatting and validation for the
+ * payment-method flow. Pure functions, no UI / native deps.
+ */
+
+export type CardBrand =
+  | "visa"
+  | "mastercard"
+  | "amex"
+  | "discover"
+  | "card";
+
+/** Human label for a brand, used as the card "type" in the UI. */
+export const CARD_BRAND_LABEL: Record<CardBrand, string> = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "Amex",
+  discover: "Discover",
+  card: "Card",
+};
+
+/** Strip everything that is not a digit. */
+export const onlyDigits = (value: string) => value.replace(/\D/g, "");
+
+/** Detect the card brand from the (partial) card number. */
+export const detectBrand = (rawNumber: string): CardBrand => {
+  const n = onlyDigits(rawNumber);
+  if (/^4/.test(n)) return "visa";
+  if (/^(5[1-5]|2[2-7])/.test(n)) return "mastercard";
+  if (/^3[47]/.test(n)) return "amex";
+  if (/^(6011|65|64[4-9])/.test(n)) return "discover";
+  return "card";
+};
+
+/** Amex uses 15 digits, everyone else 16. */
+export const brandMaxDigits = (brand: CardBrand) =>
+  brand === "amex" ? 15 : 16;
+
+/** CVV length per brand (Amex = 4). */
+export const brandCvvLength = (brand: CardBrand) =>
+  brand === "amex" ? 4 : 3;
+
+/**
+ * Format a card number with spaces for display / input.
+ * Amex groups as 4-6-5, all others as 4-4-4-4.
+ */
+export const formatCardNumber = (rawNumber: string): string => {
+  const brand = detectBrand(rawNumber);
+  const digits = onlyDigits(rawNumber).slice(0, brandMaxDigits(brand));
+  const groups = brand === "amex" ? [4, 6, 5] : [4, 4, 4, 4];
+
+  const parts: string[] = [];
+  let index = 0;
+  for (const size of groups) {
+    if (index >= digits.length) break;
+    parts.push(digits.slice(index, index + size));
+    index += size;
+  }
+  return parts.join(" ");
+};
+
+/** Format expiry input into `MM/YY`. */
+export const formatExpiry = (raw: string): string => {
+  const digits = onlyDigits(raw).slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+};
+
+/** Last 4 digits of a (possibly formatted) card number. */
+export const lastFour = (rawNumber: string) =>
+  onlyDigits(rawNumber).slice(-4);
+
+/** Luhn checksum — true when the number is structurally valid. */
+export const isLuhnValid = (rawNumber: string): boolean => {
+  const digits = onlyDigits(rawNumber);
+  if (digits.length < 12) return false;
+  let sum = 0;
+  let double = false;
+  for (let i = digits.length - 1; i >= 0; i -= 1) {
+    let d = parseInt(digits[i], 10);
+    if (double) {
+      d *= 2;
+      if (d > 9) d -= 9;
+    }
+    sum += d;
+    double = !double;
+  }
+  return sum % 10 === 0;
+};
+
+/** Validate `MM/YY` — real month, not in the past. */
+export const isExpiryValid = (expiry: string): boolean => {
+  const digits = onlyDigits(expiry);
+  if (digits.length !== 4) return false;
+  const month = parseInt(digits.slice(0, 2), 10);
+  const year = 2000 + parseInt(digits.slice(2), 10);
+  if (month < 1 || month > 12) return false;
+  const now = new Date();
+  const endOfMonth = new Date(year, month, 0, 23, 59, 59);
+  return endOfMonth >= now;
+};

package/template/src/utils/constants.ts

@@ -0,0 +1,39 @@
+import { Dimensions } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+
+const { width, height } = Dimensions.get("screen");
+
+/** Persistence keys (MMKV) */
+export const IS_LOGGED_IN = "isLoggedIn";
+export const ROLE_KEY = "userRole";
+export const TOKEN_KEY = "authToken";
+export const REFRESH_TOKEN_KEY = "refreshToken";
+export const LANGUAGE_KEY = "appLanguage";
+export const LANGUAGE_SELECTED_KEY = "languageSelected";
+
+export const SCREEN_DIM = {
+  width,
+  height,
+  paddingHorizontal: moderateScale(20),
+};
+
+export { FONTS } from "../theme/fonts";
+export { THEME as COLORS } from "../theme/theme";
+
+/** Static dropdown / picker data used across the app */
+export const VEHICLE_BRANDS = [
+  "Toyota",
+  "Mercedes-Benz",
+  "Honda",
+  "Hyundai",
+  "Kia",
+  "Nissan",
+  "Suzuki",
+  "Peugeot",
+];
+
+export const GENDERS = ["Male", "Female", "Other"] as const;
+
+export const LUGGAGE = ["Small", "Medium", "Large"] as const;
+export const MUSIC_LEVELS = ["Any", "No Music", "Low", "Mixed"] as const;
+export const CONVERSATION_LEVELS = ["Quiet", "Depends", "Talkative"] as const;

package/template/src/utils/functions.ts

@@ -0,0 +1,24 @@
+import { showMessage, MessageType } from "react-native-flash-message";
+import { FONTS } from "../theme";
+
+export const showToast = (
+  message: string,
+  type: MessageType = "info",
+  duration: number = 2000,
+) => {
+  showMessage({
+    message,
+    type,
+    icon: type,
+    floating: true,
+    style: { alignItems: "center" },
+    duration,
+    titleStyle: { fontFamily: FONTS.medium, fontWeight: "500" },
+  });
+};
+
+export const pad2 = (n: number) => n.toString().padStart(2, "0");
+
+/** Format a price like 4400 -> "4,400" */
+export const formatNumber = (n?: number) =>
+  (n ?? 0).toLocaleString(undefined, { maximumFractionDigits: 0 });

package/template/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@react-native/typescript-config",
+  "compilerOptions": {
+    "types": ["jest"]
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["**/node_modules", "**/Pods"]
+}