"use client"
import { createStackNavigator } from "@react-navigation/stack"
import { GestureHandlerRootView } from "react-native-gesture-handler"
import { StatusBar } from "react-native"
// Import screens
import OnboardingScreen from "../screens/OnboardingScreen"
import AuthScreen from "../screens/auth-screen"
import LoginScreen from "../screens/CarRenter/LoginScreen"
import UserTypeSelectionScreen from "../screens/UserTypeSelectionScreen"
// Car Owner Screens
import CarOwnerSignupScreen from "../screens/CarOwner/SignupScreen"
import CarOwnerLoginScreen from "../screens/CarOwner/LoginScreen"
// Car Owner Dashboard Screens
import DashboardScreen from "../screens/CarOwner/DashboardScreen"
import MyCarsScreen from "../screens/CarOwner/MyCarsScreen"
import AddCarScreen from "../screens/CarOwner/AddCarScreen"
import SettingsScreen from "../screens/CarOwner/SettingsScreen"
import PaymentMethodsScreen from "../screens/CarOwner/PaymentMethodsScreen"
import SavedDraftsScreen from "../screens/CarOwner/SavedDraftsScreen"
// Car Rental Screens
import CarRentalSignupScreen from "../screens/CarRenter/SignupScreen"
import CarRentalLoginScreen from "../screens/CarRenter/LoginScreen"
import CarBrandSelection from "../screens/CarRenter/CarBrandSelection"
import FilterScreen from "../screens/CarRenter/FilterScreen"
// Main App Screens
import Home from "../screens/CarRenter/Home"
import AllCarsScreen from "../screens/CarRenter/AllCarsScreen"
import CompaniesScreen from "../screens/CarRenter/CompaniesScreen"
import MapView from "../screens/CarRenter/MapView"
// Settings Related Screens
import AccountInformation from "../screens/CarRenter/AccountInformation"
import LinkAccount from "../screens/CarRenter/LinkAccount"
import Language from "../screens/CarRenter/Language"
import AboutRushGo from "../screens/CarRenter/AboutRushGo"
import GetHelp from "../screens/CarRenter/Privacy"
import PrivacyPolicy from "../screens/CarRenter/PrivacyPolicy"
import NotificationsScreen from "../screens/CarRenter/NotificationsScreen"
import PushNotifications from "../screens/CarRenter/PushNotifications"
import ForgotPasswordScreen from "../screens/ForgotPasswordScreen"
// Import bottom tab navigator
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { Ionicons } from "@expo/vector-icons"
const Stack = createStackNavigator()
const Tab = createBottomTabNavigator()
// Car Owner Bottom Tab Navigator - Enhanced with better padding
const CarOwnerTabNavigator = () => {
return (
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName
if (route.name === "Dashboard") {
iconName = focused ? "home" : "home-outline"
} else if (route.name === "MyCars") {
iconName = focused ? "car" : "car-outline"
} else if (route.name === "AddCar") {
iconName = focused ? "add" : "add-outline"
} else if (route.name === "Settings") {
iconName = focused ? "settings" : "settings-outline"
}
return <Ionicons name={iconName} size={24} color={color} />
},
tabBarActiveTintColor: "#007EFD",
tabBarInactiveTintColor: "#9CA3AF",
headerShown: false,
tabBarStyle: {
backgroundColor: "#FFFFFF",
borderTopWidth: 0,
elevation: 8,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: -2,
},
shadowOpacity: 0.1,
shadowRadius: 3.84,
paddingBottom: 20, // Increased bottom padding
paddingTop: 12, // Increased top padding
height: 85, // Increased height
},
tabBarLabelStyle: {
fontSize: 12,
fontWeight: "500",
marginTop: 4,
marginBottom: 8, // Added bottom margin for labels
},
tabBarItemStyle: {
paddingVertical: 8, // Increased vertical padding
},
})}
<Tab.Screen
name="Dashboard"
component={DashboardScreen}
options={{
tabBarLabel: "Home",
}}
/>
<Tab.Screen
name="MyCars"
component={MyCarsScreen}
options={{
tabBarLabel: "My Cars",
}}
/>
<Tab.Screen
name="AddCar"
component={AddCarScreen}
options={{
tabBarLabel: "Add Car",
}}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{
tabBarLabel: "Settings",
}}
/>
</Tab.Navigator>
)
}
// Main App Navigator
const AppNavigator = () => {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" translucent={false} /><Stack.Navigator
initialRouteName="Onboarding"
screenOptions={{
headerShown: false,
gestureEnabled: true,
gestureDirection: "horizontal",
}}
<Stack.Screen
name="Onboarding"
component={OnboardingScreen}
options={{
headerShown: false,
gestureEnabled: false,
}}
/>
<Stack.Screen
name="AuthScreen"
component={AuthScreen}
options={{
headerShown: false,
presentation: "fullScreenModal",
gestureEnabled: true,
}}
/>
<Stack.Screen
name="LoginScreen"
component={LoginScreen}
options={{
headerShown: false,
gestureEnabled: true,
}}
/>
<Stack.Screen name="UserTypeSelection" component={UserTypeSelectionScreen} options={{ headerShown: false }} />
<Stack.Screen name="FilterScreen" component={FilterScreen} options={{ headerShown: false }} />
{/* Car Owner Auth Screens */}
<Stack.Screen name="CarOwnerSignup" component={CarOwnerSignupScreen} options={{ headerShown: false }} />
<Stack.Screen name="CarOwnerLogin" component={CarOwnerLoginScreen} options={{ headerShown: false }} />
{/* Car Owner Dashboard - Direct to Tab Navigator */}
<Stack.Screen name="CarOwnerDashboard" component={CarOwnerTabNavigator} options={{ headerShown: false }} />
{/* Additional Screens */}
<Stack.Screen name="PaymentMethods" component={PaymentMethodsScreen} options={{ headerShown: false }} />
<Stack.Screen name="SavedDrafts" component={SavedDraftsScreen} options={{ headerShown: false }} />
{/* Car Rental Auth Screens */}
<Stack.Screen name="CarRentalSignup" component={CarRentalSignupScreen} options={{ headerShown: false }} />
<Stack.Screen name="CarRentalLogin" component={CarRentalLoginScreen} options={{ headerShown: false }} />
{/* Verification Screen */}
<Stack.Screen name="Notifications" component={NotificationsScreen} options={{ headerShown: false }} />
{/* Car Brand Selection Screen */}
<Stack.Screen name="CarBrandSelection" component={CarBrandSelection} options={{ headerShown: false }} />
{/* Main App Screens */}
<Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
<Stack.Screen name="Bookings" component={AllCarsScreen} options={{ headerShown: false }} />
<Stack.Screen name="CompaniesScreen" component={CompaniesScreen} options={{ headerShown: false }} />
<Stack.Screen name="MapView" component={MapView} options={{ headerShown: false }} />
{/* Settings Related Screens */}
<Stack.Screen name="AccountInformation" component={AccountInformation} options={{ headerShown: false }} />
<Stack.Screen name="LinkAccount" component={LinkAccount} options={{ headerShown: false }} />
<Stack.Screen name="Language" component={Language} options={{ headerShown: false }} />
<Stack.Screen name="NotificationsScreen" component={NotificationsScreen} options={{ headerShown: false }} />
<Stack.Screen name="AboutRushGo" component={AboutRushGo} options={{ headerShown: false }} />
<Stack.Screen name="GetHelp" component={GetHelp} options={{ headerShown: false }} />
<Stack.Screen name="PrivacyPolicy" component={PrivacyPolicy} options={{ headerShown: false }} />
<Stack.Screen name="PushNotifications" component={PushNotifications} options={{ headerShown: false }} />
<Stack.Screen
name="ForgotPasswordScreen"
component={ForgotPasswordScreen}
options={{
headerShown: false,
gestureEnabled: true,
}}
/>
</Stack.Navigator>
</GestureHandlerRootView>)
}
export default AppNavigator
so here in appnavigator without reducing or changing usual codes just mkae don't allow to use swiping in screen in order to make back no don't make like if am in signed then I swipe screen it takes back no only for forgetingpassword screen
Looking at your AppNavigator, I can see you want to disable gesture navigation (swiping to go back) for all screens except the ForgotPasswordScreen. Here's the updated code:
The key changes I made:
screenOptions to have gestureEnabled: false instead of truegestureEnabled: false to all screen options to ensure gestures are disabledgestureEnabled: true only for the ForgotPasswordScreenNow users won't be able to swipe to go back on any screen except the ForgotPasswordScreen. They'll need to use the back buttons or navigation controls within each screen to navigate back. This prevents accidental navigation when users are interacting with forms, signing up, or using the main app features.
"use client"; import { useState, useEffect } from "react"; import { View, Text, ScrollView, TouchableOpacity, TextInput, StyleSheet, SafeAreaView, Image, } from "react-native"; import { Ionicons } from "@expo/vector-icons"; import { useNavigation } from "@react-navigation/native"; import { useTranslation } from "react-i18next"; import "../../i18n"; // Ensure this imports the initialized i18n instance const DashboardScreen = () => { const navigation = useNavigation(); const { t, i18n } = useTranslation(); const [loading, setLoading] = useState(true); const [stats, setStats] = useState([]); const [activities, setActivities] = useState([]); const [newCarName, setNewCarName] = useState(""); const [showLanguageOptions, setShowLanguageOptions] = useState(false); const [currentLanguage, setCurrentLanguage] = useState(i18n.language); useEffect(() => { setTimeout(() => { setStats([ { title: t("totalCars", "Total Cars"), count: 5, icon: "car-outline", color: "#007EFD" }, { title: t("active", "Active"), count: 3, icon: "checkmark-circle-outline", color: "#10B981" }, { title: t("pending", "Pending"), count: 2, icon: "time-outline", color: "#F59E0B" }, ]); setActivities([ { id: 1, message: t("auditApproved", "Your Audi Q7 listing was approved"), time: t("hoursAgo", "2 hours ago"), icon: "checkmark-circle-outline", color: "#10B981", }, { id: 2, message: t("bmwViews", "BMW X5 received 12 new views"), time: t("hoursAgo5", "5 hours ago"), icon: "trending-up-outline", color: "#007EFD", }, { id: 3, message: t("mercedesInquiry", "New inquiry for Mercedes GLE"), time: t("dayAgo", "1 day ago"), icon: "star-outline", color: "#F59E0B", }, ]); setLoading(false); }, 1500); }, [t]); const handleAddCar = () => { if (newCarName.trim()) { navigation.navigate("AddCar"); setNewCarName(""); } }; const changeLanguage = (lng) => { i18n.changeLanguage(lng); setCurrentLanguage(lng); setShowLanguageOptions(false); }; const renderCurrentFlag = () => { if (currentLanguage === "rw") { return ( <Image source={{ uri: "https://media.istockphoto.com/id/1425795893/vector/the-national-flag-of-the-world-rwanda.jpg?s=612x612&w=0&k=20&c=t_Ax2BkNNhWWjcayvZW_JT7Wmlt8rHyRbcbNblhAzhg=", }} style={styles.dropdownFlag} /> ); } else if (currentLanguage === "en") { return ( <Image source={{ uri: "https://png.pngtree.com/png-clipart/20230821/original/pngtree-american-flag-icon-template-picture-image_8142643.png", }} style={styles.dropdownFlag} /> ); } else { return ( <View style={styles.flagContainer}> <View style={[styles.flagStripe, { backgroundColor: "#002395" }]} /> <View style={[styles.flagStripe, { backgroundColor: "#FFFFFF" }]} /> <View style={[styles.flagStripe, { backgroundColor: "#ED2939" }]} /> </View> ); } }; return ( <SafeAreaView style={styles.container}> {/* Header */} <View style={styles.header}> <View style={styles.headerContent}> <Text style={styles.title}>{t("dashboard", "Dashboard")}</Text> <Text style={styles.subtitle}>{t("welcome", "Welcome back")}, John!</Text> </View> {/* Language Selector */} <View style={{ position: "relative" }}> <TouchableOpacity style={styles.languageButton} onPress={() => setShowLanguageOptions(!showLanguageOptions)} > {renderCurrentFlag()} <Ionicons name="chevron-down-outline" size={16} color="#6B7280" style={styles.chevron} /> </TouchableOpacity> {showLanguageOptions && ( <View style={styles.dropdown}> <TouchableOpacity onPress={() => changeLanguage("rw")} style={styles.dropdownItem}> <Image source={{ uri: "https://media.istockphoto.com/id/1425795893/vector/the-national-flag-of-the-world-rwanda.jpg?s=612x612&w=0&k=20&c=t_Ax2BkNNhWWjcayvZW_JT7Wmlt8rHyRbcbNblhAzhg=", }} style={[ styles.dropdownFlag, currentLanguage === "rw" && styles.selectedFlag, ]} /> </TouchableOpacity> <TouchableOpacity onPress={() => changeLanguage("en")} style={styles.dropdownItem}> <Image source={{ uri: "https://png.pngtree.com/png-clipart/20230821/original/pngtree-american-flag-icon-template-picture-image_8142643.png", }} style={[ styles.dropdownFlag, currentLanguage === "en" && styles.selectedFlag, ]} /> </TouchableOpacity> <TouchableOpacity onPress={() => changeLanguage("fr")} style={styles.dropdownItem}> <Image source={{ uri: "https://cdn-icons-png.flaticon.com/512/197/197560.png", }} style={[ styles.dropdownFlag, currentLanguage === "fr" && styles.selectedFlag, ]} /> </TouchableOpacity> </View> )} </View> </View> {/* Main Content */} <ScrollView style={styles.content} showsVerticalScrollIndicator={false}> {/* Add Car */} <View style={styles.addCarContainer}> <Ionicons name="add-outline" size={24} color="#007EFD" /> <TextInput style={styles.input} value={newCarName} onChangeText={setNewCarName} placeholder={t("enterCarName", "Enter new car name...")} placeholderTextColor="#9CA3AF" /> <TouchableOpacity style={styles.addButton} onPress={handleAddCar}> <Text style={styles.addButtonText}>{t("add", "Add")}</Text> </TouchableOpacity> </View> {/* Stats */} <View style={styles.section}> <Text style={styles.sectionTitle}>{t("quickStats", "Quick Stats")}</Text> <View style={styles.statsGrid}> {stats.map((stat, index) => ( <View key={index} style={styles.statCard}> <Ionicons name={stat.icon} size={32} color={stat.color} /> <Text style={styles.statCount}>{stat.count}</Text> <Text style={styles.statTitle}>{stat.title}</Text> </View> ))} </View> </View> {/* Activities */} <View style={styles.section}> <Text style={styles.sectionTitle}>{t("recentActivity", "Recent Activity")}</Text> <View style={styles.activitiesList}> {activities.map((activity) => ( <View key={activity.id} style={styles.activityCard}> <View style={[styles.activityIcon, { backgroundColor: `${activity.color}15` }]}> <Ionicons name={activity.icon} size={20} color={activity.color} /> </View> <View style={styles.activityContent}> <Text style={styles.activityMessage}>{activity.message}</Text> <Text style={styles.activityTime}>{activity.time}</Text> </View> </View> ))} </View> </View> </ScrollView> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#F8FAFC" }, header: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingHorizontal: 20, paddingVertical: 16, backgroundColor: "#FFFFFF", borderBottomWidth: 1, borderBottomColor: "#E2E8F0", }, headerContent: { flex: 1, alignItems: "center" }, title: { fontSize: 24, fontWeight: "700", color: "#1E293B", marginBottom: 4 }, subtitle: { fontSize: 16, color: "#64748B" }, languageButton: { flexDirection: "row", alignItems: "center", padding: 8 }, flagContainer: { flexDirection: "row", width: 32, height: 20, borderRadius: 12, overflow: "hidden", marginRight: 4, }, flagStripe: { flex: 1, height: "100%" }, chevron: { marginLeft: 2 }, content: { flex: 1, paddingHorizontal: 20, paddingTop: 20 }, addCarContainer: { flexDirection: "row", alignItems: "center", backgroundColor: "#FFFFFF", borderWidth: 2, borderColor: "#007EFD", borderRadius: 16, padding: 16, marginBottom: 32, shadowColor: "#007EFD", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 3, }, input: { flex: 1, marginLeft: 12, marginRight: 12, padding: 12, backgroundColor: "#F8FAFC", borderRadius: 8, fontSize: 16, color: "#1E293B", }, addButton: { backgroundColor: "#007EFD", paddingHorizontal: 20, paddingVertical: 12, borderRadius: 8, }, addButtonText: { color: "#FFFFFF", fontWeight: "600", fontSize: 16 }, section: { marginBottom: 32 }, sectionTitle: { fontSize: 20, fontWeight: "700", color: "#1E293B", marginBottom: 16, }, statsGrid: { flexDirection: "row", justifyContent: "space-between", gap: 12, }, statCard: { flex: 1, backgroundColor: "#FFFFFF", padding: 20, borderRadius: 12, alignItems: "center", shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 3, elevation: 2, }, statCount: { fontSize: 32, fontWeight: "700", color: "#1E293B", marginTop: 12, marginBottom: 4, }, statTitle: { fontSize: 14, color: "#64748B", textAlign: "center", fontWeight: "500", }, activitiesList: { gap: 12 }, activityCard: { flexDirection: "row", backgroundColor: "#FFFFFF", padding: 16, borderRadius: 12, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 3, elevation: 2, }, activityIcon: { width: 40, height: 40, borderRadius: 20, justifyContent: "center", alignItems: "center", marginRight: 12, }, activityContent: { flex: 1, justifyContent: "center" }, activityMessage: { fontSize: 16, color: "#1E293B", fontWeight: "500", marginBottom: 4, }, activityTime: { fontSize: 14, color: "#64748B" }, dropdown: { position: "absolute", top: 40, right: 0, backgroundColor: "#FFFFFF", borderRadius: 8, paddingVertical: 8, paddingHorizontal: 12, shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 6, elevation: 5, zIndex: 999, }, dropdownItem: { flexDirection: "row", alignItems: "center", paddingVertical: 6, }, dropdownFlag: { width: 32, height: 32, borderRadius: 16, marginRight: 8, borderWidth: 2, borderColor: "transparent", }, selectedFlag: { borderColor: "#007EFD", }, dropdownText: { fontSize: 14, color: "#1E293B", }, }); export default DashboardScreen; so keeping codes as how it is don't change the design just add notification icon near the flag in header that hold also should have dropdown to view the notifications use this <TouchableOpacity style={styles.notificationButton} onPress={handleNotificationPress}> <Bell stroke="#000" width={24} height={24} /> {hasNewNotifications && <View style={styles.notificationDot} />} </TouchableOpacity> and in enter new car name allow if make add dirct to add car screen with that name but should be make and let me hope the translations work well if choose kinyarwanda it translate to all screens,home,mycars,add car,setting and kinyarwanda seted to be default we use I18n.js that where all translations word is
Here are the key changes I made to your DashboardScreen:
The component uses your existing i18n setup and should work with Kinyarwanda as default. Make sure your i18n.js file includes these translation keys:
// Example translations you'll need in your i18n.js
const translations = {
rw: {
notifications: "Amakuru",
newBooking: "Icyifuzo gishya",
bookingMessage: "Umuntu ashaka gukodesha BMW yawe X5",
listingApproved: "Inyandiko yemejwe",
// ... add more Kinyarwanda translations
},
en: {
notifications: "Notifications",
newBooking: "New Booking Request",
// ... English translations
}
}The language switching should work across all screens (Dashboard, MyCars, AddCar, Settings) as long as your i18n configuration is properly set up with Kinyarwanda as the default language.
make dropdown be just popmodal for good ui not as dropdown and be able to view all notification and be able to click on notifacition to rad more if click be side it auto close the popup modal or cloing click on closing icon then setault also kinyarwanda be default for all screen fetching language form I18n use the appnavigator but work on car owner only and keep if changing language with that flag like choosing english should change in all screen to english