create-gufran-expo-app 2.0.6 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-gufran-expo-app",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "🚀 Ultimate Expo React Native Boilerplate - Create production-ready Expo apps instantly with Firebase, Navigation, TypeScript, and more. No git clone needed, works offline!",
   "main": "index.js",
   "bin": {
@@ -50,4 +50,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/template/package.json

@@ -15,12 +15,11 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@likashefqet/react-native-image-zoom": "^4.3.0",
-    "@microsoft/signalr": "^9.0.6",
     "@notifee/react-native": "9.0.2",
     "@react-native-community/netinfo": "^11.4.1",
     "@react-native-firebase/app": "^23.4.0",
     "@react-native-firebase/messaging": "^23.4.0",
+    "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.17",
     "@react-navigation/native-stack": "^7.3.26",
     "@sentry/react-native": "6.20.0",
@@ -28,7 +27,6 @@
     "axios": "^1.12.2",
     "expo": "~54.0.7",
     "expo-build-properties": "^1.0.9",
-    "expo-camera": "17.0.8",
     "expo-font": "^14.0.8",
     "expo-image-picker": "16.1.4",
     "expo-splash-screen": "~31.0.10",
@@ -41,7 +39,6 @@
     "react-native-date-picker": "5.0.13",
     "react-native-flash-message": "^0.4.2",
     "react-native-gesture-handler": "2.28.0",
-    "react-native-gifted-chat": "^2.8.1",
     "react-native-image-picker": "^8.2.1",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-keyboard-controller": "^1.18.6",
@@ -49,7 +46,6 @@
     "react-native-otp-entry": "^1.8.5",
     "react-native-permissions": "^5.4.2",
     "react-native-reanimated": "~4.1.1",
-    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
     "react-native-svg": "^15.13.0",

package/template/src/assets/icons/index.ts

@@ -1,144 +1,49 @@
-import home from "./home.svg";
-import login_logo from "./login_logo.svg";
+import chatAppleGreenBG from "./chatAppleGreenBG.svg";
+import chevronRight from "./chevron-right.svg";
+import curvViewImage from "./curvBackgroundView.svg";
+import Delete from "./ic_delete.svg";
 import Email from "./email.svg";
-import Password from "./password.svg";
-import OR_separator from "./or_saprater.svg";
 import eye from "./eye.svg";
 import eyeOff from "./eye-Hide.svg";
-import phone from "./call.svg";
-import user from "./user.svg";
-import uncheck from "./uncheck.svg";
-import check from "./check.svg";
-import uploadImageProfile from "./upload_Image.svg";
-import uploadImageMember from "./upload_Image_Member.svg";
-import arrowLeft from "./arrow-left.svg";
-import arrowLeft_white from "./arrow-left-white.svg";
 import gallery from "./gallery.svg";
-import curvViewImage from "./curvBackgroundView.svg";
-import SuccessIcone from "./success.svg";
-import NotificationIcon from "./ic_Notification.svg";
-import UsersIcon from "./Ic_Users.svg";
 import locationIcon from "./location.svg";
-import locationWhite from "./location-white.svg";
-import locationBlue from "./location-blue.svg";
-import icAdd from "./ic_add.svg";
-import uncheckRadio from "./unCheck_Radio.svg";
-import checkRadio from "./check_Radio.svg";
-import bottomSheetIcone from "./bottomSheetIcone.svg";
-import search from "./search.svg";
-import profileAppleGreen from "./profile-appleGreen.svg";
-import emptyUser from "./emptyUser.svg";
-import Teams from "./ic_Teams.svg";
-import Calendar from "./ic_Calendar.svg";
-import CalendarWhite from "./ic_Calendar_white.svg";
-import CalendarBlue from "./ic_Calendar_blue.svg";
-import Raffles from "./ic_Raffles.svg";
-import Chat from "./ic_Chat.svg";
-import Shop from "./ic_Shop.svg";
-import Events from "./ic_Events.svg";
-import Volunteer from "./ic_Volunteer.svg";
-import Membership from "./ic_Membership.svg";
+import login_logo from "./login_logo.svg";
 import no_wifi from "./wifi.svg";
-import chatAppleGreen from "./ic_ChatAppleGreen.svg";
-import chatAppleWhite from "./ic_ChatAppleWhite.svg";
-import HeadCoachIcon from "./ic_HeadCoachIcon.svg";
-import chatAppleGreenBG from "./chatAppleGreenBG.svg";
-import chatBlueBG from "./ic_chat_blue_bg.svg";
-import more from "./ic_more.svg";
-import addCircle from "./ic_addCircle.svg";
-import chatSend from "./ic_chatSend.svg";
-import mute from "./ic_mute.svg";
-import ReferralMembers from "./ic_Referral_Members.svg";
-import DownloadBlue from "./ic_Download.svg";
-import PDFAppleGreen from "./ic_pdf.svg";
-import volunteerMember from "./ic_volunteer_Member.svg";
-import rightAppleGreen from "./ic_right_appleGreen.svg";
-import PendingAppleGreen from "./ic_pending_AppleGreen.svg";
-import Delete from "./ic_delete.svg";
-import Clock_Blue from "./ic_clock_blue.svg";
-import UNREAD_CHAT_BLUE_BG from "./ic_unread_chat_blue_bg.svg";
-
-
-
-
-
-
-
-
-
-import mail from "./mail.svg";
-import lock from "./lock.svg";
-import bell from "./bell.svg";
-import settings from "./settings.svg";
+import OR_separator from "./or_saprater.svg";
+import Password from "./password.svg";
+import uploadImageMember from "./upload_Image_Member.svg";
+import UsersIcon from "./Ic_Users.svg";
 import logOut from "./log-out.svg";
-import chevronRight from "./chevron-right.svg";
+import settings from "./settings.svg";
+import user from "./user.svg";
+import bell from "./bell.svg";
+import lock from "./lock.svg";
+import home from "./home.svg";
+import mail from "./mail.svg";
 
 const SVG = {
-    login_logo,
-    Email,
-    Password,
-    OR_separator,
-    user,
-    phone,
-    eye,
-    check,
-    uncheck,
-    home,
-    mail,
-    lock,
-    eyeOff,
-    bell,
-    settings,
-    logOut,
-    chevronRight,
-    uploadImageProfile,
-    uploadImageMember,
-    arrowLeft,
-    gallery,
-    curvViewImage,
-    SuccessIcone,
-    NotificationIcon,
-    UsersIcon,
-    locationIcon,
-    icAdd,
-    uncheckRadio,
-    checkRadio,
-    bottomSheetIcone,
-    arrowLeft_white,
-    search,
-    profileAppleGreen,
-    locationWhite,
-    emptyUser,
-    Teams,
-    Calendar,
-    Raffles,
-    Chat,
-    Shop,
-    Events,
-    Volunteer,
-    Membership,
-    no_wifi,
-    chatAppleGreen,
-    chatAppleWhite,
-    HeadCoachIcon,
-    chatAppleGreenBG,
-    more,
-    addCircle,
-    chatSend,
-    mute,
-    locationBlue,
-    CalendarBlue,
-    CalendarWhite,
-    ReferralMembers,
-    DownloadBlue,
-    PDFAppleGreen,
-    volunteerMember,
-    chatBlueBG,
-    rightAppleGreen,
-    PendingAppleGreen,
-    Delete,
-    Clock_Blue,
-    UNREAD_CHAT_BLUE_BG
-}
-
-export default SVG;
+  login_logo,
+  Email,
+  Password,
+  OR_separator,
+  eye,
+  eyeOff,
+  uploadImageMember,
+  gallery,
+  curvViewImage,
+  UsersIcon,
+  locationIcon,
+  chevronRight,
+  no_wifi,
+  chatAppleGreenBG,
+  Delete,
+  logOut,
+  settings,
+  user,
+  bell,
+  lock,
+  home,
+  mail,
+};
+
+export default SVG;

package/template/src/components/common/Icon.tsx

@@ -1,25 +1,33 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import { SvgProps } from 'react-native-svg';
-import { theme } from '../../constants';
+import React from "react";
+import { Text, View } from "react-native";
+import { SvgProps } from "react-native-svg";
+import { theme } from "../../constants";
 
 // Try to import SVG icons with fallback
-let HomeIcon: any, UserIcon: any, SettingsIcon: any, EyeIcon: any, EyeOffIcon: any;
-let MailIcon: any, LockIcon: any, ChevronRightIcon: any, LogOutIcon: any, BellIcon: any;
+let HomeIcon: any,
+  UserIcon: any,
+  SettingsIcon: any,
+  EyeIcon: any,
+  EyeOffIcon: any;
+let MailIcon: any,
+  LockIcon: any,
+  ChevronRightIcon: any,
+  LogOutIcon: any,
+  BellIcon: any;
 
 try {
-  HomeIcon = require('../../assets/icons/home.svg').default;
-  UserIcon = require('../../assets/icons/user.svg').default;
-  SettingsIcon = require('../../assets/icons/settings.svg').default;
-  EyeIcon = require('../../assets/icons/eye.svg').default;
-  EyeOffIcon = require('../../assets/icons/eye-off.svg').default;
-  MailIcon = require('../../assets/icons/mail.svg').default;
-  LockIcon = require('../../assets/icons/lock.svg').default;
-  ChevronRightIcon = require('../../assets/icons/chevron-right.svg').default;
-  LogOutIcon = require('../../assets/icons/log-out.svg').default;
-  BellIcon = require('../../assets/icons/bell.svg').default;
+  HomeIcon = require("../../assets/icons/home.svg").default;
+  UserIcon = require("../../assets/icons/user.svg").default;
+  SettingsIcon = require("../../assets/icons/settings.svg").default;
+  EyeIcon = require("../../assets/icons/eye.svg").default;
+  EyeOffIcon = require("../../assets/icons/eye-hide.svg").default;
+  MailIcon = require("../../assets/icons/mail.svg").default;
+  LockIcon = require("../../assets/icons/lock.svg").default;
+  ChevronRightIcon = require("../../assets/icons/chevron-right.svg").default;
+  LogOutIcon = require("../../assets/icons/log-out.svg").default;
+  BellIcon = require("../../assets/icons/bell.svg").default;
 } catch (error) {
-  console.warn('SVG icons could not be loaded, using fallback');
+  console.warn("SVG icons could not be loaded, using fallback");
 }
 
 // Icon mapping
@@ -28,11 +36,11 @@ const iconMap = {
   user: UserIcon,
   settings: SettingsIcon,
   eye: EyeIcon,
-  'eye-off': EyeOffIcon,
+  "eye-off": EyeOffIcon,
   mail: MailIcon,
   lock: LockIcon,
-  'chevron-right': ChevronRightIcon,
-  'log-out': LogOutIcon,
+  "chevron-right": ChevronRightIcon,
+  "log-out": LogOutIcon,
   bell: BellIcon,
 } as const;
 
@@ -45,18 +53,22 @@ export interface IconProps extends SvgProps {
 }
 
 // Fallback icon component
-const FallbackIcon: React.FC<{ name: string; size: number; color: string }> = ({ name, size, color }) => (
+const FallbackIcon: React.FC<{ name: string; size: number; color: string }> = ({
+  name,
+  size,
+  color,
+}) => (
   <View
     style={{
       width: size,
       height: size,
       backgroundColor: color,
       borderRadius: size / 4,
-      alignItems: 'center',
-      justifyContent: 'center',
+      alignItems: "center",
+      justifyContent: "center",
     }}
   >
-    <Text style={{ color: 'white', fontSize: size * 0.4, fontWeight: 'bold' }}>
+    <Text style={{ color: "white", fontSize: size * 0.4, fontWeight: "bold" }}>
       {name.charAt(0).toUpperCase()}
     </Text>
   </View>
@@ -71,23 +83,16 @@ export const Icon: React.FC<IconProps> = ({
   const IconComponent = iconMap[name];
 
   // Debug log to see what we're getting
-  if (__DEV__) {
-    console.log('Icon name:', name);
-    console.log('IconComponent:', IconComponent);
-    console.log('typeof IconComponent:', typeof IconComponent);
-  }
+  // if (__DEV__) {
+  //   console.log('Icon name:', name);
+  //   console.log('IconComponent:', IconComponent);
+  //   console.log('typeof IconComponent:', typeof IconComponent);
+  // }
 
-  if (!IconComponent || typeof IconComponent !== 'function') {
+  if (!IconComponent || typeof IconComponent !== "function") {
     console.warn(`Icon "${name}" not found or invalid, using fallback`);
     return <FallbackIcon name={name} size={size} color={color} />;
   }
 
-  return (
-    <IconComponent
-      width={size}
-      height={size}
-      color={color}
-      {...props}
-    />
-  );
+  return <IconComponent width={size} height={size} color={color} {...props} />;
 };

package/template/src/components/common/SafeAreaWrapper.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { SafeAreaView, StyleSheet, ViewStyle } from 'react-native';
-import { theme } from '../../constants';
+import React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useTheme } from "../../stores/themeStore";
 
 interface SafeAreaWrapperProps {
   children: React.ReactNode;
@@ -11,10 +12,15 @@ interface SafeAreaWrapperProps {
 export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
   children,
   style,
-  backgroundColor = theme.colors.background,
+  backgroundColor,
 }) => {
+  const theme = useTheme();
+  const bgColor = backgroundColor ?? theme.colors.background;
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor }, style]}>
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: bgColor }, style]}
+    >
       {children}
     </SafeAreaView>
   );

package/template/src/constants/strings.ts

@@ -129,81 +129,16 @@ export class Strings {
     FEATURE_UTILITIES: '✅ Utility Functions',
   };
 
-  // MARK: - Profile Screen Strings
-  static readonly PROFILE = {
-    TITLE: 'Profile',
-    EDIT_PROFILE: 'Edit Profile',
-    LOGOUT: 'Logout',
-    ACCOUNT_SETTINGS: 'Account Settings',
-    PERSONAL_INFO: 'Personal Information',
-    SECURITY: 'Security',
-    NOTIFICATIONS: 'Notifications',
-    PRIVACY: 'Privacy',
-  };
 
-  // MARK: - Settings Screen Strings
-  static readonly SETTINGS = {
-    TITLE: 'Settings',
-    GENERAL: 'General',
-    APPEARANCE: 'Appearance',
-    LANGUAGE: 'Language',
-    ABOUT: 'About',
-    VERSION: 'Version',
-    TERMS_OF_SERVICE: 'Terms of Service',
-    PRIVACY_POLICY: 'Privacy Policy',
-    CONTACT_SUPPORT: 'Contact Support',
-  };
 
-  // MARK: - Details Screen Strings
-  static readonly DETAILS = {
-    TITLE: 'Details',
-    DESCRIPTION: 'Description',
-    MORE_INFO: 'More Information',
-    RELATED_ITEMS: 'Related Items',
-    SHARE: 'Share',
-    BOOKMARK: 'Bookmark',
-  };
 
-  // MARK: - Alert Messages
-  static readonly ALERTS = {
-    CONFIRM_LOGOUT: 'Are you sure you want to logout?',
-    CONFIRM_DELETE: 'Are you sure you want to delete this item?',
-    NETWORK_ERROR: 'Network error. Please check your connection.',
-    SERVER_ERROR: 'Server error. Please try again later.',
-    UNKNOWN_ERROR: 'An unknown error occurred.',
-  };
 
-  // MARK: - Accessibility Strings
-  static readonly ACCESSIBILITY = {
-    LOGIN_BUTTON: 'Login button',
-    SIGNUP_BUTTON: 'Sign up button',
-    EMAIL_INPUT: 'Email input field',
-    PASSWORD_INPUT: 'Password input field',
-    FORGOT_PASSWORD_LINK: 'Forgot password link',
-    MENU_BUTTON: 'Menu button',
-    BACK_BUTTON: 'Back button',
-    CLOSE_BUTTON: 'Close button',
-  };
-  static readonly Teams = {
-    TEAMS: 'Teams',
-    JOIN_TEAM_SUBTITLE: 'Join Team',
-    PENDING_REQUEST: 'Pending Request',
-    MY_TEAMS_SECTION_TITLE: 'MY TEAMS',
-    SEARCH_AND_JOIN_TEAM:'Search and join team to explore the events, matches, and activities and more.',
-    UNIQUE_CODE_AND_CLUB_NAME:'Unique code and club name',
-    SEARCH_BY_TEAM_NAME:'Search by team name'
-  };
-  static readonly Announcements = {
-    ANNOUNCEMENTS: 'Announcements'
-  };
-  static readonly VolunteerOpportunities = {
-    VOLUNTEER_OPPORTUNITIES: 'Volunteer Opportunities',
-    TOTAL_HOURS: "Total Hours",
-    HOURS: " Hours",
-    NEXT_SHIFT: "Next Shift",
-    THIS_MONTH: "This Month",
-    VIEW_MORE_DETAILS: "View Details",
-  };
+  
+
+  
+ 
+
+ 
 
 }
 

package/template/src/constants/theme.ts

@@ -61,11 +61,23 @@ export const darkTheme: Theme = {
   ...lightTheme,
   colors: {
     ...lightTheme.colors,
+    primary: '#0A84FF',
+    secondary: '#5E5CE6',
     background: '#000000',
     surface: '#1C1C1E',
     text: '#FFFFFF',
     textSecondary: '#8E8E93',
     border: '#38383A',
+    success: '#30D158',
+    warning: '#FF9F0A',
+    error: '#FF453A',
+    blue: '#3B82F6',
+    DarkGray: '#B0B0B0',
+    lightLavenderGray: '#1C1C1E',
+    imageBorder: '#2C2C2E',
+    paraText: '#D1D1D6',
+    white: '#FFFFFF',
+    black: '#000000',
   },
 };
 

package/template/src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Platform } from 'react-native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BottomTabParamList } from '../types';
+import { HomeScreen, ProfileScreen, SettingsScreen } from '../screens';
+import { Icon } from '../components/common';
+import { useTheme } from '../stores/themeStore';
+import { Theme } from '../types';
+
+const Tab = createBottomTabNavigator<BottomTabParamList>();
+
+export const BottomTabNavigator: React.FC = () => {
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  return (
+    <Tab.Navigator
+      id={undefined}
+      initialRouteName="Home"
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: theme.colors.primary,
+        tabBarInactiveTintColor: theme.colors.textSecondary,
+        tabBarStyle: styles.tabBar,
+        tabBarLabelStyle: styles.tabBarLabel,
+        tabBarItemStyle: styles.tabBarItem,
+      }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Icon name="home" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          tabBarLabel: 'Settings',
+          tabBarIcon: ({ color, size }) => (
+            <Icon name="settings" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          tabBarLabel: 'Profile',
+          tabBarIcon: ({ color, size }) => (
+            <Icon name="user" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    tabBar: {
+      backgroundColor: theme.colors.background,
+      borderTopColor: theme.colors.border,
+      borderTopWidth: StyleSheet.hairlineWidth,
+      paddingTop: theme.spacing.xs,
+      height: Platform.OS === 'ios' ? 88 : 64,
+      elevation: 8,
+      shadowColor: theme.colors.black,
+      shadowOffset: { width: 0, height: -2 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+    },
+    tabBarLabel: {
+      fontSize: theme.typography.fontSize.xs,
+      fontWeight: theme.typography.fontWeight.medium,
+      marginTop: 2,
+    },
+    tabBarItem: {
+      paddingVertical: theme.spacing.xs,
+    },
+  });

package/template/src/navigation/MainStack.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { MainStackParamList } from '../types';
-import {
-  HomeScreen,
-} from '../screens';
-import { theme } from '../constants/theme';
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { MainStackParamList } from "../types";
+import { BottomTabNavigator } from "./BottomTabNavigator";
+import { useTheme } from "../stores/themeStore";
 
 const Stack = createNativeStackNavigator<MainStackParamList>();
 
 export const MainStack: React.FC = () => {
+  const theme = useTheme();
+
   return (
     <Stack.Navigator
       id={undefined}
-      initialRouteName="Home"
+      initialRouteName="BottomTabs"
       screenOptions={{
         headerShown: false,
         headerStyle: {
@@ -23,13 +23,16 @@ export const MainStack: React.FC = () => {
           fontWeight: theme.typography.fontWeight.semibold,
           fontSize: theme.typography.fontSize.lg,
         },
-        headerBackTitle: '',
-        animation: 'fade',
+        headerBackTitle: "",
+        animation: "fade",
         headerShadowVisible: false,
       }}
     >
-      <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Club Yakka', headerLargeTitle: true }} />
-
+      <Stack.Screen
+        name="BottomTabs"
+        component={BottomTabNavigator}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 };