feat: change params on exercise screen, also reformat code

This commit is contained in:
Vinicius Souza 2024-11-01 13:05:06 -03:00
parent 2e42ecd4c0
commit 93f0696ad2

View file

@ -13,39 +13,42 @@ import { gluestackUIConfig } from '../../config/gluestack-ui.config';
import { Platform } from 'react-native';
type AppRoutes = {
Home: undefined,
Exercise: undefined,
History: undefined,
Profile: undefined,
}
Home: undefined;
Exercise: { exerciseId: string };
History: undefined;
Profile: undefined;
};
export type AppNavigatorRoutesProps = BottomTabNavigationProp<AppRoutes>;
const { Navigator, Screen } = createBottomTabNavigator<AppRoutes>();
export function AppRoutes() {
const { tokens: { space, colors } } = gluestackUIConfig;
const {
tokens: { space, colors },
} = gluestackUIConfig;
const iconSize = space['6'];
return (
<Navigator screenOptions={{
headerShown: 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'],
}
}}>
<Navigator
screenOptions={{
headerShown: 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}
options={{
tabBarIcon: ({ color }) => <HomeIcon fill={color} width={iconSize} height={iconSize}/>
tabBarIcon: ({ color }) => <HomeIcon fill={color} width={iconSize} height={iconSize} />,
}}
/>
@ -53,23 +56,23 @@ export function AppRoutes() {
name="History"
component={History}
options={{
tabBarIcon: ({ color }) => <HistoryIcon fill={color} width={iconSize} height={iconSize}/>
}}
tabBarIcon: ({ color }) => (
<HistoryIcon fill={color} width={iconSize} height={iconSize} />
),
}}
/>
<Screen
name="Profile"
component={Profile}
options={{
tabBarIcon: ({ color }) => <ProfileIcon fill={color} width={iconSize} height={iconSize}/>
tabBarIcon: ({ color }) => (
<ProfileIcon fill={color} width={iconSize} height={iconSize} />
),
}}
/>
<Screen
name="Exercise"
component={Exercise}
options={{ tabBarButton: () => null }}
/>
<Screen name="Exercise" component={Exercise} options={{ tabBarButton: () => null }} />
</Navigator>
)
);
}