I'll create a comprehensive React Native Astrology Chat App with all the features you've requested. Let's start with the project structure and implementation. { "name": "astrology-chat-app", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint ." }, "dependencies": { "@react-native-async-storage/async-storage": "^1.19.3", "@react-native-community/datetimepicker": "^7.6.1", "@react-native-firebase/app": "^18.6.0", "@react-native-firebase/auth": "^18.6.0", "@react-native-firebase/firestore": "^18.6.0", "@react-native-firebase/storage": "^18.6.0", "@react-native-picker/picker": "^2.5.1", "@react-navigation/bottom-tabs": "^6.5.11", "@react-navigation/drawer": "^6.6.6", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "moment": "^2.29.4", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.13.4", "react-native-image-picker": "^7.0.2", "react-native-in-app-review": "^4.3.3", "react-native-maps": "^1.8.0", "react-native-modal": "^13.0.1", "react-native-razorpay": "^2.3.0", "react-native-reanimated": "^3.5.4", "react-native-safe-area-context": "^4.7.4", "react-native-screens": "^3.27.0", "react-native-share": "^9.4.1", "react-native-vector-icons": "^10.0.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } } import React, { useEffect, useState } from 'react'; import { StatusBar, LogBox } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import auth from '@react-native-firebase/auth'; import firestore from '@react-native-firebase/firestore'; // Auth Screens import LoginScreen from './src/screens/auth/LoginScreen'; import OtpVerificationScreen from './src/screens/auth/OtpVerificationScreen'; import ProfileCreationScreen from './src/screens/auth/ProfileCreationScreen'; // Main App Navigation import MainAppNavigator from './src/navigation/MainAppNavigator'; // Context import { AuthProvider } from './src/context/AuthContext'; import { LoadingProvider } from './src/context/LoadingContext'; import LoadingScreen from './src/components/common/LoadingScreen'; // Ignore specific warnings LogBox.ignoreLogs([ 'Animated: `useNativeDriver`', 'AsyncStorage has been extracted', 'VirtualizedLists should never be nested', ]); const Stack = createStackNavigator(); const App = () => { const [initializing, setInitializing] = useState(true); const [user, setUser] = useState(null); const [userProfile, setUserProfile] = useState(null); // Handle user state changes async function onAuthStateChanged(user) { setUser(user); if (user) { // Check if user profile exists try { const userDoc = await firestore() .collection('users') .doc(user.uid) .get(); if (userDoc.exists) { setUserProfile(userDoc.data()); } else { setUserProfile(null); } } catch (error) { console.error('Error fetching user profile:', error); } } else { setUserProfile(null); } if (initializing) setInitializing(false); } useEffect(() => { const subscriber = auth().onAuthStateChanged(onAuthStateChanged); return subscriber; // unsubscribe on unmount }, []); if (initializing) { return ; } return ( {!user ? ( // Auth screens <> ) : !userProfile ? ( // Profile creation if user exists but profile doesn't ) : ( // Main app )} ); }; export default App; import React, { createContext, useState, useEffect } from 'react'; import auth from '@react-native-firebase/auth'; import firestore from '@react-native-firebase/firestore'; import AsyncStorage from '@react-native-async-storage/async-storage'; export const AuthContext = createContext(); export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [userProfile, setUserProfile] = useState(null); const [loading, setLoading] = useState(true); const [isAdmin, setIsAdmin] = useState(false); useEffect(() => { // Check if user is logged in const subscriber = auth().onAuthStateChanged(async (userAuth) => { if (userAuth) { setUser(userAuth); // Fetch user profile try { const userDoc = await firestore() .collection('users') .doc(userAuth.uid) .get(); if (userDoc.exists) { const userData = userDoc.data(); setUserProfile(userData); setIsAdmin(userData.role === 'admin'); } } catch (error) { console.error('Error fetching user profile:', error); } } else { setUser(null); setUserProfile(null); setIsAdmin(false); } setLoading(false); }); return () => subscriber(); }, []); const login = async (phoneNumber) => { try { const confirmation = await auth().signInWithPhoneNumber(phoneNumber); return confirmation; } catch (error) { throw error; } }; const confirmOtp = async (confirmation, otp) => { try { await confirmation.confirm(otp); return true; } catch (error) { throw error; } }; const logout = async () => { try { await AsyncStorage.clear(); await auth().signOut(); } catch (error) { console.error('Error during logout:', error); } }; const createUserProfile = async (userData) => { try { if (!user) throw new Error('User not authenticated'); await firestore() .collection('users') .doc(user.uid) .set({ ...userData, userId: user.uid, phoneNumber: user.phoneNumber, createdAt: firestore.FieldValue.serverTimestamp(), updatedAt: firestore.FieldValue.serverTimestamp(), role: 'user', walletBalance: 0, }); // Fetch the updated profile const userDoc = await firestore() .collection('users') .doc(user.uid) .get(); if (userDoc.exists) { setUserProfile(userDoc.data()); } return true; } catch (error) { console.error('Error creating user profile:', error); throw error; } }; const updateUserProfile = async (userData) => { try { if (!user) throw new Error('User not authenticated'); await firestore() .collection('users') .doc(user.uid) .update({ ...userData, updatedAt: firestore.FieldValue.serverTimestamp(), }); // Update local state setUserProfile(prev => ({ ...prev, ...userData })); return true; } catch (error) { console.error('Error updating user profile:', error); throw error; } }; const addToWallet = async (amount) => { try { if (!user) throw new Error('User not authenticated'); const userRef = firestore().collection('users').doc(user.uid); await firestore().runTransaction(async (transaction) => { const userDoc = await transaction.get(userRef); if (!userDoc.exists) { throw new Error('User does not exist!'); } const currentBalance = userDoc.data().walletBalance || 0; const newBalance = currentBalance + amount; transaction.update(userRef, { walletBalance: newBalance, updatedAt: firestore.FieldValue.serverTimestamp() }); // Add transaction record const transactionRef = firestore().collection('transactions').doc(); transaction.set(transactionRef, { userId: user.uid, amount: amount, type: 'credit', description: 'Wallet recharge', timestamp: firestore.FieldValue.serverTimestamp(), balance: newBalance }); }); // Update local state setUserProfile(prev => ({ ...prev, walletBalance: (prev.walletBalance || 0) + amount })); return true; } catch (error) { console.error('Error adding to wallet:', error); throw error; } }; const deductFromWallet = async (amount, description = 'Service charge') => { try { if (!user) throw new Error('User not authenticated'); const userRef = firestore().collection('users').doc(user.uid); let success = false; await firestore().runTransaction(async (transaction) => { const userDoc = await transaction.get(userRef); if (!userDoc.exists) { throw new Error('User does not exist!'); } const currentBalance = userDoc.data().walletBalance || 0; if (currentBalance < amount) { success = false; return; } const newBalance = currentBalance - amount; transaction.update(userRef, { walletBalance: newBalance, updatedAt: firestore.FieldValue.serverTimestamp() }); // Add transaction record const transactionRef = firestore().collection('transactions').doc(); transaction.set(transactionRef, { userId: user.uid, amount: amount, type: 'debit', description: description, timestamp: firestore.FieldValue.serverTimestamp(), balance: newBalance }); success = true; }); if (success) { // Update local state setUserProfile(prev => ({ ...prev, walletBalance: (prev.walletBalance || 0) - amount })); } return success; } catch (error) { console.error('Error deducting from wallet:', error); throw error; } }; return ( {children} ); }; import React, { createContext, useState } from 'react'; import LoadingOverlay from '../components/common/LoadingOverlay'; export const LoadingContext = createContext(); export const LoadingProvider = ({ children }) => { const [loading, setLoading] = useState(false); const [loadingMessage, setLoadingMessage] = useState('Loading...'); const showLoading = (message = 'Loading...') => { setLoadingMessage(message); setLoading(true); }; const hideLoading = () => { setLoading(false); }; return ( {children} {loading && } ); }; import React from 'react'; import { View, ActivityIndicator, StyleSheet, Text } from 'react-native'; const LoadingScreen = ({ message = 'Loading...' }) => { return ( {message} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff', }, text: { marginTop: 10, fontSize: 16, color: '#333', }, }); export default LoadingScreen; import React from 'react'; import { View, ActivityIndicator, StyleSheet, Text, Modal } from 'react-native'; const LoadingOverlay = ({ visible, message = 'Loading...' }) => { return ( {}} > {message} ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, loadingBox: { width: 200, height: 100, backgroundColor: 'white', borderRadius: 10, justifyContent: 'center', alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }, text: { marginTop: 10, fontSize: 14, color: '#333', }, }); export default LoadingOverlay; import React, { useContext } from 'react'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStackNavigator } from '@react-navigation/stack'; // Bottom Tab Navigator import BottomTabNavigator from './BottomTabNavigator'; // Drawer Screens import WalletScreen from '../screens/drawer/WalletScreen'; import TransactionHistoryScreen from '../screens/drawer/TransactionHistoryScreen'; import HelpSupportScreen from '../screens/drawer/HelpSupportScreen'; import PrivacyPolicyScreen from '../screens/drawer/PrivacyPolicyScreen'; import FAQScreen from '../screens/drawer/FAQScreen'; // Other Screens import AstrologerDetailScreen from '../screens/astrologer/AstrologerDetailScreen'; import ChatScreen from '../screens/chat/ChatScreen'; import ProductDetailScreen from '../screens/products/ProductDetailScreen'; import CheckoutScreen from '../screens/products/CheckoutScreen'; import OrderConfirmationScreen from '../screens/products/OrderConfirmationScreen'; import OrderDetailsScreen from '../screens/products/OrderDetailsScreen'; import NotificationsScreen from '../screens/notifications/NotificationsScreen'; import WalletRechargeScreen from '../screens/wallet/WalletRechargeScreen'; // Admin Screens import AdminDashboardScreen from '../screens/admin/AdminDashboardScreen'; import ManageAstrologersScreen from '../screens/admin/ManageAstrologersScreen'; import ManageUsersScreen from '../screens/admin/ManageUsersScreen'; import ManageProductsScreen from '../screens/admin/ManageProductsScreen'; import AddEditAstrologerScreen from '../screens/admin/AddEditAstrologerScreen'; import AddEditProductScreen from '../screens/admin/AddEditProductScreen'; import OrderManagementScreen from '../screens/admin/OrderManagementScreen'; // Custom Drawer Content import CustomDrawerContent from '../components/drawer/CustomDrawerContent'; // Context import { AuthContext } from '../context/AuthContext'; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); const MainStack = () => { const { isAdmin } = useContext(AuthContext); return ( {isAdmin ? ( // Admin Routes <> ) : ( // User Routes <> )} ); }; const MainAppNavigator = () => { return ( } screenOptions={{ headerShown: false, drawerStyle: { width: '75%', }, }} > ); }; export default MainAppNavigator; import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { StyleSheet } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; // Screens import HomeScreen from '../screens/home/HomeScreen'; import ChatsScreen from '../screens/chat/ChatsScreen'; import ProfileScreen from '../screens/profile/ProfileScreen'; import ProductsScreen from '../screens/products/ProductsScreen'; // Header Component import AppHeader from '../components/common/AppHeader'; const Tab = createBottomTabNavigator(); const BottomTabNavigator = () => { return ( ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === 'Home') { iconName = focused ? 'home' : 'home-outline'; } else if (route.name === 'Chats') { iconName = focused ? 'chat' : 'chat-outline'; } else if (route.name === 'Profile') { iconName = focused ? 'account' : 'account-outline'; } else if (route.name === 'Products') { iconName = focused ? 'shopping' : 'shopping-outline'; } return ; }, tabBarActiveTintColor: '#6a11cb', tabBarInactiveTintColor: 'gray', tabBarStyle: styles.tabBar, tabBarLabelStyle: styles.tabBarLabel, header: (props) => , })} > ); }; const styles = StyleSheet.create({ tabBar: { height: 60, paddingBottom: 5, paddingTop: 5, backgroundColor: '#fff', borderTopWidth: 1, borderTopColor: '#f0f0f0', elevation: 8, shadowColor: '#000', shadowOffset: { width: 0, height: -2 }, shadowOpacity: 0.1, shadowRadius: 4, }, tabBarLabel: { fontSize: 12, fontWeight: '500', }, }); export default BottomTabNavigator; import React, { useContext } from 'react'; import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { useNavigation, DrawerActions } from '@react-navigation/native'; import { AuthContext } from '../../context/AuthContext'; const AppHeader = ({ options, route }) => { const navigation = useNavigation(); const { userProfile } = useContext(AuthContext); const getTitle = () => { if (options.title) return options.title; return route.name; }; return ( navigation.dispatch(DrawerActions.openDrawer())} > {getTitle()} navigation.navigate('Notifications')} > navigation.navigate('WalletRecharge')} > ₹{userProfile?.walletBalance?.toFixed(2) || '0.00'} ); }; const styles = StyleSheet.create({ header: { height: 60, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, backgroundColor: '#6a11cb', elevation: 4, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 2, }, menuButton: { padding: 5, }, title: { fontSize: 18, fontWeight: 'bold', color: '#fff', }, rightContainer: { flexDirection: 'row', alignItems: 'center', }, iconButton: { padding: 5, marginRight: 10, }, walletButton: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.2)', paddingHorizontal: 10, paddingVertical: 5, borderRadius: 15, }, walletAmount: { color: '#fff', marginLeft: 5, fontWeight: 'bold', }, }); export default AppHeader; import React, { useContext } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Image, Alert, Linking, } from 'react-native'; import { DrawerContentScrollView, DrawerItemList, } from '@react-navigation/drawer'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { AuthContext } from '../../context/AuthContext'; import { LoadingContext } from '../../context/LoadingContext'; import Share from 'react-native-share'; import { InAppReview } from 'react-native-in-app-review'; const CustomDrawerContent = (props) => { const { userProfile, logout } = useContext(AuthContext); const { showLoading, hideLoading } = useContext(LoadingContext); const handleLogout = () => { Alert.alert( 'Logout', 'Are you sure you want to logout?', [ { text: 'Cancel', style: 'cancel', }, { text: 'Logout', onPress: async () => { showLoading('Logging out...'); await logout(); hideLoading(); }, }, ], { cancelable: true } ); }; const handleRateApp = async () => { try { if (InAppReview.isAvailable()) { // Request in-app review await InAppReview.RequestInAppReview(); } else { // Fallback to Play Store Linking.openURL('market://details?id=com.astrologychatapp'); } } catch (error) { console.error('Error opening review:', error); // Fallback to Play Store URL Linking.openURL('https://play.google.com/store/apps/details?id=com.astrologychatapp'); } }; const handleShareApp = async () => { try { await Share.open({ message: 'Check out this amazing Astrology Chat App!', url: 'https://play.google.com/store/apps/details?id=com.astrologychatapp', title: 'Astrology Chat App', }); } catch (error) { console.log('Error sharing app:', error); } }; return ( {userProfile?.photoURL ? ( ) : ( {userProfile?.name ? userProfile.name.charAt(0).toUpperCase() : '?'} )} {userProfile?.name || 'User'} {userProfile?.phoneNumber || ''} Rate our App Share App props.navigation.navigate('FAQ')} > FAQ Logout ); }; const styles = StyleSheet.create({ container: { flex: 1, }, profileSection: { padding: 20, backgroundColor: '#6a11cb', alignItems: 'center', }, profileImageContainer: { width: 80, height: 80, borderRadius: 40, overflow: 'hidden', marginBottom: 10, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center', }, profileImage: { width: '100%', height: '100%', }, profileImagePlaceholder: { width: '100%', height: '100%', backgroundColor: '#e0e0e0', justifyContent: 'center', alignItems: 'center', }, profileImagePlaceholderText: { fontSize: 32, fontWeight: 'bold', color: '#6a11cb', }, profileName: { fontSize: 18, fontWeight: 'bold', color: '#fff', marginBottom: 5, }, profilePhone: { fontSize: 14, color: 'rgba(255, 255, 255, 0.8)', }, drawerItems: { marginTop: 10, }, divider: { height: 1, backgroundColor: '#e0e0e0', marginVertical: 10, marginHorizontal: 20, }, menuItems: { marginTop: 10, }, menuItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 20, }, menuItemText: { marginLeft: 32, fontSize: 15, color: '#333', }, logoutButton: { flexDirection: 'row', alignItems: 'center', paddingVertical: 15, paddingHorizontal: 20, borderTopWidth: 1, borderTopColor: '#e0e0e0', }, logoutText: { marginLeft: 32, fontSize: 15, color: '#ff4757', fontWeight: '500', }, }); export default CustomDrawerContent; import React, { useState, useContext } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image, KeyboardAvoidingView, Platform, ScrollView, Alert, } from 'react-native'; import { AuthContext } from '../../context/AuthContext'; import { LoadingContext } from '../../context/LoadingContext'; const LoginScreen = ({ navigation }) => { const [phoneNumber, setPhoneNumber] = useState(''); const [confirmation, setConfirmation] = useState(null); const { login } = useContext(AuthContext); const { showLoading, hideLoading } = useContext(LoadingContext); const handleSendOTP = async () => { if (!phoneNumber || phoneNumber.length < 10) { Alert.alert('Invalid Phone Number', 'Please enter a valid phone number'); return; } try { showLoading('Sending OTP...'); // Format phone number with country code if not already included const formattedPhoneNumber = phoneNumber.startsWith('+') ? phoneNumber : `+91${phoneNumber}`; // Assuming India (+91) as default const result = await login(formattedPhoneNumber); setConfirmation(result); hideLoading(); navigation.navigate('OtpVerification', { confirmation: result, phoneNumber: formattedPhoneNumber, }); } catch (error) { hideLoading(); console.error('Error sending OTP:', error); Alert.alert( 'Error', error.message || 'Failed to send OTP. Please try again.' ); } }; return ( Astrology Chat Connect with the stars Login Enter your phone number to continue +91 Send OTP By continuing, you agree to our Terms of Service & Privacy Policy ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, scrollContainer: { flexGrow: 1, justifyContent: 'space-between', padding: 20, }, logoContainer: { alignItems: 'center', marginTop: 40, marginBottom: 30, }, logo: { width: 120, height: 120, }, appName: { fontSize: 28, fontWeight: 'bold', color: '#6a11cb', marginTop: 10, }, tagline: { fontSize: 16, color: '#666', marginTop: 5, }, formContainer: { width: '100%', marginBottom: 30, }, title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 10, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 25, }, inputContainer: { flexDirection: 'row', marginBottom: 20, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, overflow: 'hidden', }, countryCode: { backgroundColor: '#f5f5f5', paddingHorizontal: 15, justifyContent: 'center', borderRightWidth: 1, borderRightColor: '#ddd', }, countryCodeText: { fontSize: 16, color: '#333', }, input: { flex: 1, paddingHorizontal: 15, paddingVertical: 12, fontSize: 16, }, button: { backgroundColor: '#6a11cb', paddingVertical: 15, borderRadius: 8, alignItems: 'center', shadowColor: '#6a11cb', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 5, }, buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, footer: { alignItems: 'center', marginBottom: 20, }, footerText: { fontSize: 14, color: '#666', }, footerLinks: { flexDirection: 'row', marginTop: 5, }, footerLink: { fontSize: 14, color: '#6a11cb', fontWeight: '500', }, }); export default LoginScreen; import React, { useState, useEffect, useRef, useContext } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, KeyboardAvoidingView, Platform, Alert, } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { AuthContext } from '../../context/AuthContext'; import { LoadingContext } from '../../context/LoadingContext'; import firestore from '@react-native-firebase/firestore'; const OtpVerificationScreen = ({ route, navigation }) => { const { confirmation, phoneNumber } = route.params; const [otp, setOtp] = useState(['', '', '', '', '', '']); const [timer, setTimer] = useState(30); const [canResend, setCanResend] = useState(false); const inputRefs = useRef([]); const { confirmOtp, login } = useContext(AuthContext); const { showLoading, hideLoading } = useContext(LoadingContext); useEffect(() => { let interval = null; if (timer > 0) { interval = setInterval(() => { setTimer((prevTimer) => prevTimer - 1); }, 1000); } else { setCanResend(true); clearInterval(interval); } return () => clearInterval(interval); }, [timer]); const handleOtpChange = (text, index) => { const newOtp = [...otp]; newOtp[index] = text; setOtp(newOtp); // Auto focus to next input if (text && index < 5) { inputRefs.current[index + 1].focus(); } }; const handleKeyPress = (e, index) => { // Handle backspace if (e.nativeEvent.key === 'Backspace' && !otp[index] && index > 0) { inputRefs.current[index - 1].focus(); } }; const handleVerifyOtp = async () => { const otpValue = otp.join(''); if (otpValue.length !== 6) { Alert.alert('Invalid OTP', 'Please enter a valid 6-digit OTP'); return; } try { showLoading('Verifying OTP...'); await confirmOtp(confirmation, otpValue); hideLoading(); // Check if user profile exists const user = auth().currentUser; const userDoc = await firestore() .collection('users') .doc(user.uid) .get(); if (userDoc.exists) { // User profile exists, navigate to home navigation.reset({ index: 0, routes: [{ name: 'MainApp' }], }); } else { // User profile doesn't exist, navigate to profile creation navigation.navigate('ProfileCreation'); } } catch (error) { hideLoading(); console.error('Error verifying OTP:', error); Alert.alert( 'Verification Failed', error.message || 'Invalid OTP. Please try again.' ); } }; const handleResendOtp = async () => { try { showLoading('Resending OTP...'); const result = await login(phoneNumber); hideLoading(); // Reset timer and OTP fields setTimer(30); setCanResend(false); setOtp(['', '', '', '', '', '']); // Update confirmation route.params.confirmation = result; Alert.alert('Success', 'OTP has been resent to your phone number'); } catch (error) { hideLoading(); console.error('Error resending OTP:', error); Alert.alert( 'Error', error.message || 'Failed to resend OTP. Please try again.' ); } }; return ( navigation.goBack()} > OTP Verification Enter the 6-digit code sent to {phoneNumber} {otp.map((digit, index) => ( (inputRefs.current[index] = ref)} style={styles.otpInput} value={digit} onChangeText={(text) => handleOtpChange(text, index)} onKeyPress={(e) => handleKeyPress(e, index)} keyboardType="number-pad" maxLength={1} selectTextOnFocus /> ))} Verify OTP Didn't receive the code? {canResend ? ( Resend OTP ) : ( Resend in {timer}s )} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', padding: 20, }, backButton: { padding: 10, marginTop: 10, }, content: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingBottom: 50, }, title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 10, }, subtitle: { fontSize: 16, color: '#666', marginBottom: 30, textAlign: 'center', }, otpContainer: { flexDirection: 'row', justifyContent: 'space-between', width: '100%', marginBottom: 30, }, otpInput: { width: 45, height: 50, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, textAlign: 'center', fontSize: 20, fontWeight: 'bold', }, verifyButton: { backgroundColor: '#6a11cb', paddingVertical: 15, paddingHorizontal: 30, borderRadius: 8, width: '100%', alignItems: 'center', shadowColor: '#6a11cb', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 5, }, verifyButtonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, resendContainer: { flexDirection: 'row', marginTop: 20, alignItems: 'center', }, resendText: { fontSize: 14, color: '#666', }, resendButton: { fontSize: 14, color: '#6a11cb', fontWeight: '500', }, timerText: { fontSize: 14, color: '#999', }, }); export default OtpVerificationScreen; import React, { useState, useContext } from 'react'; import { View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView, Image, Alert, Platform, } from 'react-native'; import DateTimePicker from '@react-native-community/datetimepicker'; import { Picker } from '@react-native-picker/picker'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import { launchImageLibrary } from 'react-native-image-picker'; import storage from '@react-native-firebase/storage'; import { AuthContext } from '../../context/AuthContext'; import { LoadingContext } from '../../context/LoadingContext'; import moment from 'moment'; const ProfileCreationScreen = ({ navigation }) => { const { createUserProfile, user } = useContext(AuthContext); const { showLoading, hideLoading } = useContext(LoadingContext); const [name, setName] = useState(''); const [gender, setGender] = useState(''); const [dateOfBirth, setDateOfBirth] = useState(new Date()); const [timeOfBirth, setTimeOfBirth] = useState(new Date()); const [placeOfBirth, setPlaceOfBirth] = useState(''); const [profileImage, setProfileImage] = useState(null); const [showDatePicker, setShowDatePicker] = useState(false); const [showTimePicker, setShowTimePicker] = useState(false); const handleSelectImage = () => { const options = { mediaType: 'photo', quality: 0.7, includeBase64: false, }; launchImageLibrary(options, (response) => { if (response.didCancel) { return; } else if (response.errorCode) { Alert.alert('Error', response.errorMessage); return; } if (response.assets && response.assets.length > 0) { setProfileImage(response.assets[0]); } }); }; const uploadImage = async () => { if (!profileImage) return null; try { const reference = storage().ref(`profile_images/${user.uid}`); const pathToFile = profileImage.uri; // Upload file await reference.putFile(pathToFile); // Get download URL const url = await reference.getDownloadURL(); return url; } catch (error) { console.error('Error uploading image:', error); return null; } }; const handleSubmit = async () => { if (!name.trim()) { Alert.alert('Error', 'Please enter your name'); return; } if (!gender) { Alert.alert('Error', 'Please select your gender'); return; } if (!placeOfBirth.trim()) { Alert.alert('Error', 'Please enter your place of birth'); return; } try { showLoading('Creating your profile...'); // Upload profile image if selected let photoURL = null; if (profileImage) { photoURL = await uploadImage(); } // Create user profile const userData = { name, gender, dateOfBirth: firestore.Timestamp.fromDate(dateOfBirth), timeOfBirth: moment(timeOfBirth).format('HH:mm'), placeOfBirth, photoURL, }; await createUserProfile(userData); hideLoading(); // Navigate to main app navigation.reset({ index: 0, routes: [{ name: 'MainApp' }], }); } catch (error) { hideLoading(); console.error('Error creating profile:', error); Alert.alert( 'Error', error.message || 'Failed to create profile. Please try again.' ); } }; const onDateChange = (event, selectedDate) => { const currentDate = selectedDate || dateOfBirth; setShowDatePicker(Platform.OS === 'ios'); setDateOfBirth(currentDate); }; const onTimeChange = (event, selectedTime) => { const currentTime = selectedTime || timeOfBirth; setShowTimePicker(Platform.OS === 'ios'); setTimeOfBirth(currentTime); }; return ( Create Your Profile Tell us about yourself {profileImage ? ( ) : ( Add Photo )} Full Name Gender setGender(itemValue)} style={styles.picker} > Date of Birth setShowDatePicker(true)} > {moment(dateOfBirth).format('DD MMM YYYY')} {showDatePicker && ( )} Time of Birth setShowTimePicker(true)} > {moment(timeOfBirth).format('hh:mm A')} {showTimePicker && ( )} Place of Birth Create Profile ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, contentContainer: { padding: 20, paddingBottom: 40, }, title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginTop: 20, textAlign: 'center', }, subtitle: { fontSize: 16, color: '#666', marginBottom: 30, textAlign: 'center', }, imageContainer: { alignSelf: 'center', marginBottom: 30, }, profileImage: { width: 120, height: 120, borderRadius: 60, }, imagePlaceholder: { width: 120, height: 120, borderRadius: 60, backgroundColor: '#f0f0f0', justifyContent: 'center', alignItems: 'center', borderWidth: 1, borderColor: '#ddd', borderStyle: 'dashed', }, imagePlaceholderText: { marginTop: 5, color: '#6a11cb', fontSize: 14, }, formContainer: { width: '100%', }, inputGroup: { marginBottom: 20, }, label: { fontSize: 16, color: '#333', marginBottom: 8, fontWeight: '500', }, input: { borderWidth: 1, borderColor: '#ddd', borderRadius: 8, paddingHorizontal: 15, paddingVertical: 12, fontSize: 16, }, pickerContainer: { borderWidth: 1, borderColor: '#ddd', borderRadius: 8, overflow: 'hidden', }, picker: { height: 50, }, dateTimeButton: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderWidth: 1, borderColor: '#ddd', borderRadius: 8, paddingHorizontal: 15, paddingVertical: 12, }, dateTimeText: { fontSize: 16, color: '#333', }, submitButton: { backgroundColor: '#6a11cb', paddingVertical: 15, borderRadius: 8, alignItems: 'center', marginTop: 10, shadowColor: '#6a11cb', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.3, shadowRadius: 4, elevation: 5, }, submitButtonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, }); export default ProfileCreationScreen; import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, FlatList, RefreshControl, } from 'react-native'; import firestore from '@react-native-firebase/firestore'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import BannerCarousel from '../../components/home/BannerCarousel'; import AstrologerCard from '../../components/astrologer/AstrologerCard'; import HoroscopeCard from '../../components/home/HoroscopeCard'; import { zodiacSigns } from '../../utils/constants'; const HomeScreen = ({ navigation }) => { const [banners, setBanners] = useState([]); const [astrologers, setAstrologers] = useState([]); const [dailyHoroscope, setDailyHoroscope] = useState(null); const [selectedSign, setSelectedSign] = useState('aries'); const [refreshing, setRefreshing] = useState(false); useEffect(() => { fetchBanners(); fetchAstrologers(); fetchDailyHoroscope(); }, []); const fetchBanners = async () => { try { const bannersSnapshot = await firestore() .collection('banners') .where('isActive', '==', true) .orderBy('order', 'asc') .get(); const bannersData = bannersSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); setBanners(bannersData); } catch (error) { console.error('Error fetching banners:', error); } }; const fetchAstrologers = async () => { try { const astrologersSnapshot = await firestore() .collection('astrologers') .where('isActive', '==', true) .orderBy('experience', 'desc') .limit(10) .get(); const astrologersData = astrologersSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); setAstrologers(astrologersData); } catch (error) { console.error('Error fetching astrologers:', error); } }; const fetchDailyHoroscope = async () => { try { // Get today's date in YYYY-MM-DD format const today = new Date().toISOString().split('T')[0]; const horoscopeSnapshot = await firestore() .collection('horoscopes') .where('date', '==', today) .get(); if (!horoscopeSnapshot.empty) { const horoscopeData = horoscopeSnapshot.docs[0].data(); setDailyHoroscope(horoscopeData); } else { // If no horoscope for today, use placeholder data setDailyHoroscope({ date: today, signs: zodiacSigns.reduce((acc, sign) => { acc[sign.value] = { prediction: "Today's prediction is not available yet. Check back later!", lucky_number: "7", lucky_color: "Blue", mood: "Calm" }; return acc; }, {}) }); } } catch (error) { console.error('Error fetching daily horoscope:', error); } }; const onRefresh = async () => { setRefreshing(true); await Promise.all([ fetchBanners(), fetchAstrologers(), fetchDailyHoroscope() ]); setRefreshing(false); }; const handleAstrologerPress = (astrologer) => { navigation.navigate('AstrologerDetail', { astrologer }); }; return ( } > {/* Banner Carousel */} {/* Astrologers Section */} Top Astrologers See All item.id} renderItem={({ item }) => ( handleAstrologerPress(item)} /> )} showsHorizontalScrollIndicator={false} contentContainerStyle={styles.astrologersList} /> {/* Daily Horoscope Section */} Today's Horoscope {zodiacSigns.map((sign) => ( setSelectedSign(sign.value)} > {sign.label} ))} {dailyHoroscope && dailyHoroscope.signs && dailyHoroscope.signs[selectedSign] && ( )} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f8f8f8', }, section: { marginBottom: 20, paddingHorizontal: 15, }, sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginVertical: 15, }, sectionTitle: { fontSize: 18, fontWeight: 'bold', color: '#333', }, seeAllText: { fontSize: 14, color: '#6a11cb', fontWeight: '500', }, astrologersList: { paddingRight: 15, }, zodiacSignsContainer: { marginBottom: 15, }, zodiacSignItem: { alignItems: 'center', marginRight: 15, padding: 10, borderRadius: 10, backgroundColor: '#fff', width: 80, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2, }, selectedZodiacSign: { backgroundColor: '#f0e6ff', borderColor: '#6a11cb', borderWidth: 1, }, zodiacIcon: { width: 40, height: 40, marginBottom: 5, }, zodiacName: { fontSize: 12, color: '#333', textAlign: 'center', }, }); export default HomeScreen; import React, { useState, useRef, useEffect } from 'react'; import { View, Image, StyleSheet, Dimensions, FlatList, TouchableOpacity, } from 'react-native'; const { width } = Dimensions.get('window'); const BANNER_HEIGHT = 180; const BannerCarousel = ({ banners = [] }) => { const [activeIndex, setActiveIndex] = useState(0); const flatListRef = useRef(null); const autoScrollTimer = useRef(null); useEffect(() => { startAutoScroll(); return () => { if (autoScrollTimer.current) { clearInterval(autoScrollTimer.current); } }; }, [banners]); const startAutoScroll = () => { if (banners.length <= 1) return; autoScrollTimer.current = setInterval(() => { const nextIndex = (activeIndex + 1) % banners.length; flatListRef.current?.scrollToIndex({ index: nextIndex, animated: true, }); setActiveIndex(nextIndex); }, 3000); }; const handleScroll = (event) => { if (banners.length <= 1) return; const scrollPosition = event.nativeEvent.contentOffset.x; const index = Math.round(scrollPosition / width); if (index !== activeIndex) { setActiveIndex(index); // Reset timer when manually scrolled if (autoScrollTimer.current) { clearInterval(autoScrollTimer.current); startAutoScroll(); } } }; const renderBanner = ({ item }) => { return ( { // Handle banner click if (item.actionType === 'url' && item.actionUrl) { // Open URL } else if (item.actionType === 'screen' && item.screenName) { // Navigate to screen } }} > ); }; const renderDotIndicator = () => { return ( {banners.map((_, index) => ( ))} ); }; if (!banners || banners.length === 0) { return null; } return ( item.id} horizontal pagingEnabled showsHorizontalScrollIndicator={false} onScroll={handleScroll} scrollEventThrottle={16} /> {banners.length > 1 && renderDotIndicator()} ); }; const styles = StyleSheet.create({ container: { height: BANNER_HEIGHT, width: '100%', marginBottom: 10, }, bannerContainer: { width, height: BANNER_HEIGHT, }, bannerImage: { width: '100%', height: '100%', }, paginationContainer: { flexDirection: 'row', position: 'absolute', bottom: 10, alignSelf: 'center', }, paginationDot: { width: 8, height: 8, borderRadius: 4, backgroundColor: 'rgba(255, 255, 255, 0.5)', marginHorizontal: 4, }, paginationDotActive: { backgroundColor: '#fff', width: 12, }, }); export default BannerCarousel; import React from 'react'; import { View, Text, StyleSheet, Image, TouchableOpacity, } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; const AstrologerCard = ({ astrologer, onPress }) => { const renderRatingStars = (rating) => { const stars = []; const fullStars = Math.floor(rating); const halfStar = rating % 1 >= 0.5; for (let i = 0; i < 5; i++) { if (i < fullStars) { stars.push(); } else if (i === fullStars && halfStar) { stars.push(); } else { stars.push(); } } return stars; }; return ( {astrologer.experience}+ Yrs {astrologer.name} {astrologer.skills?.slice(0, 2).join(', ')} {renderRatingStars(astrologer.rating || 0)} {astrologer.rating?.toFixed(1) || '0.0'} ₹{astrologer.pricePerMinute}/min Chat Now ); }; const styles = StyleSheet.create({ container: { width: 160, backgroundColor: '#fff', borderRadius: 10, marginLeft: 15, marginBottom: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3, overflow: 'hidden', }, imageContainer: { position: 'relative', }, image: { width: '100%', height: 150, }, experienceBadge: { position: 'absolute', top: 10, right: 10, backgroundColor: 'rgba(106, 17, 203, 0.8)', paddingHorizontal: 8, paddingVertical: 4, borderRadius: 12, }, experienceText: { color: '#fff', fontSize: 10, fontWeight: 'bold', }, infoContainer: { padding: 10, }, name: { fontSize: 16, fontWeight: 'bold', color: '#333', marginBottom: 4, }, specialityContainer: { marginBottom: 6, }, speciality: { fontSize: 12, color: '#666',