Optifit
/
Mobile
5
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Move Navbar in component

Browse Source
pull/4/head
Tony Fages 5 months ago
parent 5af02d4017
commit 361038f2f2
3 changed files with 119 additions and 113 deletions
Show Stats Download Patch File Download Diff File

111
app/_layout.tsx
Unescape View File

@ -1,118 +1,13 @@
import "../global.css"; import "../global.css";
import { GluestackUIProvider } from "@/app/components/ui/gluestack-ui-provider"; import {GluestackUIProvider} from "@/app/components/ui/gluestack-ui-provider";
import HomeScreen from "@/app/HomeScreen";
import ProfileScreen from "@/app/ProfileScreen";
import React from "react"; import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import NavBar from "@/app/components/NavBar";
import {
AntDesign,
Entypo,
MaterialCommunityIcons,
MaterialIcons,
} from "@expo/vector-icons";
export default function RootLayout() { export default function RootLayout() {
const BottomTabNavigator = createBottomTabNavigator();
return ( return (
<GluestackUIProvider> <GluestackUIProvider>
<BottomTabNavigator.Navigator <NavBar/>
initialRouteName="Home"
screenOptions={{
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {
height: 75,
backgroundColor: "#f9f9f9",
},
tabBarActiveTintColor: "black",
tabBarInactiveTintColor: "#8e8e93",
tabBarItemStyle: {
borderRadius: 50,
},
}}
>
<BottomTabNavigator.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<MaterialIcons
name="home"
color={focused ? "black" : color}
size={focused ? size + 4 : size}
/>
),
}}
/>
<BottomTabNavigator.Screen
name="Exercice"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<MaterialCommunityIcons
name="dumbbell"
size={focused ? size + 4 : size}
color={focused ? "black" : color}
/>
),
}}
/>
<BottomTabNavigator.Screen
name="Add"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<Entypo
name="plus"
size={focused ? size + 6 : size}
color='white'
/>
),
tabBarItemStyle: {
borderRadius: 50,
backgroundColor: "orange",
},
}}
/>
<BottomTabNavigator.Screen
name="Help"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<AntDesign
name="question"
size={focused ? size + 2 : size} // Augmente la taille si actif
color={focused ? "black" : color}
/>
),
}}
/>
<BottomTabNavigator.Screen
name="Settings"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<MaterialIcons
name="account-circle"
size={focused ? size + 3 : size}
color={focused ? "black" : color}
/>
),
}}
/>
</BottomTabNavigator.Navigator>
</GluestackUIProvider> </GluestackUIProvider>
); );
} }

12
app/components/ExerciceOverview.tsx
Unescape View File

@ -19,7 +19,7 @@ export default function ExerciceOverview() {
const image = {uri: exercise.imageUri}; const image = {uri: exercise.imageUri};
return ( return (
<Box> <Box className="h-1/4">
<ImageBackground <ImageBackground
source={image} source={image}
imageStyle={{ borderRadius: 15 }} imageStyle={{ borderRadius: 15 }}
@ -30,12 +30,14 @@ export default function ExerciceOverview() {
</HStack> </HStack>
<HStack> <HStack>
<Text className="text-black">{exercise.name}</Text>
<Text className="text-black">{exercise.sets} Sets</Text>
<Text className="text-black">{exercise.difficulty} Difficulty</Text>
<Box className="flex-1 items-start">
<Text className="text-black">{exercise.name}</Text>
<Text className="text-black">{exercise.sets} Sets</Text>
<Text className="text-black">{exercise.difficulty} Difficulty</Text>
</Box>
<Button className="bg-transparent"> <Button className="bg-transparent items-end ">
<AntDesign name="play" size={24} /> <AntDesign name="play" size={24} />
</Button> </Button>
</HStack> </HStack>

109
app/components/NavBar.tsx
Unescape View File

@ -0,0 +1,109 @@
import HomeScreen from "@/app/HomeScreen";
import {AntDesign, Entypo, MaterialCommunityIcons, MaterialIcons} from "@expo/vector-icons";
import ProfileScreen from "@/app/ProfileScreen";
import React from "react";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
export default function NavBar() {
const BottomTabNavigator = createBottomTabNavigator();
return (
<BottomTabNavigator.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {
height: 75,
backgroundColor: "#f9f9f9",
},
tabBarActiveTintColor: "black",
tabBarInactiveTintColor: "#8e8e93",
tabBarItemStyle: {
borderRadius: 50,
},
}}
>
<BottomTabNavigator.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<MaterialIcons
name="home"
color={focused ? "black" : color}
size={focused ? size + 4 : size}
/>
),
}}
/>
<BottomTabNavigator.Screen
name="Exercice"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<MaterialCommunityIcons
name="dumbbell"
size={focused ? size + 4 : size}
color={focused ? "black" : color}
/>
),
}}
/>
<BottomTabNavigator.Screen
name="Add"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<Entypo
name="plus"
size={focused ? size + 6 : size}
color='white'
/>
),
tabBarItemStyle: {
borderRadius: 50,
backgroundColor: "orange",
},
}}
/>
<BottomTabNavigator.Screen
name="Help"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<AntDesign
name="question"
size={focused ? size + 2 : size} // Augmente la taille si actif
color={focused ? "black" : color}
/>
),
}}
/>
<BottomTabNavigator.Screen
name="Settings"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size, focused }) => (
<MaterialIcons
name="account-circle"
size={focused ? size + 3 : size}
color={focused ? "black" : color}
/>
),
}}
/>
</BottomTabNavigator.Navigator>
);
}
Write Preview
Loading…
Cancel
Save