24 lines
1.6 KiB
TypeScript
24 lines
1.6 KiB
TypeScript
import { icons } from "@/constants";
|
|
import { Stack, Tabs } from "expo-router";
|
|
import { Image, ImageSourcePropType, View } from "react-native";
|
|
import tw from "twrnc";
|
|
const TabIcon=({source,focused}:{source:ImageSourcePropType; focused:boolean;})=>{
|
|
return(
|
|
<View style={tw.style(`flex flex-row justify-center items-center rounded-full w-7 h-7 ${focused ? "bg-green-300 ":"" } `)}>
|
|
<View style={tw.style(`rounded-full w-12 h-12 items-center justify-center ${focused ? "bg-green-400":"" } `)}>
|
|
<Image source={source} tintColor="white" resizeMode="contain" style={tw`w-7 h-7 `} />
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
const Layout=()=> {
|
|
return(
|
|
<Tabs initialRouteName="home" screenOptions={{tabBarActiveTintColor :"white",tabBarInactiveTintColor:"white",tabBarShowLabel:false,tabBarStyle:{backgroundColor:"#333333",paddingBottom:25,borderRadius:50,overflow:"hidden",marginHorizontal:20,marginBottom:20,height:70,display:"flex",justifyContent:"space-between",alignItems:"center",flexDirection:"row",position:"absolute",},headerShown: false, }}>
|
|
<Tabs.Screen name="home" options={{title:"Home", tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.home} /> }} />
|
|
<Tabs.Screen name="rides" options={{title:"Rides", tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.list} /> }} />
|
|
<Tabs.Screen name="chat" options={{title:"Chat", tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.chat} /> }} />
|
|
<Tabs.Screen name="profile" options={{title:"Profile", tabBarIcon:({focused})=><TabIcon focused={focused} source={icons.profile} /> }} />
|
|
</Tabs>
|
|
)
|
|
}
|
|
export default Layout; |