@varunindiit/create-rn-starter 1.0.1

package/template/src/screen/onboarding/LanguageSelection.tsx

@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { moderateScale } from 'react-native-size-matters';
+import { showMessage } from 'react-native-flash-message';
+
+import { Header, MainContainer, RNButton, RNText } from '../../components';
+import { CheckIcon } from '../../components/Icon/SvgIcons';
+import { FONT_SIZE, SPACING, THEME } from '../../theme';
+import { useLanguage } from '../../localization';
+import { LanguageCode, LanguageOption } from '../../localization/languages';
+
+const LOGO = require('../../assets/image/logo.png');
+
+interface LanguageSelectionProps {
+  /** "onboarding" = first-launch step, "settings" = change later */
+  route?: { params?: { mode?: 'onboarding' | 'settings' } };
+}
+
+const LanguageSelection: React.FC<LanguageSelectionProps> = ({ route }) => {
+  const mode = route?.params?.mode ?? 'onboarding';
+  const isOnboarding = mode === 'onboarding';
+
+  const { t, current, languages, changeLanguage } = useLanguage();
+  const [selected, setSelected] = useState<LanguageCode>(current);
+
+  const onCardPress = (lang: LanguageOption) => {
+    setSelected(lang.code);
+    if (!isOnboarding && lang.code !== current) {
+      // Settings mode applies instantly across the whole app.
+      changeLanguage(lang.code);
+      showMessage({
+        message: t('language.changedTo', { language: lang.nativeLabel }),
+        type: 'success',
+      });
+    }
+  };
+
+  const onContinue = () => {
+    changeLanguage(selected, { markSelected: true });
+    // Onboarding gate (StackNavigation) re-renders into the app automatically.
+  };
+
+  return (
+    <MainContainer gradient statusBarStyle="light-content">
+      {!isOnboarding && (
+        <Header title={t('language.settingsTitle')} safeArea={false} />
+      )}
+
+      <ScrollView
+        contentContainerStyle={styles.scroll}
+        showsVerticalScrollIndicator={false}
+      >
+        {isOnboarding && (
+          <View style={styles.brand}>
+            <View style={styles.logoWrap}>
+              <Image source={LOGO} style={styles.logo} resizeMode="contain" />
+            </View>
+          </View>
+        )}
+
+        <View style={styles.titleBlock}>
+          <RNText font="bold" size={FONT_SIZE.h4} color={THEME.text}>
+            {isOnboarding
+              ? t('language.onboardingTitle')
+              : t('language.settingsTitle')}
+          </RNText>
+          <RNText
+            size={FONT_SIZE.base}
+            color={THEME.textSecondary}
+            style={styles.subtitle}
+          >
+            {isOnboarding
+              ? t('language.onboardingSubtitle')
+              : t('language.settingsSubtitle')}
+          </RNText>
+        </View>
+
+        <View style={styles.list}>
+          {languages.map(lang => (
+            <LanguageCard
+              key={lang.code}
+              lang={lang}
+              active={selected === lang.code}
+              onPress={() => onCardPress(lang)}
+            />
+          ))}
+        </View>
+      </ScrollView>
+
+      {isOnboarding && (
+        <View style={styles.footer}>
+          <RNButton title={t('common.continue')} onPress={onContinue} />
+        </View>
+      )}
+    </MainContainer>
+  );
+};
+
+const LanguageCard: React.FC<{
+  lang: LanguageOption;
+  active: boolean;
+  onPress: () => void;
+}> = ({ lang, active, onPress }) => (
+  <TouchableOpacity
+    activeOpacity={0.85}
+    onPress={onPress}
+    style={[styles.card, active && styles.cardActive]}
+  >
+    <View style={styles.flagWrap}>
+      <RNText size={moderateScale(26)}>{lang.flag}</RNText>
+    </View>
+    <View style={styles.cardText}>
+      <RNText font="semibold" size={FONT_SIZE.xl} color={THEME.text}>
+        {lang.nativeLabel}
+      </RNText>
+      <RNText
+        size={FONT_SIZE.sm}
+        color={THEME.textSecondary}
+        style={styles.cardSub}
+      >
+        {lang.englishLabel}
+      </RNText>
+    </View>
+    <View style={[styles.radio, active && styles.radioActive]}>
+      {active ? (
+        <CheckIcon size={moderateScale(14)} color={THEME.textOnPrimary} />
+      ) : null}
+    </View>
+  </TouchableOpacity>
+);
+
+export default LanguageSelection;
+
+const styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 1,
+    paddingHorizontal: SPACING.hPadding,
+    paddingTop: moderateScale(12),
+    paddingBottom: moderateScale(24),
+  },
+  brand: {
+    alignItems: 'center',
+    marginTop: moderateScale(24),
+    marginBottom: moderateScale(28),
+  },
+  logoWrap: {
+    width: moderateScale(96),
+    height: moderateScale(96),
+    borderRadius: moderateScale(28),
+    backgroundColor: THEME.surface,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: THEME.shadow,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 1,
+    shadowRadius: 16,
+    elevation: 4,
+  },
+  logo: {
+    width: moderateScale(64),
+    height: moderateScale(64),
+  },
+  titleBlock: {
+    marginBottom: moderateScale(24),
+  },
+  subtitle: {
+    marginTop: moderateScale(8),
+    lineHeight: moderateScale(20),
+  },
+  list: {
+    gap: moderateScale(14),
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: THEME.surface,
+    borderRadius: moderateScale(18),
+    paddingVertical: moderateScale(16),
+    paddingHorizontal: moderateScale(16),
+    borderWidth: 1.5,
+    borderColor: THEME.border,
+    shadowColor: THEME.shadow,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  cardActive: {
+    borderColor: THEME.primary,
+    backgroundColor: THEME.primaryFaint,
+  },
+  flagWrap: {
+    width: moderateScale(48),
+    height: moderateScale(48),
+    borderRadius: moderateScale(14),
+    backgroundColor: THEME.backgroundAlt,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardText: {
+    flex: 1,
+    marginLeft: moderateScale(14),
+  },
+  cardSub: {
+    marginTop: moderateScale(2),
+  },
+  radio: {
+    width: moderateScale(24),
+    height: moderateScale(24),
+    borderRadius: moderateScale(12),
+    borderWidth: 2,
+    borderColor: THEME.inputBorder,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioActive: {
+    backgroundColor: THEME.primary,
+    borderColor: THEME.primary,
+  },
+  footer: {
+    paddingHorizontal: SPACING.hPadding,
+    paddingTop: moderateScale(8),
+    paddingBottom: moderateScale(8),
+  },
+});

package/template/src/screen/root/home/index.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { moderateScale } from "react-native-size-matters";
+import { FONTS } from "../../../theme/fonts";
+import { THEME } from "../../../theme";
+
+const Home = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Home Screen</Text>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default Home;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: THEME.background,
+  },
+  content: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(24),
+  },
+  title: {
+    fontFamily: FONTS.bold,
+    fontSize: moderateScale(22),
+    color: THEME.text,
+  },
+});

package/template/src/screen/root/profile/index.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { moderateScale } from "react-native-size-matters";
+import { useDispatch } from "react-redux";
+import { logout } from "../../../redux/slice/auth";
+import { clearStorageValue } from "../../../services/storage";
+import { IS_LOGGED_IN } from "../../../utils/constants";
+import { FONTS } from "../../../theme/fonts";
+import { THEME } from "../../../theme";
+
+const Profile = () => {
+  const dispatch = useDispatch();
+
+  const onLogout = () => {
+    // Clear the persisted dummy session, then reset auth state. The top-level
+    // guard swaps back to the Auth (Login) stack automatically.
+    clearStorageValue(IS_LOGGED_IN);
+    dispatch(logout());
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Profile Screen</Text>
+
+        <TouchableOpacity
+          style={styles.button}
+          activeOpacity={0.8}
+          onPress={onLogout}
+        >
+          <Text style={styles.buttonText}>Logout</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default Profile;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: THEME.background,
+  },
+  content: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: moderateScale(24),
+  },
+  title: {
+    fontFamily: FONTS.bold,
+    fontSize: moderateScale(22),
+    color: THEME.text,
+    marginBottom: moderateScale(28),
+  },
+  button: {
+    backgroundColor: THEME.danger,
+    paddingVertical: moderateScale(14),
+    paddingHorizontal: moderateScale(44),
+    borderRadius: moderateScale(12),
+  },
+  buttonText: {
+    fontFamily: FONTS.semibold,
+    fontSize: moderateScale(16),
+    color: THEME.textOnPrimary,
+  },
+});

package/template/src/screen/shared/Chat.tsx

@@ -0,0 +1,308 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useNavigation, useRoute } from "@react-navigation/native";
+import { useDispatch, useSelector } from "react-redux";
+import { moderateScale } from "react-native-size-matters";
+import Svg, { Path } from "react-native-svg";
+import { Avatar, MainContainer, RNText } from "../../components";
+import { THEME, SPACING, FONTS } from "../../theme";
+import { RootState } from "../../redux/store";
+import { sendMessage } from "../../redux/slice/chat";
+import { useLanguage } from "../../localization";
+import {
+  ArrowRightIcon,
+  ArrowRightSmallIcon,
+  CarIcon,
+  ChevronLeftIcon,
+} from "../../components/Icon/SvgIcons";
+
+const SendPlaneIcon: React.FC<{ size?: number; color?: string }> = ({
+  size = 18,
+  color = "#fff",
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M21.5 2.5L11 13"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M21.5 2.5L15 21.5L11 13L2.5 9L21.5 2.5Z"
+      stroke={color}
+      strokeWidth={1.8}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const Chat: React.FC = () => {
+  const nav = useNavigation<any>();
+  const route = useRoute<any>();
+  const dispatch = useDispatch();
+  const { t } = useLanguage();
+  const flatListRef = useRef<FlatList>(null);
+  const convId = route.params?.conversationId || "c1";
+  const title = route.params?.title || "Matt Mitchell";
+  const conv = useSelector(
+    (s: RootState) =>
+      s.chat.conversations.find((c) => c.id === convId) ||
+      s.chat.conversations[0],
+  );
+  const [text, setText] = useState("");
+
+  useEffect(() => {
+    const t = setTimeout(
+      () => flatListRef.current?.scrollToEnd({ animated: false }),
+      80,
+    );
+    return () => clearTimeout(t);
+  }, []);
+
+  const onSend = () => {
+    if (!text.trim()) return;
+    dispatch(sendMessage({ conversationId: conv.id, text }));
+    setText("");
+    setTimeout(
+      () => flatListRef.current?.scrollToEnd({ animated: true }),
+      80,
+    );
+  };
+
+  return (
+    <MainContainer gradient>
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+      >
+        <View style={styles.header}>
+          <TouchableOpacity
+            onPress={() => nav.goBack()}
+            activeOpacity={0.7}
+            hitSlop={10}
+            style={styles.backBtn}
+          >
+            <ChevronLeftIcon size={moderateScale(22)} color={THEME.text} />
+          </TouchableOpacity>
+          <Avatar name={title} size={moderateScale(44)} />
+          <View style={styles.headerText}>
+            <RNText font="semibold" size={16} color={THEME.text}>
+              {title}
+            </RNText>
+            <RNText
+              size={12}
+              color={THEME.textMuted}
+              style={{ marginTop: moderateScale(2) }}
+            >
+              {t("messages.repliesIn")}
+            </RNText>
+          </View>
+        </View>
+
+        <View style={styles.routeBar}>
+          <View style={styles.routeRow}>
+            <CarIcon size={moderateScale(18)} color={THEME.primary} />
+            <RNText
+              font="semibold"
+              size={14}
+              color={THEME.text}
+              style={{ marginLeft: moderateScale(8) }}
+            >
+              {conv.route.from}
+            </RNText>
+            <ArrowRightSmallIcon
+              size={moderateScale(14)}
+              color={THEME.text}
+            />
+            <RNText font="semibold" size={14} color={THEME.text}>
+              {conv.route.to}
+            </RNText>
+            <View style={styles.flex} />
+            <ArrowRightIcon size={moderateScale(18)} color={THEME.text} />
+          </View>
+          <RNText
+            size={11}
+            color={THEME.textMuted}
+            style={{ marginTop: moderateScale(2), marginLeft: moderateScale(26) }}
+          >
+            {t("messages.passengerCount")}
+          </RNText>
+        </View>
+
+        <FlatList
+          ref={flatListRef}
+          data={conv.messages}
+          keyExtractor={(m) => m.id}
+          contentContainerStyle={styles.list}
+          showsVerticalScrollIndicator={false}
+          onContentSizeChange={() =>
+            flatListRef.current?.scrollToEnd({ animated: false })
+          }
+          renderItem={({ item }) => {
+            const isMine = item.sender === "me";
+            return (
+              <View
+                style={[
+                  styles.bubble,
+                  isMine ? styles.mine : styles.other,
+                ]}
+              >
+                <RNText
+                  size={14}
+                  color={isMine ? "#fff" : THEME.text}
+                  style={styles.bubbleText}
+                >
+                  {item.text}
+                </RNText>
+                <RNText
+                  size={11}
+                  color={
+                    isMine ? "rgba(255,255,255,0.85)" : THEME.textMuted
+                  }
+                  style={styles.timeText}
+                >
+                  {item.time}
+                </RNText>
+              </View>
+            );
+          }}
+        />
+
+        <View style={styles.inputBar}>
+          <View style={styles.inputWrap}>
+            <TextInput
+              value={text}
+              onChangeText={setText}
+              placeholder={t("messages.typeMessage")}
+              placeholderTextColor={THEME.textPlaceholder}
+              style={styles.input}
+              multiline
+            />
+          </View>
+          <TouchableOpacity
+            onPress={onSend}
+            style={styles.sendBtn}
+            activeOpacity={0.85}
+          >
+            <SendPlaneIcon size={moderateScale(18)} color="#fff" />
+          </TouchableOpacity>
+        </View>
+      </KeyboardAvoidingView>
+    </MainContainer>
+  );
+};
+
+export default Chat;
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: moderateScale(16),
+    paddingTop: moderateScale(8),
+    paddingBottom: moderateScale(12),
+  },
+  backBtn: {
+    width: moderateScale(36),
+    height: moderateScale(36),
+    alignItems: "flex-start",
+    justifyContent: "center",
+  },
+  headerText: {
+    marginLeft: moderateScale(10),
+    flex: 1,
+  },
+  routeBar: {
+    marginHorizontal: moderateScale(20),
+    paddingVertical: moderateScale(10),
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: THEME.divider,
+  },
+  routeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: moderateScale(6),
+  },
+  list: {
+    paddingHorizontal: moderateScale(20),
+    paddingVertical: moderateScale(14),
+    gap: moderateScale(10),
+  },
+  bubble: {
+    maxWidth: "80%",
+    paddingHorizontal: moderateScale(14),
+    paddingVertical: moderateScale(10),
+    borderRadius: moderateScale(18),
+  },
+  mine: {
+    backgroundColor: THEME.primary,
+    alignSelf: "flex-end",
+    borderBottomRightRadius: moderateScale(6),
+  },
+  other: {
+    backgroundColor: "#F5E5D3",
+    alignSelf: "flex-start",
+    borderBottomLeftRadius: moderateScale(6),
+  },
+  bubbleText: {
+    lineHeight: moderateScale(20),
+    fontFamily: FONTS.regular,
+  },
+  timeText: {
+    marginTop: moderateScale(4),
+  },
+  inputBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(10),
+    gap: moderateScale(10),
+  },
+  inputWrap: {
+    flex: 1,
+    backgroundColor: "#fff",
+    borderRadius: SPACING.radiusPill,
+    paddingHorizontal: moderateScale(18),
+    paddingVertical: Platform.OS === "ios" ? moderateScale(12) : moderateScale(4),
+    minHeight: moderateScale(46),
+    justifyContent: "center",
+    shadowColor: THEME.shadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  input: {
+    fontFamily: FONTS.regular,
+    fontSize: moderateScale(14),
+    color: THEME.text,
+    padding: 0,
+    margin: 0,
+    maxHeight: moderateScale(100),
+  },
+  sendBtn: {
+    width: moderateScale(46),
+    height: moderateScale(46),
+    borderRadius: moderateScale(23),
+    backgroundColor: THEME.primary,
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: THEME.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+});