fix: rides layout and accessibility

app/(root)/(tabs)/_layout.tsx

@@ -13,10 +13,10 @@ const TabIcon = ({
   focused: boolean;
 }) => (
   <View
-    className={`flex flex-row justify-center items-center rounded-full ${focused ? "bg-general-300" : ""}`}
+    className={`flex flex-row justify-center items-center rounded-full ${focused && "bg-general-300"}`}
   >
     <View
-      className={`rounded-full w-12 h-12 items-center justify-center ${focused ? "bg-general-400" : ""}`}
+      className={`rounded-full w-12 h-12 items-center justify-center ${focused && "bg-general-400"}`}
     >
       <Image
         source={source}

app/(root)/book-ride.tsx

@@ -23,6 +23,7 @@ const BookRide = () => {
         <View className="flex flex-col w-full items-center justify-center mt-10">
           <Image
             source={{ uri: driverDetails?.profile_image_url }}
+            alt="Driver Avatar"
             className="w-28 h-28 rounded-full"
           />
 
@@ -34,9 +35,11 @@ const BookRide = () => {
             <View className="flex flex-row items-center space-x-0.5">
               <Image
                 source={icons.star}
+                alt="Star"
                 className="w-5 h-5"
                 resizeMode="contain"
               />
+
               <Text className="text-lg font-JakartaRegular">
                 {driverDetails?.rating}
               </Text>
@@ -47,6 +50,7 @@ const BookRide = () => {
         <View className="flex flex-col w-full items-start justify-center py-3 px-5 rounded-3xl bg-general-600 mt-5">
           <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
             <Text className="text-lg font-JakartaRegular">Ride Price</Text>
+
             <Text className="text-lg font-JakartaRegular text-[#0CC25F]">
               ${driverDetails?.price}
             </Text>
@@ -54,6 +58,7 @@ const BookRide = () => {
 
           <View className="flex flex-row items-center justify-between w-full border-b border-white py-3">
             <Text className="text-lg font-JakartaRegular">Pickup Time</Text>
+
             <Text className="text-lg font-JakartaRegular">
               {formatTime(driverDetails?.time!)}
             </Text>
@@ -61,6 +66,7 @@ const BookRide = () => {
 
           <View className="flex flex-row items-center justify-between w-full py-3">
             <Text className="text-lg font-JakartaRegular">Car Seats</Text>
+
             <Text className="text-lg font-JakartaRegular">
               {driverDetails?.car_seats}
             </Text>
@@ -70,6 +76,7 @@ const BookRide = () => {
         <View className="flex flex-col w-full items-start justify-center mt-5">
           <View className="flex flex-row items-center justify-start mt-3 border-t border-b border-general-700 w-full py-3">
             <Image source={icons.to} className="w-6 h-6" />
+
             <Text className="text-lg font-JakartaRegular ml-2">
               {userAddress}
             </Text>
@@ -77,6 +84,7 @@ const BookRide = () => {
 
           <View className="flex flex-row items-center justify-start border-b border-general-700 w-full py-3">
             <Image source={icons.point} className="w-6 h-6" />
+
             <Text className="text-lg font-JakartaRegular ml-2">
               {destinationAddress}
             </Text>

app/(root)/confirm-ride.tsx

@@ -1,9 +1,9 @@
+import { router } from "expo-router";
 import { FlatList, View } from "react-native";
 
+import { CustomButton } from "@/components/custom-button";
 import { DriverCard } from "@/components/driver-card";
 import { RideLayout } from "@/components/ride-layout";
-import { CustomButton } from "@/components/custom-button";
-import { router } from "expo-router";
 import { useDriverStore } from "@/store";
 
 const ConfirmRide = () => {