create-gufran-expo-app 2.0.4 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-gufran-expo-app",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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": {
@@ -22,7 +22,7 @@
     "starter-kit",
     "gufran"
   ],
-  "author": "Gufran Gaury <your-email@example.com>",
+  "author": "Gufran Gaury <gufran.gaury@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -49,4 +49,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/template/src/navigation/AuthStack.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { AuthStackParamList } from '../types';
-import { LoginScreen, RegisterScreen, ForgotPasswordScreen, OTPVerifyScreen, WelcomeScreen } from '../screens/auth';
-import { theme } from '../constants';
-import { StorageService } from '../utils/storage';
-import SuccessScreen from '../screens/auth/SuccessScreen';
+import { LoginScreen, WelcomeScreen } from '../screens/auth';
+import { theme } from '@constants';
+import { StorageService } from '@utils/storage';
 
 const Stack = createNativeStackNavigator<AuthStackParamList>();
 
 export const AuthStack: React.FC = () => {
   // Check if welcome screen has been shown before
   const hasWelcomeScreenBeenShown = StorageService.preferences.getWelcomeScreenShown();
-  
+
   // Set initial route based on whether welcome screen has been shown
   const initialRouteName = hasWelcomeScreenBeenShown ? 'Login' : 'Welcome';
 
@@ -37,30 +36,12 @@ export const AuthStack: React.FC = () => {
       <Stack.Screen
         name="Welcome"
         component={WelcomeScreen}
-       
+
       />
       <Stack.Screen
         name="Login"
         component={LoginScreen}
-       
-      />
-      <Stack.Screen
-        name="Register"
-        component={RegisterScreen}
-       
-      />
-      <Stack.Screen
-        name="ForgotPassword"
-        component={ForgotPasswordScreen}
-       
-      />
-      <Stack.Screen
-        name="OTPVerify"
-        component={OTPVerifyScreen}
-      />
-      <Stack.Screen
-        name="Success"
-        component={SuccessScreen}
+
       />
     </Stack.Navigator>
   );

package/template/src/navigation/MainStack.tsx

@@ -3,30 +3,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { MainStackParamList } from '../types';
 import {
   HomeScreen,
-  ProfileScreen,
-  SettingsScreen,
-  DetailsScreen,
-  ClubDetailsScreen,
-  SportHubScreen,
-  MyTeamScreen,
-  MyTeamDetailsScreen,
-  JoinTeam,
-  ChatThreadsScreen,
-  ChatScreen,
-  ReportMessageScreen,
-  Announcements,
-  VolunteerOpportunitiesScreen,
-  RafflesScreen,
-  RaffleDetailsScreen,
-  BuyRaffleTicketsScreen,
-  VolunteerOpportunitiesDetailsScreen,
-  MyReferralMembersScreen,
-  SetReminderScreen,
-  SetRaffleReminderScreen,
-  EventScreen
 } from '../screens';
-import { PendingRequestsScreen } from '../screens/teams/PendingRequestsScreen';
-import { JoinClubScreen } from '../screens/clubs/JoinClub';
 import { theme } from '../constants/theme';
 
 const Stack = createNativeStackNavigator<MainStackParamList>();
@@ -52,132 +29,7 @@ export const MainStack: React.FC = () => {
       }}
     >
       <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Club Yakka', headerLargeTitle: true }} />
-      <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile', headerBackTitle: 'Back' }} />
-      <Stack.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{
-          title: 'Settings',
-          headerBackTitle: 'Back',
-        }}
-      />
-      <Stack.Screen
-        name="Details"
-        component={DetailsScreen}
-        options={({ route }) => ({
-          title: route.params?.title || 'Details',
-          headerBackTitle: 'Back',
-        })}
-      />
-      <Stack.Screen
-        name="JoinClub"
-        component={JoinClubScreen}
-        options={{
-          title: 'Join Club',
-          headerBackTitle: 'Back',
-        }}
-      />
 
-      <Stack.Screen
-        name="ClubDetails"
-        component={ClubDetailsScreen}
-        options={{
-          title: 'Club Details',
-          headerBackTitle: 'Back',
-        }}
-      />
-      <Stack.Screen
-        name="SportHub"
-        component={SportHubScreen}
-        options={{
-          title: 'MY SPORT HUB',
-          headerBackTitle: 'Back',
-        }}
-      />
-      <Stack.Screen
-        name="MyTeam"
-        component={MyTeamScreen}
-      />
-      <Stack.Screen
-        name="MyTeamDetails"
-        component={MyTeamDetailsScreen}
-        options={{
-          title: 'Team Details',
-          headerBackTitle: 'Back',
-        }}
-      />
-      <Stack.Screen
-        name="PendingRequests"
-        component={PendingRequestsScreen}
-        options={{
-          title: 'Pending Requests',
-          headerBackTitle: 'Back',
-        }}
-      />
-      <Stack.Screen
-        name="JoinTeam"
-        component={JoinTeam}
-      />
-
-      <Stack.Screen
-        name="ChatThreads"
-        component={ChatThreadsScreen}
-      />
-      <Stack.Screen
-        name="ChatScreen"
-        component={ChatScreen}
-      />
-      <Stack.Screen
-        name="ReportMessage"
-        component={ReportMessageScreen}
-        options={{
-          presentation: 'transparentModal',
-          headerShown: false,
-          animation: 'fade',
-        }}
-      />
-      <Stack.Screen
-        name="Announcements"
-        component={Announcements}
-      />
-      <Stack.Screen
-        name="VolunteerOpportunitiesScreen"
-        component={VolunteerOpportunitiesScreen}
-      />
-      <Stack.Screen
-        name="VolunteerOpportunitiesDetailsScreen"
-        component={VolunteerOpportunitiesDetailsScreen}
-      />
-      <Stack.Screen
-        name="Raffles"
-        component={RafflesScreen}
-      />
-      <Stack.Screen
-        name="RaffleDetails"
-        component={RaffleDetailsScreen}
-      />
-      <Stack.Screen
-        name="BuyRaffleTickets"
-        component={BuyRaffleTicketsScreen}
-      />
-      <Stack.Screen
-        name="MyReferralMembers"
-        component={MyReferralMembersScreen}
-      />
-      <Stack.Screen
-        name="SetReminder"
-        component={SetReminderScreen}
-      />
-      <Stack.Screen
-        name="SetRaffleReminder"
-        component={SetRaffleReminderScreen}
-      />
-
-
-      <Stack.Screen
-        name="EventScreen"
-        component={EventScreen}
-      />
     </Stack.Navigator>
   );
 };

package/template/src/navigation/RootNavigator.tsx

@@ -1,19 +1,17 @@
 import React, { useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { useAuthStore } from '../stores/authStore';
+import { useAuthStore } from '@stores/authStore';
 import { AuthStack } from './AuthStack';
-import { MiddleStack } from './MiddleStack';
 import { MainStack } from './MainStack';
-import { LoadingSpinner } from '../components/common';
+import { LoadingSpinner } from '@components/common';
 import * as SplashScreen from 'expo-splash-screen';
 import { navigationRef } from './navigationRef';
-import NotificationManager from '../utils/NotificationManager';
+import NotificationManager from '@utils/NotificationManager';
 
 // Navigation component that switches between Auth, Middle and Main stacks
 const AppNavigator: React.FC = () => {
   const isLoading = useAuthStore((state) => state.isLoading);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const user = useAuthStore((state) => state.user);
 
   if (isLoading) {
     return <LoadingSpinner />;
@@ -23,11 +21,6 @@ const AppNavigator: React.FC = () => {
     return <AuthStack />;
   }
 
-  // If user is authenticated but needs to add member, show MiddleStack
-  if (user?.isAddMember) {
-    return <MiddleStack />;
-  }
-
   // Otherwise show MainStack
   return <MainStack />;
 };
@@ -70,23 +63,8 @@ export const RootNavigator: React.FC = () => {
     };
   }, []);
 
-  // When authentication state changes to a stack that contains the target routes,
-  // attempt any pending navigation that may have been queued from a notification.
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const user = useAuthStore((state) => state.user);
-  useEffect(() => {
-    // Only try when we are in the main app (not auth / middle stack)
-    if (isAuthenticated && !user?.isAddMember) {
-      // Small delay to ensure navigator screens are mounted
-      const id = setTimeout(() => {
-        NotificationManager.executePendingNavigation();
-      }, 100);
-      return () => clearTimeout(id);
-    }
-  }, [isAuthenticated, user?.isAddMember]);
-
   return (
-    <NavigationContainer 
+    <NavigationContainer
       ref={navigationRef}
       onReady={() => {
         setTimeout(() => {

package/template/src/navigation/index.ts

@@ -1,5 +1,4 @@
 export * from './RootNavigator';
 export * from './AuthStack';
-export * from './MiddleStack';
 export * from './MainStack';
 export * from './navigationRef';

package/template/src/navigation/navigationRef.ts

@@ -1,5 +1,5 @@
 import { createNavigationContainerRef } from '@react-navigation/native';
-import { RootStackParamList } from '../types/navigation';
+import { RootStackParamList } from '@navigation';
 
 // Create navigation reference
 export const navigationRef = createNavigationContainerRef<RootStackParamList>();

package/template/src/screens/HomeScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { View, Text, StyleSheet, FlatList, StatusBar, Platform, TouchableOpacity, Image, RefreshControl, ActivityIndicator, Modal, Animated, Dimensions, PanResponder, Alert } from 'react-native';
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, Text, StyleSheet, FlatList, StatusBar, Platform, TouchableOpacity, Image, RefreshControl, ActivityIndicator, Alert } from 'react-native';
 import { useQueryClient } from '@tanstack/react-query';
 import { useFocusEffect } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -11,64 +11,19 @@ import { Fonts } from '@constants/Fonts';
 import { useAuthStore } from '@stores/authStore';
 import { getApiErrorInfo, useLogout } from '@services/authService';
 import { Button, ClubCard } from '@components/common';
-import { mainService, useInfiniteMyClubs } from '@services/mainServices';
+import { useInfiniteMyClubs } from '@services/mainServices';
 import ToastManager from '@components/common/ToastManager';
 import SVG from '@assets/icons';
 
-type MemberListItemProps = {
-  item: any;
-  isSelected: boolean;
-  onSelect: (member: any) => void;
-};
-
 
-const MemberListItem: React.FC<MemberListItemProps> = ({ item, isSelected, onSelect }) => {
-  const [memberImageError, setMemberImageError] = useState(false);
-  return (
-    <TouchableOpacity style={styles.memberListItem} onPress={() => onSelect(item)}>
-      {item?.profileImage && !memberImageError ? (
-        <Image
-          source={{ uri: item?.profileImage }}
-          onError={() => {
-            setMemberImageError(true);
-          }}
-          style={styles.profileImage}
-        />
-      ) : (
-        <SVG.emptyUser style={{ marginRight: moderateScale(10) }} width={moderateScale(50)} height={moderateScale(50)} />
-      )}
-      <View style={styles.memberNameContainer}>
-        <Text style={styles.memberName}>{item?.name}</Text>
-        {item?.isOwner && (
-          <Text style={styles.memberNameSubtitle}>Yourself</Text>
-        )}
-      </View>
-      <View>
-        {isSelected ? (
-          <SVG.checkRadio width={moderateScale(20)} height={moderateScale(20)} />
-        ) : (
-          <SVG.uncheckRadio width={moderateScale(20)} height={moderateScale(20)} />
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-};
 
 export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
   const user = useAuthStore((state) => state.user);
   const [isLoading, setIsLoading] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const [membersModal, setMembersModal] = useState<boolean>(false);
-  const [selectedMember, setSelectedMember] = useState<any>(null);
-  const [members, setMembers] = useState<any[]>([]);
-  const translateY = useRef(new Animated.Value(0)).current;
-  const screenHeight = Dimensions.get('window').height;
-  const bottomSheetHeight = screenHeight * 0.45; // 45% of screen height
   const PAGE_SIZE = 10;
   const queryClient = useQueryClient();
-  const [selectedClub, setSelectedClub] = useState<any>(null);
   const logout = useAuthStore((state) => state.logout);
-  const [joinClubMemberImageUrls, setJoinClubMemberImageUrls] = useState<Record<number, string>>({});
   const [listError, setListError] = useState<string | null>(null);
 
 
@@ -250,104 +205,11 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
   };
 
 
-
-
-  const handleMemberSelection = (member: any) => {
-    setSelectedMember(member);
-    console.log('Selected member:', member);
-  };
-
-  // Bottom sheet animation functions
-  const showBottomSheet = () => {
-    setMembersModal(true);
-    Animated.spring(translateY, {
-      toValue: 0,
-      useNativeDriver: true,
-      tension: 100,
-      friction: 8,
-    }).start();
-  };
-
-  const hideBottomSheet = () => {
-    Animated.timing(translateY, {
-      toValue: bottomSheetHeight,
-      duration: 300,
-      useNativeDriver: true,
-    }).start(() => {
-      setMembersModal(false);
-      translateY.setValue(bottomSheetHeight);
-    });
-  };
-
-  // PanResponder for swipe gestures
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return Math.abs(gestureState.dy) > 5;
-      },
-      onPanResponderGrant: () => {
-        translateY.setOffset((translateY as any)._value);
-        translateY.setValue(0);
-      },
-      onPanResponderMove: (_, gestureState) => {
-        // Only allow downward movement
-        if (gestureState.dy > 0) {
-          translateY.setValue(gestureState.dy);
-        }
-      },
-      onPanResponderRelease: (_, gestureState) => {
-        translateY.flattenOffset();
-
-        // If swiped down more than 100px or with high velocity, close the modal
-        if (gestureState.dy > 100 || gestureState.vy > 0.5) {
-          hideBottomSheet();
-        } else {
-          // Snap back to original position
-          Animated.spring(translateY, {
-            toValue: 0,
-            useNativeDriver: true,
-            tension: 100,
-            friction: 8,
-          }).start();
-        }
-      },
-    })
-  ).current;
-
-  const renderMemberListItem = ({ item }: { item: any }) => (
-    <MemberListItem
-      item={item}
-      isSelected={selectedMember?.id === item?.id}
-      onSelect={handleMemberSelection}
-    />
-  );
-
-
   const renderClubItem = ({ item }: any) => {
     return (
       <ClubCard
         club={item}
         onPress={async () => {
-          const response = await mainService.getClubMembers({ clubId: item?.id });
-          const members = response.data.data;
-          const sortedMembers = members.sort((a: any, b: any) => {
-            if (a?.isOwner) return -1;
-            if (b?.isOwner) return 1;
-            return 0;
-          });
-          setSelectedClub(item);
-          setMembers(sortedMembers.map((member: any) => ({
-            ...member,
-            profileImageUrl: joinClubMemberImageUrls[member?.id] || undefined
-          })));
-
-          if (sortedMembers.length === 1) {
-            setSelectedMember(sortedMembers[0]);
-            navigation.navigate('ClubDetails', { ...item, selectedMember: sortedMembers[0] });
-          } else {
-            setSelectedMember(null);
-            showBottomSheet();
-          }
         }}
       />
     );
@@ -428,80 +290,6 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
         />
       </View>
 
-
-      <Modal
-        visible={membersModal}
-        animationType="fade"
-        transparent={true}
-        onRequestClose={hideBottomSheet}
-      >
-        <View style={styles.modalOverlay}>
-          <TouchableOpacity
-            style={styles.modalBackdrop}
-            activeOpacity={1}
-            onPress={hideBottomSheet}
-          />
-          <Animated.View
-            style={[
-              styles.modalContainer,
-              {
-                transform: [{ translateY }],
-              },
-            ]}
-
-          >
-            <View style={styles.dragHandle} {...panResponder.panHandlers} />
-            <FlatList
-              data={members}
-              renderItem={renderMemberListItem}
-              style={styles.membersList}
-              showsVerticalScrollIndicator={false}
-              ListHeaderComponent={() => {
-                return (
-                  <View>
-                    <View style={styles.headerContainer}>
-                      <Text style={styles.mamberHeaderTitle}>Continue as</Text>
-                    </View>
-                  </View>
-                )
-              }}
-
-              keyExtractor={(item, index) => {
-                // Create a more robust key for members
-                const id = item?.id?.toString() || '';
-                const name = item?.name || '';
-                const email = item?.email || '';
-                const memberCode = item?.membershipCode || '';
-                const createdAt = item?.createdAt || '';
-                // Create a unique composite key using multiple attributes
-                const keyParts = [id, name, email, memberCode, createdAt].filter(part => part && part.toString().trim() !== '');
-
-                if (keyParts.length > 0) {
-                  return `member-${keyParts.join('-')}`;
-                }
-                // Ultimate fallback with index to ensure uniqueness
-                return `member-unknown-${index}`;
-              }}
-
-            />
-
-            <Button
-              title="Continue"
-              onPress={() => {
-                navigation.navigate('ClubDetails', {
-                  ...selectedClub,
-                  selectedMember: selectedMember
-                });
-                hideBottomSheet();
-              }}
-              variant="primary"
-              size="medium"
-              style={styles.nextButton}
-              disabled={!selectedMember}
-            />
-          </Animated.View>
-        </View>
-      </Modal>
     </View>
   );
 };

package/template/src/screens/auth/LoginScreen.tsx

@@ -7,21 +7,21 @@ import {
   StatusBar,
   Platform,
 } from 'react-native';
-import { Button, TextInput } from '../../components/common';
-import { theme } from '../../constants';
-import { Strings } from '../../constants/strings';
-import { validateEmail, validatePassword } from '../../utils';
-import SVG from '../../assets/icons';
-import Images from '../../assets/images';
+import { Button, TextInput } from '@components/common';
+import { theme } from '@constants';
+import { Strings } from '@constants/strings';
+import { validateEmail, validatePassword } from '@utils';
+import SVG from '@assets/icons';
+import Images from '@assets/images';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { moderateScale, verticalScale } from '../../utils/scaling';
-import { Fonts } from '../../constants/Fonts';
+import { moderateScale, verticalScale } from '@utils/scaling';
+import { Fonts } from '@constants/Fonts';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { hideLoader, showLoader } from '../../components/common/AppLoader';
-import ToastManager from '../../components/common/ToastManager';
-import { useLogin, getApiErrorInfo } from '../../services/authService';
-import { useAuthStore } from '../../stores/authStore';
-import NotificationManager from '../../utils/NotificationManager';
+import { hideLoader, showLoader } from '@components/common/AppLoader';
+import ToastManager from '@components/common/ToastManager';
+import { useLogin, getApiErrorInfo } from '@services/authService';
+import { useAuthStore } from '@stores/authStore';
+import NotificationManager from '@utils/NotificationManager';
 
 interface LoginScreenProps {
   navigation: any;

package/template/src/screens/auth/index.ts

@@ -1,8 +1,3 @@
-export * from './LoginScreen';
-export * from './RegisterScreen';
-export * from './ForgotPasswordScreen';
-export * from './OTPVerifyScreen';
-export * from './AddMamber';
 export * from './WalcomeScreen';
-export * from './SuccessScreen';
+export * from './LoginScreen';
 

package/template/src/screens/index.ts

@@ -1,40 +1,5 @@
 export * from './HomeScreen';
-export * from './ProfileScreen';
-export * from './SettingsScreen';
-export * from './DetailsScreen';
-export * from './SportHubScreen';
-export * from './auth';
-//Club Screens
-export * from './clubs/JoinClub';
-export * from './clubs/ClubDeteils';
-export * from './clubs/Announcements';
-export * from './raffles/RafflesScreen';
 
-//Team Screens
-export * from './teams/MyTeamScreen';
-export * from './teams/MyTeamDetailsScreen';
-export * from './teams/JoinTeamScreen';
-export * from './teams/PendingRequestsScreen';
-
-//Chat Screens
-export * from './chat/ChatThreadsScreen';
-export * from './chat/ChatScreen';
-export * from './chat/ReportMessageScreen';
-export * from './volunteerOpportunities/VolunteerOpportunitiesScreen';
-export * from './volunteerOpportunities/VolunteerOpportunitiesDetailsScreen';
-
-
-//Raffles Screens
-export * from './raffles/MyReferralMembersScreen';
-export * from './raffles/RaffleDetailsScreen';
-export * from './clubs/BuyRaffleTicketsScreen';
-
-// Reminder Screen
-export * from './volunteerOpportunities/SetReminderScreen';
-export * from './raffles/SetRaffleReminderScreen';
-
-// Event Screen
-export * from './events/EventScreen';
 
 
 

package/template/src/services/api.ts

@@ -1,13 +1,13 @@
 import axios from 'axios';
 import { MMKV } from 'react-native-mmkv';
-import { StorageService } from '../utils/storage';
+import { StorageService } from '@utils/storage';
 import { Platform } from 'react-native';
-import ToastManager from '../components/common/ToastManager';
-import { useAuthStore } from '../stores/authStore';
+import ToastManager from '@components/common/ToastManager';
+import { useAuthStore } from '@stores/authStore';
 
 // API Configuration
-export const API_BASE_URL = `${process.env.EXPO_PUBLIC_API_BASE_URL}/api/v1/`; // prod api url
-export const CHAT_HUB_URL = `${process.env.EXPO_PUBLIC_API_BASE_URL}/chathub`; // dev chat hub url
+export const API_BASE_URL = "https://clubyakkadev.24livehost.com/api/v1/"; // prod api url
+export const CHAT_HUB_URL = "https://clubyakkadev.24livehost.com/chathub"; // dev chat hub url
 
 // Create axios instance with default config
 const offsetTime = new Date().getTimezoneOffset() * 60 * -1;