@varunindiit/create-rn-starter 1.0.1

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { THEME } from "../../theme";
+
+interface LoaderProps {
+  size?: "small" | "large";
+  color?: string;
+}
+
+const Loader: React.FC<LoaderProps> = ({
+  size = "large",
+  color = THEME.primary,
+}) => (
+  <View style={styles.center}>
+    <ActivityIndicator size={size} color={color} />
+  </View>
+);
+
+export default Loader;
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+});

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

@@ -0,0 +1,103 @@
+import React, { useCallback, useRef } from "react";
+import { Animated, StyleSheet, TouchableWithoutFeedback, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { moderateScale } from "react-native-size-matters";
+import { THEME } from "../../theme";
+
+/** Five-pointed star outline path on a 24x24 grid. */
+const STAR_PATH =
+  "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";
+
+interface RatingStarsProps {
+  /** Currently selected rating (0 - `count`). */
+  rating: number;
+  /** Fired with the new rating (1 - `count`) when a star is tapped. */
+  onChange?: (value: number) => void;
+  count?: number;
+  size?: number;
+  /** Fill colour used for selected stars. */
+  color?: string;
+  /** Outline colour used for unselected stars. */
+  emptyColor?: string;
+}
+
+/**
+ * Animated, tappable star rating. Each star "pops" with a spring when selected,
+ * keeping the rating interaction smooth and premium. Reusable across the app.
+ */
+const RatingStars: React.FC<RatingStarsProps> = ({
+  rating,
+  onChange,
+  count = 5,
+  size = moderateScale(34),
+  color = THEME.primary,
+  emptyColor = THEME.primaryLight,
+}) => {
+  const scales = useRef(
+    Array.from({ length: count }, () => new Animated.Value(1)),
+  ).current;
+
+  const handlePress = useCallback(
+    (index: number) => {
+      if (!onChange) return;
+      Animated.sequence([
+        Animated.spring(scales[index], {
+          toValue: 1.3,
+          useNativeDriver: true,
+          speed: 60,
+          bounciness: 14,
+        }),
+        Animated.spring(scales[index], {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 20,
+          bounciness: 10,
+        }),
+      ]).start();
+      onChange(index + 1);
+    },
+    [onChange, scales],
+  );
+
+  return (
+    <View style={styles.row}>
+      {Array.from({ length: count }).map((_, i) => {
+        const filled = i < rating;
+        return (
+          <TouchableWithoutFeedback
+            key={i}
+            disabled={!onChange}
+            onPress={() => handlePress(i)}
+          >
+            <Animated.View
+              style={[styles.star, { transform: [{ scale: scales[i] }] }]}
+            >
+              <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+                <Path
+                  d={STAR_PATH}
+                  fill={filled ? color : "none"}
+                  stroke={filled ? color : emptyColor}
+                  strokeWidth={filled ? 0 : 1.6}
+                  strokeLinejoin="round"
+                />
+              </Svg>
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        );
+      })}
+    </View>
+  );
+};
+
+export default RatingStars;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  star: {
+    marginHorizontal: moderateScale(6),
+  },
+});

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

@@ -0,0 +1,98 @@
+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";
+
+interface RoutePoint {
+  time?: string;
+  city: string;
+  area?: string;
+}
+
+interface RouteDotsProps {
+  from: RoutePoint;
+  to: RoutePoint;
+  compact?: boolean;
+}
+
+/** Two-point timeline used on trip cards & detail pages */
+const RouteDots: React.FC<RouteDotsProps> = ({ from, to, compact }) => (
+  <View style={styles.wrap}>
+    <View style={styles.timeline}>
+      <View style={[styles.dot, styles.dotOutline]} />
+      <View style={styles.line} />
+      <View style={[styles.dot, styles.dotFilled]} />
+    </View>
+    <View style={[styles.col, compact && { gap: moderateScale(8) }]}>
+      <View>
+        {from.time ? (
+          <RNText size={12} color={THEME.textMuted}>
+            {from.time}
+          </RNText>
+        ) : null}
+        <RNText font="semibold" size={14} color={THEME.text}>
+          {from.city}
+        </RNText>
+        {from.area ? (
+          <RNText size={12} color={THEME.textMuted}>
+            {from.area}
+          </RNText>
+        ) : null}
+      </View>
+      <View>
+        {to.time ? (
+          <RNText size={12} color={THEME.textMuted}>
+            {to.time}
+          </RNText>
+        ) : null}
+        <RNText font="semibold" size={14} color={THEME.text}>
+          {to.city}
+        </RNText>
+        {to.area ? (
+          <RNText size={12} color={THEME.textMuted}>
+            {to.area}
+          </RNText>
+        ) : null}
+      </View>
+    </View>
+  </View>
+);
+
+export default RouteDots;
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: SPACING.md,
+  },
+  timeline: {
+    alignItems: "center",
+    paddingVertical: moderateScale(4),
+  },
+  dot: {
+    width: moderateScale(10),
+    height: moderateScale(10),
+    borderRadius: moderateScale(5),
+  },
+  dotOutline: {
+    borderWidth: 2,
+    borderColor: THEME.primary,
+    backgroundColor: THEME.surface,
+  },
+  dotFilled: {
+    backgroundColor: THEME.primary,
+  },
+  line: {
+    flex: 1,
+    width: 1.5,
+    backgroundColor: THEME.primary,
+    marginVertical: moderateScale(2),
+  },
+  col: {
+    flex: 1,
+    justifyContent: "space-between",
+    gap: moderateScale(14),
+  },
+});

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

@@ -0,0 +1,126 @@
+import React from "react";
+import {
+  Pressable,
+  StyleSheet,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+export interface SegmentedTab {
+  key: string;
+  label: string;
+}
+
+interface SegmentedControlProps {
+  tabs: SegmentedTab[];
+  value: string;
+  onChange: (key: string) => void;
+  style?: StyleProp<ViewStyle>;
+  variant?: "pill" | "underline";
+}
+
+const SegmentedControl: React.FC<SegmentedControlProps> = ({
+  tabs,
+  value,
+  onChange,
+  style,
+  variant = "pill",
+}) => {
+  if (variant === "underline") {
+    return (
+      <View style={[styles.underlineContainer, style]}>
+        {tabs.map((t) => {
+          const active = t.key === value;
+          return (
+            <Pressable
+              key={t.key}
+              onPress={() => onChange(t.key)}
+              style={styles.underlineTab}
+            >
+              <RNText
+                font={active ? "semibold" : "regular"}
+                size={14}
+                color={active ? THEME.primary : THEME.textSecondary}
+              >
+                {t.label}
+              </RNText>
+              <View
+                style={[
+                  styles.underline,
+                  { backgroundColor: active ? THEME.primary : "transparent" },
+                ]}
+              />
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      {tabs.map((t) => {
+        const active = t.key === value;
+        return (
+          <Pressable
+            key={t.key}
+            onPress={() => onChange(t.key)}
+            style={[
+              styles.pill,
+              {
+                backgroundColor: active ? THEME.primary : "transparent",
+              },
+            ]}
+          >
+            <RNText
+              font={active ? "semibold" : "medium"}
+              size={13}
+              color={active ? THEME.textOnPrimary : THEME.textSecondary}
+            >
+              {t.label}
+            </RNText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+};
+
+export default SegmentedControl;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    backgroundColor: THEME.surface,
+    borderRadius: SPACING.radiusPill,
+    gap: moderateScale(4),
+    padding: moderateScale(4),
+  },
+  pill: {
+    flex: 1,
+    height: moderateScale(38),
+    borderRadius: SPACING.radiusPill,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  underlineContainer: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: THEME.border,
+  },
+  underlineTab: {
+    flex: 1,
+    alignItems: "center",
+    paddingVertical: moderateScale(12),
+    gap: moderateScale(8),
+  },
+  underline: {
+    height: moderateScale(2),
+    width: "60%",
+    borderRadius: moderateScale(2),
+  },
+});

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

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, Easing, StyleSheet } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+interface SosButtonProps {
+  /** Diameter of the button. Defaults to a header-friendly 38. */
+  size?: number;
+}
+
+/**
+ * Discreet, presentational SOS pill for the header. The press is owned by the
+ * parent (e.g. Header `onRightPress`) so it can sit inside the header's touch
+ * target. A subtle "breathing" pulse keeps it noticeable without being loud.
+ */
+const SosButton: React.FC<SosButtonProps> = ({ size = moderateScale(30) }) => {
+  const pulse = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 900,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 0,
+          duration: 900,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse]);
+
+  const scale = pulse.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 1.07],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.core,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          transform: [{ scale }],
+        },
+      ]}
+    >
+      <RNText font="bold" size={9} color={THEME.textOnPrimary} letterSpacing={0.5}>
+        SOS
+      </RNText>
+    </Animated.View>
+  );
+};
+
+export default SosButton;
+
+const styles = StyleSheet.create({
+  core: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: THEME.danger,
+    borderWidth: moderateScale(2),
+    borderColor: "rgba(255,255,255,0.85)",
+    shadowColor: THEME.danger,
+    shadowOffset: { width: 0, height: moderateScale(3) },
+    shadowOpacity: 0.35,
+    shadowRadius: moderateScale(6),
+    elevation: 4,
+  },
+});