learning/ignitegym
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: format tab bar

Browse source
This commit is contained in:
Vinicius Souza 2024-10-25 09:19:28 -03:00
parent e3cace9026
commit 9e8f38936f
1 changed files with 53 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/routes/app.routes.tsx
View file

@ -1,9 +1,16 @@
import { createBottomTabNavigator, BottomTabNavigationProp } from "@react-navigation/bottom-tabs"; import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { Exercise } from "@screens/Exercise"; import { Exercise } from '@screens/Exercise';
import { History } from "@screens/History"; import { History } from '@screens/History';
import { Home } from "@screens/Home"; import { Home } from '@screens/Home';
import { Profile } from "@screens/Profile"; import { Profile } from '@screens/Profile';
import HistoryIcon from '@assets/history.svg';
import HomeIcon from '@assets/home.svg';
import ProfileIcon from '@assets/profile.svg';
import { gluestackUIConfig } from '../../config/gluestack-ui.config';
import { Platform } from 'react-native';
type AppRoutes = { type AppRoutes = {
Home: undefined, Home: undefined,
@ -17,15 +24,52 @@ export type AppNavigatorRoutesProps = BottomTabNavigationProp<AppRoutes>;
const { Navigator, Screen } = createBottomTabNavigator<AppRoutes>(); const { Navigator, Screen } = createBottomTabNavigator<AppRoutes>();
export function AppRoutes() { export function AppRoutes() {
const { tokens: { space, colors } } = gluestackUIConfig;
const iconSize = space['6'];
return ( return (
<Navigator screenOptions={{ <Navigator screenOptions={{
headerShown: false, headerShown: false,
tabBarShowLabel: false, tabBarShowLabel: false,
tabBarActiveTintColor: colors.green500,
tabBarInactiveTintColor: colors.gray200,
tabBarStyle: {
backgroundColor: colors.gray600,
borderTopWidth: 0,
height: Platform.OS === 'android' ? 'auto' : 96,
paddingBottom: space['10'],
paddingTop: space['6'],
}
}}> }}>
<Screen name="Home" component={Home} /> <Screen
<Screen name="History" component={History} /> name="Home"
<Screen name="Profile" component={Profile} /> component={Home}
<Screen name="Exercise" component={Exercise} /> options={{
tabBarIcon: ({ color }) => <HomeIcon fill={color} width={iconSize} height={iconSize}/>
}}
/>
<Screen
name="History"
component={History}
options={{
tabBarIcon: ({ color }) => <HistoryIcon fill={color} width={iconSize} height={iconSize}/>
}}
/>
<Screen
name="Profile"
component={Profile}
options={{
tabBarIcon: ({ color }) => <ProfileIcon fill={color} width={iconSize} height={iconSize}/>
}}
/>
<Screen
name="Exercise"
component={Exercise}
options={{ tabBarButton: () => null }}
/>
</Navigator> </Navigator>
) )
} }