React native form validation

React native form validation - v0 by VercelReact native form validation - v0 by Vercel

"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 (

<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

Show full message

270d ago

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:

Global gesture disable: Changed the default screenOptions to have gestureEnabled: false instead of true
Individual screen settings: Added gestureEnabled: false to all screen options to ensure gestures are disabled
ForgotPasswordScreen exception: Kept gestureEnabled: true only for the ForgotPasswordScreen

Now 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.

270d ago

"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

Show full message

270d ago

Here are the key changes I made to your DashboardScreen:

Notification Features Added:

Notification Button: Added next to the language selector with a red dot indicator for new notifications
Notification Dropdown: Shows a list of notifications with different types (booking, approval, payment)
Notification Management: Tracks read/unread status and removes the red dot when opened

Enhanced Add Car Functionality:

Direct Navigation: When you enter a car make and click "Add", it navigates to AddCarScreen with that make pre-filled
Better Placeholder: Updated placeholder text to be more descriptive about entering car makes
Pre-populated Data: The car make gets passed to the AddCarScreen so users can continue from there

Translation Support:

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
  }
}

Design Preserved:

Kept all existing styling and layout
Added notification dropdown with consistent design language
Maintained the same color scheme and spacing

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.

270d ago

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

270d ago

Code editing is not availableDuplicate this chat to use a more powerful code editor.

"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 (

<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,

}}