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

Nav + Restructure ✨

Browse Source
pull/5/head
Tony Fages 5 months ago
parent 0224c3a5b4
commit 35d32527e2
27 changed files with 395 additions and 250 deletions
Show Stats Download Patch File Download Diff File

12
app/(auth)/login.tsx
Unescape View File

@ -1,5 +1,6 @@
import Screen from "@/components/Screen"; import Screen from "@/components/Screen";
import { Text } from "react-native"; import {SafeAreaView, Text} from "react-native";
import React from "react";
const socialNetworkButtons: ISocialNetworkButtons[] = [ const socialNetworkButtons: ISocialNetworkButtons[] = [
{ icon: "instagram" }, { icon: "instagram" },
@ -13,9 +14,12 @@ interface ISocialNetworkButtons {
export default function LoginPage() { export default function LoginPage() {
return ( return (
<Screen> <SafeAreaView>
<Text>Tmp</Text> <Screen>
</Screen> <Text>Tmp</Text>
</Screen>
</SafeAreaView>
// <Screen> // <Screen>
// <Box className="h-full justify-center"> // <Box className="h-full justify-center">
// <VStack space="2xl"> // <VStack space="2xl">

13
app/(tabs)/(add)/AddScreen.tsx
Unescape View File

@ -0,0 +1,13 @@
import {SafeAreaView, View, Text} from "react-native";
import React from "react";
export default function AddScreen() {
return (
<SafeAreaView>
<View>
<Text className="m-7 font-extrabold">Welcome to Add Screen </Text>
<Text>We will do it soon</Text>
</View>
</SafeAreaView>
);
}

13
app/(tabs)/(add)/_layout.tsx
Unescape View File

@ -0,0 +1,13 @@
import React from "react";
import { Stack } from "expo-router";
export default function RootoLayout() {
return (
<Stack screenOptions={{
headerShown: false,
presentation: "modal",
}}>
<Stack.Screen name="index" />
</Stack>
);
}

97
app/(tabs)/(add)/index.tsx
Unescape View File

@ -0,0 +1,97 @@
// import { SafeAreaView, StyleSheet, View } from "react-native";
// import React from "react";
// import {
// Avatar,
// AvatarFallbackText,
// AvatarImage,
// } from "@/components/ui/avatar";
// import { AntDesign } from "@expo/vector-icons";
// import { Text } from "@/components/ui/text";
// import ExerciceOverview from "@/components/ExerciceOverview";
// export default function HomeScreen() {
// const date = new Date();
// const formattedDate = date.toLocaleDateString("fr-FR", {
// year: "numeric",
// month: "long",
// day: "numeric",
// });
// return (
// <SafeAreaView style={styles.container}>
// <View style={styles.headerStyle}>
// <View style={styles.dateContainer}>
// <AntDesign name="calendar" size={24} color="white" />
// <Text style={styles.dateText}>{formattedDate}</Text>
// </View>
// <View style={styles.avatarContainer}>
// <Avatar size="xl">
// <AvatarFallbackText>Jane Doe</AvatarFallbackText>
// <AvatarImage
// source={{
// uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
// }}
// />
// </Avatar>
// <Text style={styles.titleNameUser}>Hello, Tata Monique</Text>
// </View>
// </View>
// <View>
// <ExerciceOverview />
// </View>
// </SafeAreaView>
// );
// }
// const styles = StyleSheet.create({
// container: {
// flex: 1,
// backgroundColor: "#f9f9f9", // Fond de l'écran avec une couleur claire
// },
// headerStyle: {
// height: 200,
// backgroundColor: "#333333", // Gris foncé pour l'arrière-plan du header
// borderBottomEndRadius: 25,
// borderBottomStartRadius: 25,
// padding: 20,
// alignItems: "flex-start",
// justifyContent: "flex-start",
// },
// dateContainer: {
// flexDirection: "row",
// alignItems: "flex-start",
// marginBottom: 20,
// },
// dateText: {
// fontSize: 18,
// fontWeight: "bold",
// marginLeft: 10,
// color: "#ffffff",
// },
// avatarContainer: {
// marginBottom: 15,
// flexDirection: "row",
// alignItems: "center",
// },
// titleNameUser: {
// fontSize: 24,
// color: "#ffffff",
// fontWeight: "bold",
// marginLeft: 10,
// },
// contentContainer: {
// marginTop: 20,
// padding: 15,
// alignItems: "flex-start",
// },
// contentText: {
// fontSize: 16,
// color: "#333333", // Texte en gris foncé pour une bonne lisibilité
// textAlign: "center",
// },
// fitness: {},
// });

13
app/(tabs)/(exercice)/ExerciceScreen.tsx
Unescape View File

@ -0,0 +1,13 @@
import {SafeAreaView, Text, View} from "react-native";
import React from "react";
export default function ExerciceScreen() {
return (
<SafeAreaView>
<View>
<Text className="m-7 font-extrabold">Welcome to Exercice Screen </Text>
<Text>We will do it soon</Text>
</View>
</SafeAreaView>
);
}

15
app/(tabs)/(exercice)/_layout.tsx
Unescape View File

@ -0,0 +1,15 @@
import React from "react";
import {Stack} from "expo-router";
export default function RootoLayout() {
return (
<Stack screenOptions={{
headerShown: false,
presentation: "modal",
}}>
<Stack.Screen name="ExerciceScreen" />
</Stack>
);
}

0
app/(tabs)/(exercice)/index.tsx
Unescape View File

14
app/(tabs)/(help)/HelpsScreen.tsx
Unescape View File

@ -0,0 +1,14 @@
import {SafeAreaView, Text, View} from "react-native";
import React from "react";
export default function HelpsScreen() {
return (
<SafeAreaView>
<View>
<Text className="m-7 font-extrabold">Welcome to Help Screen </Text>
<Text>We will do it soon</Text>
</View>
</SafeAreaView>
);
}

16
app/(tabs)/(help)/_layout.tsx
Unescape View File

@ -0,0 +1,16 @@
import React from "react";
import {Stack} from "expo-router";
import HelpsScreen from "@/app/(tabs)/(help)/HelpsScreen";
export default function RootoLayout() {
return (
<Stack screenOptions={{
headerShown: false,
presentation: "modal",
}}>
<Stack.Screen name="HelpsScreen" />
</Stack>
);
}

0
app/(tabs)/(help)/index.tsx
Unescape View File

90
app/(tabs)/(home)/HomeScreen.tsx
Unescape View File

@ -0,0 +1,90 @@
import {SafeAreaView,StyleSheet, Text, View} from "react-native";
import React from "react";
import {AntDesign} from "@expo/vector-icons";
import {Avatar, AvatarFallbackText, AvatarImage} from "@/ui/avatar";
export default function HomeScreen() {
const date = new Date();
const formattedDate = date.toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
return (
<SafeAreaView style={styles.container}>
<View style={styles.headerStyle}>
<View style={styles.dateContainer}>
<AntDesign name="calendar" size={24} color="white" />
<Text style={styles.dateText}>{formattedDate}</Text>
</View>
<View style={styles.avatarContainer}>
<Text style={styles.titleNameUser}>Hello, Tata Monique</Text>
</View>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f9f9f9', // Fond de l'écran avec une couleur claire
},
headerStyle: {
height: 200,
backgroundColor: '#333333', // Gris foncé pour l'arrière-plan du header
borderBottomEndRadius: 25,
borderBottomStartRadius: 25,
padding: 20,
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
dateContainer: {
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: 20,
},
dateText: {
fontSize: 18,
fontWeight: 'bold',
marginLeft: 10,
color: '#ffffff',
},
avatarContainer: {
marginBottom: 15,
flexDirection: 'row',
alignItems: 'center',
},
titleNameUser: {
fontSize: 24,
color: '#ffffff',
fontWeight: 'bold',
marginLeft: 10,
},
contentContainer: {
marginTop: 20,
padding: 15,
alignItems: 'flex-start',
},
contentText: {
fontSize: 16,
color: '#333333', // Texte en gris foncé pour une bonne lisibilité
textAlign: 'center',
},
fitness: {
}
});

8
app/(tabs)/(home)/_layout.tsx
Unescape View File

@ -1,9 +1,13 @@
import { Stack } from "expo-router"; import { Stack } from "expo-router";
import React from "react";
export default function RootoLayout() { export default function RootoLayout() {
return ( return (
<Stack> <Stack screenOptions={{
<Stack.Screen name="index" /> headerShown: false,
presentation: "modal",
}}>
<Stack.Screen name="HomeScreen" />
</Stack> </Stack>
); );
} }

109
app/(tabs)/(home)/index.tsx
Unescape View File

@ -1,97 +1,12 @@
// import { SafeAreaView, StyleSheet, View } from "react-native"; import {SafeAreaView, Text, View} from "react-native";
// import React from "react"; import React from "react";
// import { import HomeScreen from "@/app/(tabs)/(home)/HomeScreen";
// Avatar,
// AvatarFallbackText, export default function App() {
// AvatarImage,
// } from "@/components/ui/avatar"; return (
// import { AntDesign } from "@expo/vector-icons"; <SafeAreaView>
// import { Text } from "@/components/ui/text"; <HomeScreen/>
// import ExerciceOverview from "@/components/ExerciceOverview"; </SafeAreaView>
);
// export default function HomeScreen() { }
// const date = new Date();
// const formattedDate = date.toLocaleDateString("fr-FR", {
// year: "numeric",
// month: "long",
// day: "numeric",
// });
// return (
// <SafeAreaView style={styles.container}>
// <View style={styles.headerStyle}>
// <View style={styles.dateContainer}>
// <AntDesign name="calendar" size={24} color="white" />
// <Text style={styles.dateText}>{formattedDate}</Text>
// </View>
// <View style={styles.avatarContainer}>
// <Avatar size="xl">
// <AvatarFallbackText>Jane Doe</AvatarFallbackText>
// <AvatarImage
// source={{
// uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
// }}
// />
// </Avatar>
// <Text style={styles.titleNameUser}>Hello, Tata Monique</Text>
// </View>
// </View>
// <View>
// <ExerciceOverview />
// </View>
// </SafeAreaView>
// );
// }
// const styles = StyleSheet.create({
// container: {
// flex: 1,
// backgroundColor: "#f9f9f9", // Fond de l'écran avec une couleur claire
// },
// headerStyle: {
// height: 200,
// backgroundColor: "#333333", // Gris foncé pour l'arrière-plan du header
// borderBottomEndRadius: 25,
// borderBottomStartRadius: 25,
// padding: 20,
// alignItems: "flex-start",
// justifyContent: "flex-start",
// },
// dateContainer: {
// flexDirection: "row",
// alignItems: "flex-start",
// marginBottom: 20,
// },
// dateText: {
// fontSize: 18,
// fontWeight: "bold",
// marginLeft: 10,
// color: "#ffffff",
// },
// avatarContainer: {
// marginBottom: 15,
// flexDirection: "row",
// alignItems: "center",
// },
// titleNameUser: {
// fontSize: 24,
// color: "#ffffff",
// fontWeight: "bold",
// marginLeft: 10,
// },
// contentContainer: {
// marginTop: 20,
// padding: 15,
// alignItems: "flex-start",
// },
// contentText: {
// fontSize: 16,
// color: "#333333", // Texte en gris foncé pour une bonne lisibilité
// textAlign: "center",
// },
// fitness: {},
// });

13
app/(tabs)/(profil)/ProfileScreen.tsx
Unescape View File

@ -0,0 +1,13 @@
import {SafeAreaView, Text, View} from "react-native";
import React from "react";
export default function ProfileScreen() {
return (
<SafeAreaView>
<View>
<Text className="m-7 font-extrabold">Welcome Screen </Text>
<Text>We will do it soon</Text>
</View>
</SafeAreaView>
);
}

13
app/(tabs)/(profil)/_layout.tsx
Unescape View File

@ -0,0 +1,13 @@
import { Stack } from "expo-router";
import React from "react";
export default function RootoLayout() {
return (
<Stack screenOptions={{
headerShown: false,
presentation: "modal",
}}>
<Stack.Screen name="ProfileScreen" />
</Stack>
);
}

9
app/(tabs)/(profile)/_layout.tsx
Unescape View File

@ -1,9 +0,0 @@
import { Stack } from "expo-router";
export default function KRootLayout() {
return (
<Stack>
<Stack.Screen name="profile" />
</Stack>
);
}

13
app/(tabs)/(profile)/profile.tsx
Unescape View File

@ -1,13 +0,0 @@
// import {SafeAreaView, View} from "react-native";
// import {Text} from "react-native";
// export default function ProfileScreen() {
// return (
// <SafeAreaView>
// <View>
// <Text className="m-4">Edit src/screen/ProfileScreen.tsx to edit this screen.</Text>
// </View>
// </SafeAreaView>
// );
// }

57
app/(tabs)/_layout.tsx
Unescape View File

@ -1,10 +1,14 @@
import { Redirect, Tabs } from "expo-router"; import { Redirect, Tabs } from "expo-router";
import { useSession } from "@/ctx"; import { useSession } from "@/ctx";
import { Text } from "react-native"; import { Text } from "react-native";
import React from "react";
import {AntDesign, Ionicons, MaterialIcons} from "@expo/vector-icons";
export default function TabBarLayout() { export default function TabBarLayout() {
const { session, isLoading } = useSession(); const { session, isLoading } = useSession();
const sizeIcon = 24;
// You can keep the splash screen open, or render a loading screen like we do here. // You can keep the splash screen open, or render a loading screen like we do here.
if (isLoading) { if (isLoading) {
return <Text>Loading...</Text>; return <Text>Loading...</Text>;
@ -12,30 +16,63 @@ export default function TabBarLayout() {
// Only require authentication within the (app) group's layout as users // Only require authentication within the (app) group's layout as users
// need to be able to access the (auth) group and sign in again. // need to be able to access the (auth) group and sign in again.
if (!session) { /*if (!session) {
// On web, static rendering will stop here as the user is not authenticated // On web, static rendering will stop here as the user is not authenticated
// in the headless Node process that the pages are rendered in. // in the headless Node process that the pages are rendered in.
return <Redirect href="/login" />; return <Redirect href="/login" />;
} }*/
return ( return (
<Tabs <Tabs
screenOptions={{ screenOptions={{
headerShown: false, headerShown: false,
}} }}
initialRouteName={"(home)"}
> >
<Tabs.Screen <Tabs.Screen
name="(home)" name="(home)"
options={{ options={{
title: "Home", tabBarShowLabel: false,
}} tabBarIcon: () => <Ionicons name="home" size={sizeIcon} color="black" />,
/>
<Tabs.Screen
name="(profile)"
options={{
title: "Profile",
}} }}
/> />
<Tabs.Screen
name="(exercice)"
options={{
tabBarShowLabel: false,
tabBarIcon: () => <MaterialIcons name="fitness-center" size={sizeIcon} color="black" />,
}}
/>
<Tabs.Screen
name="(add)"
options={{
tabBarShowLabel: false,
tabBarIcon: () => <Ionicons name="add-circle-outline" size={sizeIcon} color="black" />,
}}
/>
<Tabs.Screen
name="(profil)"
options={{
tabBarShowLabel: false,
tabBarIcon: () => <MaterialIcons name="account-circle" size={sizeIcon} color="black" />,
}}
/>
<Tabs.Screen
name="(help)"
options={{
tabBarShowLabel: false,
tabBarIcon: () => <AntDesign name="question" size={sizeIcon} color="black" />,
}}
/>
</Tabs> </Tabs>
); );
} }

2
app/+not-found.tsx
Unescape View File

@ -9,7 +9,7 @@ export default function NotFoundScreen() {
<> <>
<Stack.Screen options={{ title: 'Oops!' }} /> <Stack.Screen options={{ title: 'Oops!' }} />
<View style={styles.container}> <View style={styles.container}>
<Text>This screen doesn't exist: {pathname}</Text> <Text>This screen {pathname} doesn't exist: {pathname}</Text>
<Text>Go to home screen!</Text> <Text>Go to home screen!</Text>
</View> </View>
</> </>

5
app/_layout.tsx
Unescape View File

@ -3,7 +3,8 @@ import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen"; import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react"; import { useEffect } from "react";
import { SessionProvider } from "@/ctx"; import { SessionProvider } from "@/ctx";
import { Slot } from "expo-router"; import {Slot, Stack} from "expo-router";
import "@/global.css";
// Prevent the splash screen from auto-hiding before asset loading is complete. // Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
@ -26,7 +27,7 @@ export default function RootLayout() {
return ( return (
<SessionProvider> <SessionProvider>
<Slot /> <Slot/>
</SessionProvider> </SessionProvider>
); );
} }

1
babel.config.js
Unescape View File

@ -7,3 +7,4 @@ module.exports = function (api) {
], ],
}; };
}; };

106
components/NavBar.tsx
Unescape View File

@ -1,106 +0,0 @@
// import HomeScreen from "@/app/(tabs)/(home)/home";
// import {
// AntDesign,
// Entypo,
// MaterialCommunityIcons,
// MaterialIcons,
// } from "@expo/vector-icons";
// import ProfileScreen from "@/app/(tabs)/(profile)/profile";
// 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>
// );
// }

14
generate-react-cli.json
Unescape View File

@ -0,0 +1,14 @@
{
"usesTypeScript": true,
"usesStyledComponents": true,
"testLibrary": "Testing Library",
"component": {
"default": {
"path": "src/components",
"withStyle": true,
"withTest": true,
"withStory": true,
"withLazy": true
}
}
}

4
package-lock.json generated
Unescape View File

@ -33,8 +33,8 @@
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-native": "0.76.6", "react-native": "0.76.6",
"react-native-gesture-handler": "^2.20.2", "react-native-gesture-handler": "^2.20.2",
"react-native-reanimated": "^3.16.1", "react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "^4.12.0", "react-native-safe-area-context": "4.12.0",
"react-native-screens": "^4.4.0", "react-native-screens": "^4.4.0",
"react-native-svg": "^15.8.0", "react-native-svg": "^15.8.0",
"react-native-vector-icons": "^10.2.0", "react-native-vector-icons": "^10.2.0",

4
package.json
Unescape View File

@ -40,8 +40,8 @@
"react-dom": "18.3.1", "react-dom": "18.3.1",
"react-native": "0.76.6", "react-native": "0.76.6",
"react-native-gesture-handler": "^2.20.2", "react-native-gesture-handler": "^2.20.2",
"react-native-reanimated": "^3.16.1", "react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "^4.12.0", "react-native-safe-area-context": "4.12.0",
"react-native-screens": "^4.4.0", "react-native-screens": "^4.4.0",
"react-native-svg": "^15.8.0", "react-native-svg": "^15.8.0",
"react-native-vector-icons": "^10.2.0", "react-native-vector-icons": "^10.2.0",

2
tailwind.config.js
Unescape View File

@ -7,4 +7,4 @@ module.exports = {
extend: {}, extend: {},
}, },
plugins: [], plugins: [],
}; }
Write Preview
Loading…
Cancel
Save