@varunindiit/create-rn-starter 1.0.1

package/template/src/screen/shared/profile/ProfileParts.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { moderateScale } from 'react-native-size-matters';
+import Svg, { Circle, Path } from 'react-native-svg';
+import { RNText } from '../../../components';
+import { THEME } from '../../../theme';
+import ChevronRightIcon from '../../../assets/svg/rightArrow.svg';
+
+/* -------------------------------------------------------- */
+/* Menu primitives shared by both profile layouts            */
+/* -------------------------------------------------------- */
+
+export const MenuSection = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <>
+    <RNText
+      font="medium"
+      size={12}
+      color={THEME.labelBrown}
+      style={styles.section}
+    >
+      {title}
+    </RNText>
+    <View style={styles.list}>{children}</View>
+  </>
+);
+
+export const MenuRow = ({
+  icon,
+  label,
+  onPress,
+  last,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  onPress?: () => void;
+  last?: boolean;
+}) => (
+  <TouchableOpacity
+    style={[styles.row, !last && styles.rowBorder]}
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <View style={styles.rowIcon}>{icon}</View>
+    <RNText font="medium" size={14} color={THEME.text} style={styles.flex}>
+      {label}
+    </RNText>
+    <ChevronRightIcon />
+  </TouchableOpacity>
+);
+
+export const VerifyRow = ({
+  verified,
+  label,
+}: {
+  verified: boolean;
+  label: string;
+}) => (
+  <View style={styles.verifyRow}>
+    {verified ? (
+      <CheckBadge size={moderateScale(18)} />
+    ) : (
+      <PlusBadge size={moderateScale(18)} />
+    )}
+    <RNText
+      font="medium"
+      size={13}
+      color={THEME.text}
+      style={styles.verifyLabel}
+    >
+      {label}
+    </RNText>
+  </View>
+);
+
+/* -------------------------------------------------------- */
+/* Icons / badges                                            */
+/* -------------------------------------------------------- */
+
+export const PlusBadge: React.FC<{ size?: number }> = ({ size = 18 }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Circle cx={10} cy={10} r={9} stroke={THEME.primary} strokeWidth={1.4} fill="none" />
+    <Path
+      d="M10 6v8M6 10h8"
+      stroke={THEME.primary}
+      strokeWidth={1.6}
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const CheckBadge: React.FC<{ size?: number }> = ({ size = 18 }) => (
+  <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+    <Circle cx={10} cy={10} r={9} stroke={THEME.text} strokeWidth={1.4} fill="none" />
+    <Path
+      d="M6.5 10.4 9 12.7l4.5-5"
+      stroke={THEME.text}
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const SolidStarIcon: React.FC<{ size?: number; color?: string }> = ({
+  size = 14,
+  color = THEME.star,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.57L12 17.6l-5.9 3.07 1.13-6.57L2.45 9.44l6.6-.96L12 2.5Z"
+      fill={color}
+      stroke={color}
+      strokeWidth={1.2}
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const StarOutlineIcon: React.FC<{ size?: number; color?: string }> = ({
+  size = 20,
+  color = THEME.text,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 2.5l2.95 5.98 6.6.96-4.78 4.66 1.13 6.57L12 17.6l-5.9 3.07 1.13-6.57L2.45 9.44l6.6-.96L12 2.5Z"
+      stroke={color}
+      strokeWidth={1.6}
+      strokeLinejoin="round"
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const DollarCircleIcon: React.FC<{ size?: number; color?: string }> = ({
+  size = 20,
+  color = THEME.text,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx={12} cy={12} r={9.25} stroke={color} strokeWidth={1.6} />
+    <Path
+      d="M14.5 9.25c-.5-.95-1.45-1.5-2.55-1.5-1.55 0-2.7.85-2.7 2.05 0 1.1.85 1.65 2.25 1.95l1.05.22c1.5.32 2.45.92 2.45 2.1 0 1.32-1.25 2.18-2.85 2.18-1.3 0-2.4-.55-2.95-1.55"
+      stroke={color}
+      strokeWidth={1.6}
+      strokeLinecap="round"
+    />
+    <Path
+      d="M12 6.25v1.5M12 16.25v1.5"
+      stroke={color}
+      strokeWidth={1.6}
+      strokeLinecap="round"
+    />
+  </Svg>
+);
+
+export const profileStyles = StyleSheet.create({
+  profileCard: {
+    paddingVertical: moderateScale(16),
+    paddingHorizontal: moderateScale(16),
+    borderWidth: 1,
+    borderColor: 'rgba(44, 26, 14, 0.1)',
+  },
+  profileTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  profileInfo: {
+    flex: 1,
+    marginLeft: moderateScale(14),
+  },
+  ratingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: moderateScale(4),
+  },
+  cardDivider: {
+    height: 1,
+    backgroundColor: THEME.divider,
+    marginVertical: moderateScale(14),
+  },
+  verifyList: {
+    gap: moderateScale(10),
+  },
+});
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  section: {
+    marginTop: moderateScale(22),
+    marginBottom: moderateScale(8),
+    marginLeft: moderateScale(4),
+  },
+  list: { width: '100%' },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: moderateScale(14),
+  },
+  rowBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: THEME.divider,
+  },
+  rowIcon: {
+    width: moderateScale(28),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: moderateScale(14),
+  },
+  verifyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  verifyLabel: { marginLeft: moderateScale(10) },
+});

package/template/src/services/Config.ts

@@ -0,0 +1,37 @@
+// import {
+//   REACT_APP_API,
+//   REACT_APP_DOMAIN,
+//   REACT_APP_SOCKET,
+//   STRIPE_PUBLISHED_KEY,
+// } from '@env';
+
+class Config {
+  public readonly coreAPI: string;
+
+  /** Google API key — shared with the native Maps SDK (Android manifest / iOS AppDelegate). */
+  public readonly googleMapsKey: string;
+
+  // public readonly domain: string;
+  // public readonly socketAPI: string;
+
+  // public readonly releaseVersion: string | undefined;
+
+  // public readonly releaseVersionNumber: string | undefined;
+  // public readonly stripePublishableKey: string;
+
+  constructor() {
+    // @ts-ignore
+    this.coreAPI = "http://13.134.217.35/api/v1";
+    this.googleMapsKey = "AIzaSyBHQWCrTWJIMYz04ZN43VyZ9xv6agXnuyk";
+    // this.coreAPI = "REACT_APP_API";
+    // this.domain = REACT_APP_DOMAIN;
+    // this.socketAPI = REACT_APP_SOCKET;
+    // this.stripePublishableKey = STRIPE_PUBLISHED_KEY;
+  }
+
+  // public getRelease() {
+  //   return `App Version @${this.releaseVersionNumber}`;
+  // }
+}
+
+export default new Config();

package/template/src/services/api.ts

@@ -0,0 +1,37 @@
+import axios, { AxiosInstance } from "axios";
+import Config from "./Config";
+import { storage } from "./storage";
+import { TOKEN_KEY } from "../utils/constants";
+
+const api: AxiosInstance = axios.create({
+  baseURL: Config.coreAPI,
+  timeout: 20000,
+});
+
+api.interceptors.request.use((config) => {
+  const token = storage.getString(TOKEN_KEY);
+  if (token) {
+    config.headers.set("Authorization", `Bearer ${token}`);
+  }
+  return config;
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    if (error?.response?.status === 401) {
+      storage.remove(TOKEN_KEY);
+    }
+    return Promise.reject(error);
+  },
+);
+
+/**
+ * Mocked endpoint helper. While we don't yet have a backend, callers can use
+ * `mocked(data, delay)` instead of `api.get/post/...` and get a Promise that
+ * resolves with `{ data }` after a tiny delay. Replace with real api.* calls.
+ */
+export const mocked = <T>(data: T, ms = 350): Promise<{ data: T }> =>
+  new Promise((resolve) => setTimeout(() => resolve({ data }), ms));
+
+export default api;

package/template/src/services/index.ts

@@ -0,0 +1,4 @@
+export { default as api, mocked } from "./api";
+export { default as Config } from "./Config";
+export * from "./storage";
+export * from "./places";

package/template/src/services/places.ts

@@ -0,0 +1,320 @@
+import axios from "axios";
+import Config from "./Config";
+
+/**
+ * Google Places / Directions helpers.
+ *
+ * Uses the same Google key the native Maps SDK is configured with. The key
+ * must have the "Places API", "Directions API" and "Geocoding API" enabled in
+ * the Google Cloud console for these calls to succeed.
+ */
+
+const GOOGLE_BASE = "https://maps.googleapis.com/maps/api";
+
+/** A resolved location with everything callers need to render and route. */
+export interface LocationValue {
+  latitude: number;
+  longitude: number;
+  address: string;
+}
+
+/** A single autocomplete suggestion shown while typing. */
+export interface PlaceSuggestion {
+  placeId: string;
+  primaryText: string;
+  secondaryText: string;
+  description: string;
+}
+
+/** A decoded route between two points. */
+export interface RouteResult {
+  coordinates: LocationValue[];
+  distanceText?: string;
+  durationText?: string;
+}
+
+/**
+ * A single alternative route returned by the Directions API. Carries both the
+ * human-readable labels (for the route cards) and the raw values (for sorting
+ * the fastest route to the top), plus any intermediate "via" segments parsed
+ * from the route summary so the detail timeline can show the path it takes.
+ */
+export interface RouteOption {
+  id: string;
+  coordinates: LocationValue[];
+  distanceText?: string;
+  durationText?: string;
+  /** Distance in metres — used to sort/compare routes. */
+  distanceValue: number;
+  /** Duration in seconds — used to sort/compare routes. */
+  durationValue: number;
+  /** Google's route summary, e.g. "N3" or "N3 and N8". */
+  summary?: string;
+  /** Intermediate via roads/towns derived from the summary (may be empty). */
+  stops: string[];
+}
+
+const placesApi = axios.create({ baseURL: GOOGLE_BASE, timeout: 15000 });
+
+/** Dedicated session token so autocomplete + details are billed as one session. */
+let sessionToken = "";
+export const newSessionToken = (): string => {
+  sessionToken = `${Date.now().toString(36)}-${Math.floor(
+    Math.random() * 1e9,
+  ).toString(36)}`;
+  return sessionToken;
+};
+
+/**
+ * Live city suggestions for the search field. Returns cities worldwide, but
+ * when an optional `bias` (e.g. the device location) is supplied, nearby cities
+ * are prioritised to the top of the list while global matches still appear.
+ */
+export const autocompletePlaces = async (
+  input: string,
+  signal?: AbortSignal,
+  bias?: { latitude: number; longitude: number },
+): Promise<PlaceSuggestion[]> => {
+  const query = input.trim();
+  if (query.length < 2) return [];
+
+  const { data } = await placesApi.get("/place/autocomplete/json", {
+    signal,
+    params: {
+      input: query,
+      key: Config.googleMapsKey,
+      sessiontoken: sessionToken || newSessionToken(),
+      language: "en",
+      // Restrict suggestions to cities/towns only — excludes shops, streets,
+      // buildings and other place types.
+      types: "(cities)",
+      // Bias (not restrict) toward the user's location so nearby cities rank
+      // first; global cities are still returned.
+      ...(bias
+        ? { location: `${bias.latitude},${bias.longitude}`, radius: 50000 }
+        : {}),
+    },
+  });
+
+  if (data?.status !== "OK" && data?.status !== "ZERO_RESULTS") {
+    throw new Error(data?.error_message || data?.status || "Places request failed");
+  }
+
+  return (data?.predictions ?? []).map((p: any) => ({
+    placeId: p.place_id,
+    primaryText: p.structured_formatting?.main_text ?? p.description,
+    secondaryText: p.structured_formatting?.secondary_text ?? "",
+    description: p.description,
+  }));
+};
+
+/** Resolve a suggestion (place id) into coordinates + a full formatted address. */
+export const getPlaceDetails = async (
+  placeId: string,
+): Promise<LocationValue> => {
+  const { data } = await placesApi.get("/place/details/json", {
+    params: {
+      place_id: placeId,
+      key: Config.googleMapsKey,
+      sessiontoken: sessionToken || newSessionToken(),
+      fields: "geometry,formatted_address,name",
+      language: "en",
+    },
+  });
+
+  if (data?.status !== "OK") {
+    throw new Error(data?.error_message || data?.status || "Place details failed");
+  }
+
+  // A details call closes the autocomplete session — start a fresh one next time.
+  sessionToken = "";
+
+  const loc = data.result.geometry.location;
+  return {
+    latitude: loc.lat,
+    longitude: loc.lng,
+    address: data.result.formatted_address ?? data.result.name ?? "",
+  };
+};
+
+/** Forward-geocode a free-text address (fallback when only a string is known). */
+export const geocodeAddress = async (
+  address: string,
+): Promise<LocationValue | null> => {
+  const query = address.trim();
+  if (!query) return null;
+
+  const { data } = await placesApi.get("/geocode/json", {
+    params: { address: query, key: Config.googleMapsKey, language: "en" },
+  });
+
+  if (data?.status !== "OK" || !data.results?.length) return null;
+
+  const best = data.results[0];
+  const loc = best.geometry.location;
+  return {
+    latitude: loc.lat,
+    longitude: loc.lng,
+    address: best.formatted_address ?? query,
+  };
+};
+
+/** A reverse-geocoded location enriched with header-friendly labels. */
+export interface ReverseGeocodeResult extends LocationValue {
+  /** City / locality, e.g. "Yaoundé". */
+  city?: string;
+  /** Country name, e.g. "Cameroon". */
+  country?: string;
+  /** Compact label for headers, e.g. "Yaoundé, Cameroon". */
+  shortLabel: string;
+}
+
+/** Pull the first matching component (by type) out of a geocode result. */
+const pickComponent = (components: any[], type: string): string | undefined =>
+  components?.find((c) => c.types?.includes(type))?.long_name;
+
+/** Reverse-geocode raw GPS coordinates into a human-readable address. */
+export const reverseGeocode = async (
+  latitude: number,
+  longitude: number,
+): Promise<ReverseGeocodeResult> => {
+  const { data } = await placesApi.get("/geocode/json", {
+    params: {
+      latlng: `${latitude},${longitude}`,
+      key: Config.googleMapsKey,
+      language: "en",
+    },
+  });
+
+  const best =
+    data?.status === "OK" && data.results?.length ? data.results[0] : null;
+  const address = best?.formatted_address ?? "Current location";
+
+  const components = best?.address_components ?? [];
+  const city =
+    pickComponent(components, "locality") ??
+    pickComponent(components, "administrative_area_level_2") ??
+    pickComponent(components, "administrative_area_level_1");
+  const country = pickComponent(components, "country");
+
+  const shortLabel = city
+    ? country
+      ? `${city}, ${country}`
+      : city
+    : address;
+
+  return { latitude, longitude, address, city, country, shortLabel };
+};
+
+/**
+ * Fetch a drivable route between two points and return the decoded polyline
+ * (used for the BlaBlaCar-style path on the map).
+ */
+export const getDirections = async (
+  origin: LocationValue,
+  destination: LocationValue,
+): Promise<RouteResult> => {
+  const { data } = await placesApi.get("/directions/json", {
+    params: {
+      origin: `${origin.latitude},${origin.longitude}`,
+      destination: `${destination.latitude},${destination.longitude}`,
+      key: Config.googleMapsKey,
+      mode: "driving",
+      language: "en",
+    },
+  });
+
+  if (data?.status !== "OK" || !data.routes?.length) {
+    throw new Error(data?.error_message || data?.status || "Directions failed");
+  }
+
+  const route = data.routes[0];
+  const leg = route.legs?.[0];
+  return {
+    coordinates: decodePolyline(route.overview_polyline.points),
+    distanceText: leg?.distance?.text,
+    durationText: leg?.duration?.text,
+  };
+};
+
+/**
+ * Fetch every drivable alternative between two points, sorted fastest-first.
+ * Powers the route picker bottom sheet so the driver can compare and choose a
+ * path. Falls back to a single straight geodesic option if the request fails.
+ */
+export const getRouteAlternatives = async (
+  origin: LocationValue,
+  destination: LocationValue,
+): Promise<RouteOption[]> => {
+  const { data } = await placesApi.get("/directions/json", {
+    params: {
+      origin: `${origin.latitude},${origin.longitude}`,
+      destination: `${destination.latitude},${destination.longitude}`,
+      key: Config.googleMapsKey,
+      mode: "driving",
+      alternatives: true,
+      language: "en",
+    },
+  });
+
+  if (data?.status !== "OK" || !data.routes?.length) {
+    throw new Error(data?.error_message || data?.status || "Directions failed");
+  }
+
+  const options: RouteOption[] = data.routes.map((route: any, i: number) => {
+    const leg = route.legs?.[0];
+    const summary: string | undefined = route.summary;
+    // Split the summary ("N3 and N8", "A1/A2") into individual via roads.
+    const stops = summary
+      ? summary
+          .split(/\s+and\s+|\/|,/i)
+          .map((s: string) => s.trim())
+          .filter(Boolean)
+      : [];
+    return {
+      id: `route-${i}`,
+      coordinates: decodePolyline(route.overview_polyline.points),
+      distanceText: leg?.distance?.text,
+      durationText: leg?.duration?.text,
+      distanceValue: leg?.distance?.value ?? 0,
+      durationValue: leg?.duration?.value ?? 0,
+      summary,
+      stops,
+    };
+  });
+
+  return options.sort((a, b) => a.durationValue - b.durationValue);
+};
+
+/** Decode a Google "encoded polyline" string into lat/lng coordinates. */
+export const decodePolyline = (encoded: string): LocationValue[] => {
+  const points: LocationValue[] = [];
+  let index = 0;
+  let lat = 0;
+  let lng = 0;
+
+  while (index < encoded.length) {
+    let result = 1;
+    let shift = 0;
+    let b: number;
+    do {
+      b = encoded.charCodeAt(index++) - 63 - 1;
+      result += b << shift;
+      shift += 5;
+    } while (b >= 0x1f);
+    lat += result & 1 ? ~(result >> 1) : result >> 1;
+
+    result = 1;
+    shift = 0;
+    do {
+      b = encoded.charCodeAt(index++) - 63 - 1;
+      result += b << shift;
+      shift += 5;
+    } while (b >= 0x1f);
+    lng += result & 1 ? ~(result >> 1) : result >> 1;
+
+    points.push({ latitude: lat * 1e-5, longitude: lng * 1e-5, address: "" });
+  }
+
+  return points;
+};

package/template/src/services/storage.ts

@@ -0,0 +1,33 @@
+import { createMMKV } from "react-native-mmkv";
+
+export const storage = createMMKV();
+
+// Get string
+export const getStorageValue = (KEY: string): string | null => {
+  return storage.getString(KEY) ?? null;
+};
+
+// Set string
+export const setStorageValue = (KEY: string, value: string) => {
+  storage.set(KEY, value);
+};
+
+// Get boolean
+export const getStorageBoolean = (KEY: string): boolean | undefined => {
+  return storage.getBoolean(KEY);
+};
+
+// Set boolean
+export const setStorageBoolean = (KEY: string, value: boolean) => {
+  storage.set(KEY, value);
+};
+
+// Clear key
+export const clearStorageValue = (KEY: string) => {
+  storage.remove(KEY);
+};
+
+/** Clear all stored data (e.g. on logout) */
+export const clearAllStorage = () => {
+  storage.clearAll();
+};

package/template/src/theme/fonts.ts

@@ -0,0 +1,30 @@
+import { Platform } from "react-native";
+
+/**
+ * Font system — Mona Sans family. Postscript names match the TTF files
+ * dropped into src/assets/fonts and linked via react-native.config.js.
+ */
+export const FONTS = {
+  light: "MonaSans-Light",
+  regular: "MonaSans-Regular",
+  italic: "MonaSans-Italic",
+  medium: "MonaSans-Medium",
+  semibold: "MonaSans-SemiBold",
+  bold: "MonaSans-Bold",
+  extraBold: "MonaSans-ExtraBold",
+  black: "MonaSans-Black",
+};
+
+export const FONT_WEIGHTS = {
+  regular: "400" as const,
+  medium: "500" as const,
+  semibold: "600" as const,
+  bold: "700" as const,
+  extraBold: "800" as const,
+};
+
+// Fallback in case a postscript name fails to resolve at runtime.
+export const SYSTEM_FALLBACK = Platform.select({
+  ios: "System",
+  android: "Roboto",
+}) as string;

package/template/src/theme/index.ts

@@ -0,0 +1,3 @@
+export * from "./theme";
+export * from "./fonts";
+export * from "./spacing";