@varunindiit/create-rn-starter 1.0.1

package/template/src/localization/useLanguage.ts

@@ -0,0 +1,42 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { setLanguage as setLanguageAction } from "../redux/slice/app";
+import {
+  DEFAULT_LANGUAGE,
+  LANGUAGES,
+  LanguageCode,
+  getLanguageOption,
+} from "./languages";
+import { markLanguageSelected, setStoredLanguage } from "./languageStorage";
+
+/**
+ * Single source of truth for reading and changing the app language.
+ * Persists to MMKV, updates i18next (re-renders all `t()` usages) and Redux.
+ */
+export const useLanguage = () => {
+  const { t, i18n } = useTranslation();
+  const dispatch = useDispatch();
+
+  const current = (i18n.language?.split("-")[0] as LanguageCode) || DEFAULT_LANGUAGE;
+
+  const changeLanguage = useCallback(
+    (code: LanguageCode, { markSelected = true }: { markSelected?: boolean } = {}) => {
+      i18n.changeLanguage(code);
+      setStoredLanguage(code);
+      if (markSelected) markLanguageSelected();
+      dispatch(setLanguageAction({ code, selected: markSelected }));
+    },
+    [dispatch, i18n],
+  );
+
+  return {
+    t,
+    current,
+    currentOption: getLanguageOption(current),
+    languages: LANGUAGES,
+    changeLanguage,
+  };
+};
+
+export default useLanguage;

package/template/src/navigation/AuthNavigation.tsx

@@ -0,0 +1,23 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import Login from "../screen/auth/Login";
+import { THEME } from "../theme";
+import RouteKey from "./RouteKey";
+import { AuthStackParamList } from "./paramLists";
+
+const Stack = createNativeStackNavigator<AuthStackParamList>();
+
+const AuthNavigation = () => (
+  <Stack.Navigator
+    initialRouteName={RouteKey.Login}
+    screenOptions={{
+      headerShown: false,
+      contentStyle: { backgroundColor: THEME.background },
+      animation: "slide_from_right",
+    }}
+  >
+    <Stack.Screen name={RouteKey.Login} component={Login} />
+  </Stack.Navigator>
+);
+
+export default AuthNavigation;

package/template/src/navigation/BottomTabs.tsx

@@ -0,0 +1,24 @@
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import React from "react";
+import BottomTabBar from "../components/BottomTabBar";
+import Home from "../screen/root/home";
+import Profile from "../screen/root/profile";
+import RouteKey from "./RouteKey";
+import { UserTabParamList } from "./paramLists";
+
+const Tab = createBottomTabNavigator<UserTabParamList>();
+
+const BottomTabs = () => (
+  <Tab.Navigator
+    screenOptions={{
+      headerShown: false,
+      sceneStyle: { backgroundColor: "transparent" },
+    }}
+    tabBar={props => <BottomTabBar {...props} />}
+  >
+    <Tab.Screen name={RouteKey.UserHome} component={Home} />
+    <Tab.Screen name={RouteKey.UserProfile} component={Profile} />
+  </Tab.Navigator>
+);
+
+export default BottomTabs;

package/template/src/navigation/RootNavigation.tsx

@@ -0,0 +1,27 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React from "react";
+import { THEME } from "../theme";
+import BottomTabs from "./BottomTabs";
+import RouteKey from "./RouteKey";
+
+const Stack = createNativeStackNavigator();
+
+/**
+ * Root (authenticated) stack. Hosts the bottom tabs and is the place to add
+ * further app-level stack screens (details, settings, etc.) as the app grows.
+ */
+const RootNavigation = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: THEME.background },
+        animation: "slide_from_right",
+      }}
+    >
+      <Stack.Screen name={RouteKey.BottomTabs} component={BottomTabs} />
+    </Stack.Navigator>
+  );
+};
+
+export default RootNavigation;

package/template/src/navigation/RouteKey.ts

@@ -0,0 +1,22 @@
+/** Centralized route names for both User and Driver flows */
+export enum RouteKey {
+  /* Onboarding */
+  LanguageSelection = "LanguageSelection",
+  LanguageSettings = "LanguageSettings",
+
+  /* Stacks */
+  AuthStack = "AuthStack",
+  AppStack = "AppStack",
+  UserStack = "UserStack",
+  DriverStack = "DriverStack",
+  BottomTabs = "BottomTabs",
+
+  /* Auth */
+  Login = "Login",
+
+  /* User Tabs */
+  UserHome = "Home",
+  UserProfile = "Profile",
+}
+
+export default RouteKey;

package/template/src/navigation/StackNavigation.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useDispatch, useSelector } from "react-redux";
+import { setIsLoggedIn } from "../redux/slice/auth";
+import { RootState } from "../redux/store";
+import { getStorageBoolean } from "../services/storage";
+import { IS_LOGGED_IN } from "../utils/constants";
+import AuthNavigation from "./AuthNavigation";
+import RootNavigation from "./RootNavigation";
+import RouteKey from "./RouteKey";
+import { THEME } from "../theme";
+
+const Stack = createNativeStackNavigator();
+
+/**
+ * Top-level navigator and auth guard. The session flag in redux decides
+ * whether the Auth stack or the Root (app) stack is mounted, so toggling
+ * `isLoggedIn` swaps the whole tree declaratively — no imperative navigation
+ * needed on login/logout.
+ */
+const StackNavigation = () => {
+  const isLoggedIn = useSelector((s: RootState) => s.auth.isLoggedIn);
+  const dispatch = useDispatch();
+  const [bootstrapped, setBootstrapped] = useState(false);
+
+  // Restore the persisted (dummy) session before rendering the tree.
+  useEffect(() => {
+    dispatch(setIsLoggedIn(getStorageBoolean(IS_LOGGED_IN) || false));
+    setBootstrapped(true);
+  }, [dispatch]);
+
+  if (!bootstrapped) {
+    return null;
+  }
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: THEME.background },
+      }}
+    >
+      {isLoggedIn ? (
+        <Stack.Screen name={RouteKey.AppStack} component={RootNavigation} />
+      ) : (
+        <Stack.Screen name={RouteKey.AuthStack} component={AuthNavigation} />
+      )}
+    </Stack.Navigator>
+  );
+};
+
+export default StackNavigation;

package/template/src/navigation/paramLists.ts

@@ -0,0 +1,25 @@
+import RouteKey from "./RouteKey";
+import { LocationValue } from "../services/places";
+
+/**
+ * Params for the shared Location Search screen.
+ *
+ * By default the selected location is written back to the ride draft based on
+ * `field` (the "Pickup Location" flow). Callers that manage their own state
+ * (e.g. the Home From/To fields) can instead pass an `onSelect` callback to
+ * receive the resolved location directly, keeping the screen reusable.
+ */
+export type LocationSearchParams = {
+  field?: "pickup" | "drop";
+  title?: string;
+  onSelect?: (location: LocationValue) => void;
+};
+
+export type AuthStackParamList = {
+  [RouteKey.Login]: undefined;
+};
+
+export type UserTabParamList = {
+  [RouteKey.UserHome]: undefined;
+  [RouteKey.UserProfile]: undefined;
+};

package/template/src/redux/slice/app.ts

@@ -0,0 +1,66 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { LanguageCode } from "../../localization/languages";
+import {
+  getStoredLanguage,
+  hasSelectedLanguage,
+} from "../../localization/languageStorage";
+
+interface AppState {
+  notificationsEnabled: { push: boolean; email: boolean; sms: boolean };
+  unreadNotificationCount: number;
+  driverOnline: boolean;
+  language: LanguageCode;
+  languageSelected: boolean;
+}
+
+const initialState: AppState = {
+  notificationsEnabled: { push: true, email: true, sms: false },
+  unreadNotificationCount: 2,
+  driverOnline: true,
+  language: getStoredLanguage(),
+  languageSelected: hasSelectedLanguage(),
+};
+
+const appSlice = createSlice({
+  name: "app",
+  initialState,
+  reducers: {
+    setNotificationPref: (
+      state,
+      action: PayloadAction<Partial<AppState["notificationsEnabled"]>>,
+    ) => {
+      state.notificationsEnabled = {
+        ...state.notificationsEnabled,
+        ...action.payload,
+      };
+    },
+    setUnreadNotificationCount: (state, action: PayloadAction<number>) => {
+      state.unreadNotificationCount = action.payload;
+    },
+    setDriverOnline: (state, action: PayloadAction<boolean>) => {
+      state.driverOnline = action.payload;
+    },
+    setLanguage: (
+      state,
+      action: PayloadAction<{ code: LanguageCode; selected?: boolean }>,
+    ) => {
+      state.language = action.payload.code;
+      if (action.payload.selected) state.languageSelected = true;
+    },
+    resetAppState: (state) => ({
+      ...initialState,
+      // Preserve language choice across logout/reset.
+      language: state.language,
+      languageSelected: state.languageSelected,
+    }),
+  },
+});
+
+export const {
+  setNotificationPref,
+  setUnreadNotificationCount,
+  setDriverOnline,
+  setLanguage,
+  resetAppState,
+} = appSlice.actions;
+export default appSlice.reducer;

package/template/src/redux/slice/auth.ts

@@ -0,0 +1,40 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export type UserRole = "passenger" | "driver";
+
+interface AuthState {
+  /** Whether the user has an active (dummy) session. */
+  isLoggedIn: boolean;
+  role: UserRole;
+}
+
+const initialState: AuthState = {
+  isLoggedIn: false,
+  role: "passenger",
+};
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    /** Start a session. Optionally set the active role. */
+    login: (state, action: PayloadAction<UserRole | undefined>) => {
+      state.isLoggedIn = true;
+      if (action.payload) {
+        state.role = action.payload;
+      }
+    },
+    /** Clear the session and reset auth state. */
+    logout: () => initialState,
+    setIsLoggedIn: (state, action: PayloadAction<boolean>) => {
+      state.isLoggedIn = action.payload;
+    },
+    setRole: (state, action: PayloadAction<UserRole>) => {
+      state.role = action.payload;
+    },
+  },
+});
+
+export const { login, logout, setIsLoggedIn, setRole } = authSlice.actions;
+
+export default authSlice.reducer;

package/template/src/redux/slice/userProfile.ts

@@ -0,0 +1,124 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface Vehicle {
+  id: string;
+  model: string;
+  registration: string;
+  type?: string;
+  manufacturer?: string;
+  color?: string;
+  year?: number;
+  seats?: number;
+  imageUri?: string | null;
+  images?: string[];
+}
+
+export interface UserProfile {
+  fullName: string;
+  email: string;
+  phone: string;
+  countryCode: string;
+  gender?: "Male" | "Female" | "Other";
+  dob?: string;
+  address?: string;
+  about?: string;
+  avatarUri?: string | null;
+  isEmailVerified?: boolean;
+  isPhoneVerified?: boolean;
+  /** Driver only */
+  isDriverVerified?: boolean;
+  licenseNumber?: string;
+  licenseExpiry?: string;
+  licenseImageUri?: string | null;
+  nationalIdImageUri?: string | null;
+  vehicles?: Vehicle[];
+  rating?: number;
+  totalTrips?: number;
+  since?: string;
+}
+
+export interface UserProfileState {
+  profile: UserProfile;
+}
+
+const initialState: UserProfileState = {
+  profile: {
+    fullName: "Justin Watson",
+    email: "justin785@gmail.com",
+    phone: "82 123 4567",
+    countryCode: "+27",
+    gender: "Male",
+    dob: "10/05/1989",
+    address: "Yaoundé, Cameroon",
+    about:
+      "Hi, I commute to Douala every weekend. I love listening to jazz and keep the car quiet. I drive a comfortable Toyota Yaris.",
+    avatarUri: null,
+    isPhoneVerified: true,
+    isEmailVerified: false,
+    isDriverVerified: true,
+    licenseNumber: "DLN-22988-CMR",
+    licenseExpiry: "12/2028",
+    rating: 4.8,
+    totalTrips: 124,
+    since: "2024",
+    vehicles: [
+      {
+        id: "v1",
+        model: "Maybach S680",
+        type: "Sedan",
+        registration: "HSA627272",
+        manufacturer: "Mercedes-Benz, S...",
+        color: "Black",
+        year: 2022,
+        seats: 5,
+        imageUri:
+          "https://images.unsplash.com/photo-1606664515524-ed2f786a0bd6?w=400",
+      },
+      {
+        id: "v2",
+        model: "Toyota Yaris",
+        type: "Sedan",
+        registration: "HSA627272",
+        manufacturer: "Mercedes-Benz, S...",
+        color: "Red",
+        year: 2020,
+        seats: 5,
+        imageUri:
+          "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400",
+      },
+    ],
+  },
+};
+
+const userProfileSlice = createSlice({
+  name: "userProfile",
+  initialState,
+  reducers: {
+    setProfile: (state, action: PayloadAction<Partial<UserProfile>>) => {
+      state.profile = { ...state.profile, ...action.payload };
+    },
+    setAvatarUri: (state, action: PayloadAction<string | null>) => {
+      state.profile.avatarUri = action.payload;
+    },
+    addVehicle: (state, action: PayloadAction<Vehicle>) => {
+      state.profile.vehicles = [
+        ...(state.profile.vehicles ?? []),
+        action.payload,
+      ];
+    },
+    removeVehicle: (state, action: PayloadAction<string>) => {
+      state.profile.vehicles =
+        state.profile.vehicles?.filter((v) => v.id !== action.payload) ?? [];
+    },
+    resetUserProfile: () => initialState,
+  },
+});
+
+export const {
+  setProfile,
+  setAvatarUri,
+  addVehicle,
+  removeVehicle,
+  resetUserProfile,
+} = userProfileSlice.actions;
+export default userProfileSlice.reducer;

package/template/src/redux/store.ts

@@ -0,0 +1,17 @@
+import { configureStore } from "@reduxjs/toolkit";
+import authSlice from "./slice/auth";
+import appSlice from "./slice/app";
+import userProfileSlice from "./slice/userProfile";
+
+const store = configureStore({
+  reducer: {
+    auth: authSlice,
+    app: appSlice,
+    userProfile: userProfileSlice,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;

package/template/src/screen/auth/Login.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 { login } from "../../redux/slice/auth";
+import { setStorageBoolean } from "../../services/storage";
+import { IS_LOGGED_IN } from "../../utils/constants";
+import { FONTS } from "../../theme/fonts";
+import { THEME } from "../../theme";
+
+const Login = () => {
+  const dispatch = useDispatch();
+
+  const onLogin = () => {
+    // Persist the dummy session, then flip auth state. The top-level guard
+    // swaps to the Root stack automatically.
+    setStorageBoolean(IS_LOGGED_IN, true);
+    dispatch(login());
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Login Screen</Text>
+
+        <TouchableOpacity
+          style={styles.button}
+          activeOpacity={0.8}
+          onPress={onLogin}
+        >
+          <Text style={styles.buttonText}>Login</Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default Login;
+
+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.primary,
+    paddingVertical: moderateScale(14),
+    paddingHorizontal: moderateScale(48),
+    borderRadius: moderateScale(12),
+  },
+  buttonText: {
+    fontFamily: FONTS.semibold,
+    fontSize: moderateScale(16),
+    color: THEME.textOnPrimary,
+  },
+});