@varunindiit/create-rn-starter 1.0.1

package/template/src/components/BottomSheet/CenterAlert.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { moderateScale } from 'react-native-size-matters';
+import { SPACING, THEME } from '../../theme';
+import { RNButton } from '../Button';
+import RNText from '../Text/RNText';
+import { CloseIcon } from '../Icon/SvgIcons';
+
+interface CenterAlertProps {
+  visible: boolean;
+  onClose?: () => void;
+  title: string;
+  description?: string;
+  confirmText?: string;
+  onConfirm?: () => void;
+  loading?: boolean;
+  confirmDisabled?: boolean;
+  children?: React.ReactNode;
+}
+
+const CenterAlert: React.FC<CenterAlertProps> = ({
+  visible,
+  onClose,
+  title,
+  description,
+  confirmText = 'Yes, Cancel',
+  onConfirm,
+  loading,
+  confirmDisabled,
+  children,
+}) => (
+  <Modal
+    visible={visible}
+    transparent
+    animationType="fade"
+    statusBarTranslucent
+    // onRequestClose={onClose}
+  >
+    <KeyboardAvoidingView
+      style={styles.flex1}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <Pressable style={styles.backdrop} onPress={onClose}>
+        <Pressable style={styles.card} onPress={() => {}}>
+          <TouchableOpacity
+            style={styles.closeBtn}
+            onPress={onClose}
+            hitSlop={10}
+            activeOpacity={0.7}
+          >
+            <View style={styles.closeCircle}>
+              <CloseIcon size={moderateScale(12)} color="#FFFFFF" />
+            </View>
+          </TouchableOpacity>
+
+          <RNText
+            font="semibold"
+            size={18}
+            color={THEME.text}
+            textAlign="center"
+            style={styles.title}
+          >
+            {title}
+          </RNText>
+
+          {description ? (
+            <RNText
+              size={13}
+              color={THEME.textSecondary}
+              textAlign="center"
+              style={styles.description}
+            >
+              {description}
+            </RNText>
+          ) : null}
+
+          {children ? <View style={styles.content}>{children}</View> : null}
+
+          <RNButton
+            title={confirmText}
+            onPress={onConfirm}
+            loading={loading}
+            disabled={confirmDisabled}
+            containerStyle={styles.btn}
+          />
+        </Pressable>
+      </Pressable>
+    </KeyboardAvoidingView>
+  </Modal>
+);
+
+export default CenterAlert;
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: moderateScale(36),
+  },
+  card: {
+    width: '100%',
+    backgroundColor: THEME.surface,
+    borderRadius: moderateScale(20),
+    paddingHorizontal: moderateScale(20),
+    paddingTop: moderateScale(28),
+    paddingBottom: moderateScale(20),
+    alignItems: 'center',
+  },
+  closeBtn: {
+    position: 'absolute',
+    top: moderateScale(10),
+    right: moderateScale(10),
+    padding: moderateScale(4),
+  },
+  closeCircle: {
+    width: moderateScale(20),
+    height: moderateScale(20),
+    borderRadius: moderateScale(10),
+    backgroundColor: THEME.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    marginTop: moderateScale(2),
+  },
+  description: {
+    marginTop: moderateScale(10),
+    lineHeight: moderateScale(20),
+    paddingHorizontal: moderateScale(4),
+  },
+  content: {
+    width: '100%',
+    marginTop: moderateScale(16),
+  },
+  btn: {
+    marginTop: moderateScale(20),
+    width: '100%',
+    borderRadius: SPACING.radiusPill,
+  },
+});

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

@@ -0,0 +1,2 @@
+export { default as BottomSheet } from "./BottomSheet";
+export { default as BottomSheetAlert } from "./BottomSheetAlert";

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

@@ -0,0 +1,145 @@
+import React from "react";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { moderateScale } from "react-native-size-matters";
+import { THEME } from "../../theme";
+
+import HomeActive from "../../assets/svg/homeActive.svg";
+import HomeUnActive from "../../assets/svg/homeUnActive.svg";
+import TripActive from "../../assets/svg/tripActive.svg";
+import TripUnActive from "../../assets/svg/tripUnActive.svg";
+import ChatActive from "../../assets/svg/chatActive.svg";
+import ChatUnActive from "../../assets/svg/chatUnActive.svg";
+import UserActive from "../../assets/svg/userActive.svg";
+import UserUnActive from "../../assets/svg/userUnActive.svg";
+
+interface BottomTabBarProps {
+  state: any;
+  navigation: any;
+}
+
+const ICON_MAP: Record<
+  string,
+  { Active: React.FC<any>; Inactive: React.FC<any> }
+> = {
+  Home: { Active: HomeActive, Inactive: HomeUnActive },
+  Trips: { Active: TripActive, Inactive: TripUnActive },
+  Messages: { Active: ChatActive, Inactive: ChatUnActive },
+  Profile: { Active: UserActive, Inactive: UserUnActive },
+};
+
+const tabKey = (name: string) => {
+  if (name.includes("Home")) return "Home";
+  if (name.includes("Trips")) return "Trips";
+  if (name.includes("Messages")) return "Messages";
+  return "Profile";
+};
+
+const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, navigation }) => {
+  const insets = useSafeAreaInsets();
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        { paddingBottom: Math.max(insets.bottom, moderateScale(12)) },
+      ]}
+    >
+      <View style={styles.bar}>
+        {state.routes.map((route: any, index: number) => {
+          const isFocused = state.index === index;
+          const key = tabKey(route.name);
+          const cfg = ICON_MAP[key];
+          const Icon = isFocused ? cfg.Active : cfg.Inactive;
+
+          const onPress = () => {
+            const event = navigation.emit({
+              type: "tabPress",
+              target: route.key,
+              canPreventDefault: true,
+            });
+            if (!isFocused && !event.defaultPrevented)
+              navigation.navigate(route.name);
+          };
+
+          return (
+            <Pressable
+              key={route.key}
+              onPress={onPress}
+              style={styles.item}
+              hitSlop={8}
+            >
+              <View
+                style={[
+                  styles.iconWrap,
+                  isFocused && styles.iconWrapActive,
+                ]}
+              >
+                <Icon
+                  width={moderateScale(26)}
+                  height={moderateScale(26)}
+                />
+                {isFocused && <View style={styles.activeNotch} />}
+              </View>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+export default BottomTabBar;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingHorizontal: moderateScale(16),
+    paddingTop: moderateScale(8),
+    backgroundColor: "transparent",
+  },
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: THEME.tabBg,
+    borderRadius: moderateScale(32),
+    paddingHorizontal: moderateScale(12),
+    paddingVertical: moderateScale(10),
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 16,
+    elevation: 12,
+    ...Platform.select({ android: { elevation: 14 } }),
+  },
+  item: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  iconWrap: {
+    width: moderateScale(54),
+    height: moderateScale(54),
+    borderRadius: moderateScale(18),
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  iconWrapActive: {
+    backgroundColor: THEME.primary,
+    overflow: "hidden",
+    borderRadius: moderateScale(18),
+  },
+  activeNotch: {
+    position: "absolute",
+    bottom: -1,
+    alignSelf: "center",
+    width: moderateScale(11.55),
+    height: moderateScale(4.23),
+    backgroundColor: THEME.tabBg,
+    borderTopLeftRadius: moderateScale(2),
+    borderTopRightRadius: moderateScale(2),
+  },
+});

package/template/src/components/Button/RNButton.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from "react-native-reanimated";
+import { moderateScale } from "react-native-size-matters";
+import { SIZES, SPACING, THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+type Variant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+
+interface RNButtonProps {
+  title?: string;
+  onPress?: () => void;
+  variant?: Variant;
+  disabled?: boolean;
+  loading?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  children?: React.ReactNode;
+  height?: number;
+  textSize?: number;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const VARIANT_STYLES: Record<
+  Variant,
+  { bg: string; border: string; color: string }
+> = {
+  primary: {
+    bg: THEME.primary,
+    border: THEME.primary,
+    color: THEME.textOnPrimary,
+  },
+  secondary: {
+    bg: THEME.primaryLight,
+    border: THEME.primaryLight,
+    color: THEME.primary,
+  },
+  outline: {
+    bg: "transparent",
+    border: THEME.primary,
+    color: THEME.primary,
+  },
+  ghost: {
+    bg: "transparent",
+    border: "transparent",
+    color: THEME.primary,
+  },
+  danger: {
+    bg: THEME.dangerLight,
+    border: THEME.dangerLight,
+    color: THEME.danger,
+  },
+};
+
+const RNButton: React.FC<RNButtonProps> = ({
+  title,
+  onPress,
+  variant = "primary",
+  disabled,
+  loading,
+  containerStyle,
+  textStyle,
+  leftIcon,
+  rightIcon,
+  children,
+  height = SIZES.buttonHeight,
+  textSize = 16,
+}) => {
+  const scale = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const onPressIn = useCallback(() => {
+    scale.value = withSpring(0.97, { damping: 18, stiffness: 220 });
+  }, [scale]);
+  const onPressOut = useCallback(() => {
+    scale.value = withSpring(1, { damping: 18, stiffness: 220 });
+  }, [scale]);
+
+  const v = VARIANT_STYLES[variant];
+
+  const inner =
+    children ??
+    (title ? (
+      <View style={styles.contentRow}>
+        {leftIcon}
+        <RNText font="semibold" size={textSize} color={v.color} style={textStyle}>
+          {title}
+        </RNText>
+        {rightIcon}
+      </View>
+    ) : null);
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || loading}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      style={[
+        styles.shell,
+        {
+          height,
+          backgroundColor: v.bg,
+          borderColor: v.border,
+          borderWidth: variant === "outline" ? 1.2 : 0,
+          opacity: disabled ? 0.55 : 1,
+        },
+        styles.center,
+        containerStyle,
+        animatedStyle,
+      ]}
+    >
+      {loading ? <ActivityIndicator color={v.color} /> : inner}
+    </AnimatedPressable>
+  );
+};
+
+export default RNButton;
+
+const styles = StyleSheet.create({
+  shell: {
+    borderRadius: SPACING.radiusPill,
+    overflow: "hidden",
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  contentRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: moderateScale(8),
+  },
+});

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

@@ -0,0 +1,2 @@
+export { default as RNButton } from "./RNButton"
+// export {default as RNButtonWhite} from "./RNButtonWhite"

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

@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  Image,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from "react-native";
+import { THEME } from "../../theme";
+import RNText from "../Text/RNText";
+
+interface AvatarProps {
+  uri?: string;
+  source?: ImageSourcePropType;
+  size?: number;
+  name?: string;
+  style?: StyleProp<ViewStyle>;
+  ring?: boolean;
+}
+
+const initials = (n?: string) =>
+  (n || "")
+    .split(/\s+/)
+    .map((s) => s[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+
+const DEFAULT_AVATAR_URI = "https://picsum.photos/200/300";
+
+const Avatar: React.FC<AvatarProps> = ({
+  uri = DEFAULT_AVATAR_URI,
+  source,
+  size = 44,
+  name,
+  style,
+  ring,
+}) => {
+  const radius = size / 2;
+  const wrap = [
+    {
+      width: size,
+      height: size,
+      borderRadius: radius,
+      backgroundColor: THEME.primaryLight,
+    },
+    ring && { borderWidth: 2, borderColor: THEME.surface },
+    styles.center,
+    style,
+  ];
+  if (uri || source) {
+    return (
+      <View style={wrap}>
+        <Image
+          source={source ?? { uri }}
+          style={{ width: size, height: size, borderRadius: radius }}
+        />
+      </View>
+    );
+  }
+  return (
+    <View style={wrap}>
+      <RNText
+        font="semibold"
+        size={Math.round(size * 0.36)}
+        color={THEME.primary}
+      >
+        {initials(name) || "U"}
+      </RNText>
+    </View>
+  );
+};
+
+export default Avatar;
+
+const styles = StyleSheet.create({
+  center: { alignItems: "center", justifyContent: "center", overflow: "hidden" },
+});

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { SPACING, THEME } from '../../theme';
+
+interface CardProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  padding?: number;
+  bg?: string;
+  radius?: number;
+  shadow?: boolean;
+}
+
+const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  padding,
+  bg = THEME.surface,
+  radius = SPACING.radiusLg,
+  shadow = false,
+}) => (
+  <View
+    style={[
+      styles.card,
+      shadow && styles.shadow,
+      {
+        backgroundColor: bg,
+        borderRadius: radius,
+        padding: padding ?? SPACING.lg,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+export default Card;
+
+const styles = StyleSheet.create({
+  card: { width: '100%', borderWidth: 1, borderColor: 'rgba(44, 26, 14, 0.1)' },
+  shadow: {
+    shadowColor: THEME.shadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 1,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+});

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { moderateScale } from "react-native-size-matters";
+import { CardBrand, CARD_BRAND_LABEL } from "../../utils/card";
+import { MastercardIcon, VisaIcon } from "../Icon/SvgIcons";
+import RNText from "../Text/RNText";
+
+interface CardBrandLogoProps {
+  brand: CardBrand;
+  size?: number;
+  /** Render light text for use on a dark card preview. */
+  light?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Brand mark for a saved/preview card. Vector logos for Visa & Mastercard,
+ * a clean wordmark badge for the rest.
+ */
+const CardBrandLogo: React.FC<CardBrandLogoProps> = ({
+  brand,
+  size = 24,
+  light = false,
+  style,
+}) => {
+  if (brand === "visa") {
+    return (
+      <View style={style}>
+        <VisaIcon size={moderateScale(size)} />
+      </View>
+    );
+  }
+  if (brand === "mastercard") {
+    return (
+      <View style={style}>
+        <MastercardIcon size={moderateScale(size)} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.badge, light && styles.badgeLight, style]}>
+      <RNText
+        font="bold"
+        size={11}
+        color={light ? "#FFFFFF" : "#2C1A0E"}
+        letterSpacing={0.4}
+      >
+        {CARD_BRAND_LABEL[brand].toUpperCase()}
+      </RNText>
+    </View>
+  );
+};
+
+export default CardBrandLogo;
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: moderateScale(8),
+    paddingVertical: moderateScale(4),
+    borderRadius: moderateScale(6),
+    backgroundColor: "rgba(44, 26, 14, 0.08)",
+  },
+  badgeLight: {
+    backgroundColor: "rgba(255, 255, 255, 0.18)",
+  },
+});