68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import {View, Text, Image} from 'react-native'
|
|
import React from 'react'
|
|
import {Tabs} from "expo-router";
|
|
import icons from "@/constants/icons"
|
|
|
|
const TabIcon = ({focused, icon, title }: {focused: boolean, icon: any, title: string}) => (
|
|
<View className={"flex-1 mt-3 flex flex-col items-center"}>
|
|
<Image source={icon} tintColor={focused ? '#0061ff' : 'black'}
|
|
resizeMode={'contain'} className={'size-6'}
|
|
/>
|
|
<Text className={'text-xs text-center w-full mt-1'}>{title}</Text>
|
|
</View>
|
|
)
|
|
|
|
const TabsLayout = () => {
|
|
// @ts-ignore
|
|
return (
|
|
<Tabs screenOptions={{
|
|
tabBarShowLabel: false,
|
|
tabBarStyle : {
|
|
backgroundColor: 'white',
|
|
position: 'absolute',
|
|
borderTopColor: 'blue',
|
|
borderTopWidth: 1,
|
|
minHeight: 70,
|
|
}
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'home',
|
|
headerShown: false,
|
|
tabBarIcon: (focused) => (
|
|
<TabIcon icon={icons.home} focused={true} title={'home'}/>
|
|
)
|
|
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="explore"
|
|
options={{
|
|
title: 'explore',
|
|
headerShown: false,
|
|
tabBarIcon: (focused) => (
|
|
<TabIcon icon={icons.search} focused={true} title={'explore'}/>
|
|
)
|
|
|
|
}}
|
|
/>
|
|
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'profile',
|
|
headerShown: false,
|
|
tabBarIcon: (focused) => (
|
|
<TabIcon icon={icons.person} focused={true} title={'profile'}/>
|
|
)
|
|
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
)
|
|
}
|
|
export default TabsLayout
|