@varunindiit/create-rn-starter 1.0.1

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

@@ -0,0 +1,247 @@
+import React from "react";
+import type { TFunction } from "i18next";
+import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import Avatar from "./Avatar";
+import Card from "./Card";
+import StatusBadge from "./StatusBadge";
+import RNText from "../Text/RNText";
+import { CheckCircleIcon } from "../Icon/SvgIcons";
+import { THEME } from "../../theme";
+import { useLanguage } from "../../localization";
+import { Trip, TripStatus } from "../../redux/slice/trip";
+
+interface TripCardProps {
+  trip: Trip;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const STATUS_TONE: Record<
+  TripStatus,
+  "success" | "warning" | "danger" | "info" | "primary"
+> = {
+  available: "info",
+  fully_booked: "warning",
+  confirmed: "success",
+  in_progress: "primary",
+  completed: "success",
+  cancelled: "danger",
+};
+
+/** Localized status label, falling back to the English literal where no key exists. */
+const statusLabel = (t: TFunction, status: TripStatus): string => {
+  switch (status) {
+    case "confirmed":
+      return t("tripStatus.confirmed");
+    case "completed":
+      return t("tripStatus.completed");
+    case "cancelled":
+      return t("tripStatus.cancelled");
+    case "available":
+      return t("tripStatus.available");
+    case "fully_booked":
+      return t("tripStatus.fullyBooked");
+    case "in_progress":
+      return t("tripStatus.inProgress");
+    default:
+      return status;
+  }
+};
+
+const TripCard: React.FC<TripCardProps> = ({ trip, onPress, style }) => {
+  const { t } = useLanguage();
+  return (
+  <TouchableOpacity onPress={onPress} activeOpacity={0.9} disabled={!onPress}>
+    <Card shadow padding={moderateScale(16)} style={[styles.card, style]}>
+      <View style={styles.headerRow}>
+        <Avatar
+          uri={trip.driverAvatarUri || undefined}
+          name={trip.driverName}
+          size={moderateScale(44)}
+        />
+        <View style={styles.headerInfo}>
+          <RNText font="semibold" size={15} color={THEME.text}>
+            {trip.driverName}
+          </RNText>
+          <View style={styles.metaRow}>
+            <RNText size={12} color={THEME.textMuted}>
+              {t("common.tripsCount", { count: trip.driverTrips })}
+            </RNText>
+            <RNText size={12} color={THEME.textMuted} style={styles.metaDot}>
+              ·
+            </RNText>
+            <RNText size={12} color={THEME.star}>
+              ★
+            </RNText>
+            <RNText
+              size={12}
+              color={THEME.textMuted}
+              style={styles.ratingValue}
+            >
+              {trip.driverRating}
+            </RNText>
+          </View>
+        </View>
+        {trip.status === "confirmed" || trip.status === "completed" ? (
+          <View style={styles.confirmedRow}>
+            <CheckCircleIcon size={moderateScale(15)} color={THEME.success} />
+            <RNText
+              font="medium"
+              size={12}
+              color={THEME.success}
+              style={styles.confirmedLabel}
+            >
+              {statusLabel(t, trip.status)}
+            </RNText>
+          </View>
+        ) : (
+          <StatusBadge
+            label={statusLabel(t, trip.status)}
+            tone={STATUS_TONE[trip.status]}
+          />
+        )}
+      </View>
+
+      <View style={styles.timelineWrap}>
+        <View style={styles.timelineRow}>
+          <RNText
+            size={13}
+            font="medium"
+            color={THEME.text}
+            style={styles.timelineTime}
+          >
+            {trip.from.time || "08:00"}
+          </RNText>
+          <View style={styles.timelineDotFilled} />
+          <RNText
+            size={13}
+            color={THEME.text}
+            style={styles.timelinePlace}
+          >
+            {trip.from.city}
+            {trip.from.area ? `, ${trip.from.area}` : ""}
+          </RNText>
+        </View>
+        <View style={styles.timelineConnector}>
+          <View style={styles.timeColSpacer} />
+          <View style={styles.timelineDashCol}>
+            {Array.from({ length: 4 }).map((_, i) => (
+              <View key={i} style={styles.timelineDashSegment} />
+            ))}
+          </View>
+        </View>
+        <View style={styles.timelineRow}>
+          <RNText
+            size={13}
+            font="medium"
+            color={THEME.text}
+            style={styles.timelineTime}
+          >
+            {trip.to.time || "11:15"}
+          </RNText>
+          <View style={styles.timelineDotFilled} />
+          <RNText
+            size={13}
+            color={THEME.text}
+            style={styles.timelinePlace}
+          >
+            {trip.to.city}
+            {trip.to.area ? `, ${trip.to.area}` : ""}
+          </RNText>
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <RNText font="semibold" size={15} color={THEME.text}>
+          {trip.date}, {trip.weekday}
+        </RNText>
+        <RNText font="semibold" size={15} color={THEME.text}>
+          {t('common.seatCount', { count: 1 })}
+        </RNText>
+      </View>
+    </Card>
+  </TouchableOpacity>
+  );
+};
+
+export default TripCard;
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: moderateScale(20),
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  headerInfo: {
+    flex: 1,
+    marginLeft: moderateScale(12),
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: moderateScale(2),
+  },
+  metaDot: {
+    marginHorizontal: moderateScale(4),
+  },
+  ratingValue: {
+    marginLeft: moderateScale(3),
+  },
+  confirmedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  confirmedLabel: {
+    marginLeft: moderateScale(4),
+  },
+  timelineWrap: {
+    marginTop: moderateScale(14),
+  },
+  timelineRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  timelineTime: {
+    width: moderateScale(44),
+  },
+  timelinePlace: {
+    flex: 1,
+    marginLeft: moderateScale(12),
+  },
+  timelineDotFilled: {
+    width: moderateScale(9),
+    height: moderateScale(9),
+    borderRadius: moderateScale(5),
+    backgroundColor: THEME.primary,
+  },
+  timelineConnector: {
+    flexDirection: "row",
+  },
+  timeColSpacer: {
+    width: moderateScale(44),
+  },
+  timelineDashCol: {
+    width: moderateScale(9),
+    alignItems: "center",
+    paddingVertical: moderateScale(2),
+  },
+  timelineDashSegment: {
+    width: moderateScale(1.5),
+    height: moderateScale(3),
+    marginVertical: moderateScale(1.5),
+    backgroundColor: THEME.primary,
+    opacity: 0.6,
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: moderateScale(14),
+    paddingTop: moderateScale(12),
+    borderTopWidth: 1,
+    borderTopColor: THEME.divider,
+  },
+});

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

@@ -0,0 +1,106 @@
+import React from "react";
+import {
+  Image,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+import { CloseIcon, CloudUploadIcon } from "../Icon/SvgIcons";
+import { useLanguage } from "../../localization";
+
+interface UploadBoxProps {
+  title: string;
+  hint?: string;
+  imageUri?: string | null;
+  onPress?: () => void;
+  onRemove?: () => void;
+  height?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Dashed upload card used across the driver onboarding flow
+ * (driving license front/back, document uploads). Shows an upload
+ * prompt when empty and an image preview with a remove action once filled.
+ */
+const UploadBox: React.FC<UploadBoxProps> = ({
+  title,
+  hint,
+  imageUri,
+  onPress,
+  onRemove,
+  height = moderateScale(130),
+  containerStyle,
+}) => {
+  const { t } = useLanguage();
+  const hintText = hint ?? t("common.uploadFormatsHint");
+  if (imageUri) {
+    return (
+      <View style={[styles.box, styles.filled, { height }, containerStyle]}>
+        <Image source={{ uri: imageUri }} style={StyleSheet.absoluteFill} />
+        <TouchableOpacity
+          style={styles.remove}
+          onPress={onRemove}
+          hitSlop={8}
+        >
+          <CloseIcon size={moderateScale(14)} color="#fff" />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={onPress}
+      style={[styles.box, { height }, containerStyle]}
+    >
+      <CloudUploadIcon size={moderateScale(28)} color={THEME.primary} />
+      <RNText font="bold" size={14} color={THEME.text} style={styles.title}>
+        {title}
+      </RNText>
+      {hintText ? (
+        <RNText size={12} color={THEME.textSecondary} style={styles.hint}>
+          {hintText}
+        </RNText>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+export default UploadBox;
+
+const styles = StyleSheet.create({
+  box: {
+    borderRadius: SPACING.radiusLg,
+    borderWidth: 1.5,
+    borderColor: THEME.primary,
+    borderStyle: "dashed",
+    backgroundColor: THEME.primaryFaint,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(16),
+  },
+  filled: {
+    overflow: "hidden",
+    backgroundColor: THEME.surfaceMuted,
+  },
+  title: { marginTop: moderateScale(10) },
+  hint: { marginTop: moderateScale(4) },
+  remove: {
+    position: "absolute",
+    top: moderateScale(8),
+    right: moderateScale(8),
+    width: moderateScale(24),
+    height: moderateScale(24),
+    borderRadius: moderateScale(12),
+    backgroundColor: THEME.primary,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/template/src/components/Container/MainContainer.tsx

@@ -0,0 +1,76 @@
+import React, { memo } from "react";
+import {
+  ImageBackground,
+  ImageSourcePropType,
+  StatusBar,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { SafeAreaView, Edges } from "react-native-safe-area-context";
+import { THEME } from "../../theme";
+
+interface MainContainerProps {
+  children?: React.ReactNode;
+  background?: ImageSourcePropType | null;
+  edges?: Edges;
+  bgColor?: string;
+  statusBarStyle?: "light-content" | "dark-content";
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  gradient?: boolean;
+  gradientColors?: string[];
+  gradientStart?: { x: number; y: number };
+  gradientEnd?: { x: number; y: number };
+}
+
+const MainContainer: React.FC<MainContainerProps> = memo(
+  ({
+    children,
+    background,
+    edges = ["top", "bottom"] as const,
+    bgColor = THEME.background,
+    statusBarStyle = "dark-content",
+    style,
+    contentStyle,
+    gradient = false,
+    gradientColors = ["#FAE1CF", "#FFFFFF"],
+    gradientStart = { x: 0, y: 0 },
+    gradientEnd = { x: 0, y: 0.4 },
+  }) => (
+    <View style={[styles.root, { backgroundColor: bgColor }, style]}>
+      <StatusBar
+        barStyle={statusBarStyle}
+        backgroundColor="transparent"
+        translucent
+      />
+      {gradient ? (
+        <LinearGradient
+          colors={gradientColors}
+          start={gradientStart}
+          end={gradientEnd}
+          style={StyleSheet.absoluteFill}
+        />
+      ) : null}
+      {background ? (
+        <ImageBackground
+          source={background}
+          style={StyleSheet.absoluteFill}
+          resizeMode="cover"
+        />
+      ) : null}
+      <SafeAreaView edges={edges} style={[styles.safe, contentStyle]}>
+        {children}
+      </SafeAreaView>
+    </View>
+  ),
+);
+
+export default MainContainer;
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  safe: { flex: 1 },
+});

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

@@ -0,0 +1 @@
+export {default as MainContainer} from "./MainContainer"

package/template/src/components/Header/index.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { moderateScale } from "react-native-size-matters";
+import { SIZES, THEME } from "../../theme";
+import { ChevronLeftIcon } from "../Icon/SvgIcons";
+import RNText from "../Text/RNText";
+
+export interface HeaderProps {
+  title?: string;
+  titleColor?: string;
+  rightLabel?: string;
+  onRightPress?: () => void;
+  rightIcon?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+  onBack?: () => void;
+  showBack?: boolean;
+  safeArea?: boolean;
+  background?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const Header: React.FC<HeaderProps> = ({
+  title,
+  titleColor = THEME.text,
+  rightLabel,
+  onRightPress,
+  rightIcon,
+  leftIcon,
+  onBack,
+  showBack = true,
+  safeArea = true,
+  background = "transparent",
+  containerStyle,
+}) => {
+  const nav = useNavigation();
+  const insets = useSafeAreaInsets();
+
+  const handleBack = () => {
+    if (onBack) return onBack();
+    if (nav.canGoBack()) nav.goBack();
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: background },
+        safeArea && { paddingTop: insets.top + moderateScale(6) },
+        containerStyle,
+      ]}
+    >
+      <View style={styles.side}>
+        {showBack || leftIcon ? (
+          <TouchableOpacity
+            onPress={handleBack}
+            activeOpacity={0.7}
+            hitSlop={10}
+            style={styles.iconBtn}
+          >
+            {leftIcon ?? (
+              <ChevronLeftIcon size={moderateScale(22)} color={THEME.text} />
+            )}
+          </TouchableOpacity>
+        ) : null}
+      </View>
+
+      <View style={styles.titleWrap}>
+        {title ? (
+          <RNText
+            font="semibold"
+            size={17}
+            color={titleColor}
+            numberOfLines={1}
+            textAlign="center"
+          >
+            {title}
+          </RNText>
+        ) : null}
+      </View>
+
+      <View style={[styles.side, styles.sideRight]}>
+        {rightLabel ? (
+          <TouchableOpacity
+            onPress={onRightPress}
+            activeOpacity={0.7}
+            hitSlop={10}
+          >
+            <RNText font="medium" size={14} color={THEME.primary}>
+              {rightLabel}
+            </RNText>
+          </TouchableOpacity>
+        ) : rightIcon ? (
+          <TouchableOpacity
+            onPress={onRightPress}
+            activeOpacity={0.7}
+            hitSlop={10}
+            style={styles.iconBtn}
+          >
+            {rightIcon}
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    height: SIZES.headerHeight,
+    paddingHorizontal: moderateScale(8),
+    paddingBottom: moderateScale(8),
+  },
+  side: {
+    width: moderateScale(56),
+    alignItems: "flex-start",
+    justifyContent: "center",
+  },
+  sideRight: { alignItems: "flex-end" },
+  iconBtn: {
+    width: moderateScale(40),
+    height: moderateScale(40),
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  titleWrap: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});