Merge pull request #15 from atlp-rwanda/ch-project-structure

Chore (setup project structure. Worked on colors, constants, and icons)

app.json

@@ -2,11 +2,11 @@
   "expo": {
     "name": "matadors-rn-medica",
     "slug": "matadors-rn-medica",
+    "scheme": "matadors-rn-medica",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
-    "userInterfaceStyle": "automatic",
+    "userInterfaceStyle": "dark",
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",

app/(app)/HomeScreen.tsx

@@ -0,0 +1,5 @@
+interface Props {}
+
+export default function HomeScreen({}: Props) {
+  return <></>;
+}

app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "@/components/Themed";
+import { LeftArrow } from "@/components/UI/icons";
+import { SvgUri, SvgXml } from "react-native-svg";
+
+export default function SetYourFingerPrint() {
+  return (
+    <>
+      <Text>Set Your Finger Print</Text>
+    </>
+  );
+}

app/(auth)/_layout.tsx

@@ -0,0 +1,17 @@
+import Header from "@/components/UI/Header";
+import { Stack } from "expo-router";
+
+export default function AuthLayout() {
+  return (
+    <Stack initialRouteName="SignIn&SignOut/SetYourFingerPrint">
+      <Stack.Screen
+        name="SignIn&SignOut/SetYourFingerPrint"
+        options={{
+          header: () => {
+            return <Header />;
+          },
+        }}
+      />
+    </Stack>
+  );
+}

app/_layout.tsx

@@ -1,28 +1,34 @@
-import FontAwesome from '@expo/vector-icons/FontAwesome';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
-
-import { useColorScheme } from '@/components/useColorScheme';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+
+import { useEffect, useState } from "react";
 
 export {
   // Catch any errors thrown by the Layout component.
   ErrorBoundary,
-} from 'expo-router';
+} from "expo-router";
 
 export const unstable_settings = {
   // Ensure that reloading on `/modal` keeps a back button present.
-  initialRouteName: '(tabs)',
+  initialRouteName: "(auth)",
 };
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const [loaded, error] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    Medium: require("../assets/fonts/Urbanist-Medium.ttf"),
+    SemiBold: require("../assets/fonts/Urbanist-SemiBold.ttf"),
+    Bold: require("../assets/fonts/Urbanist-Bold.ttf"),
+    Regular: require("../assets/fonts/Urbanist-Regular.ttf"),
     ...FontAwesome.font,
   });
 
@@ -45,13 +51,12 @@ export default function RootLayout() {
 }
 
 function RootLayoutNav() {
-  const colorScheme = useColorScheme();
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal' }} />
+    <ThemeProvider value={colorScheme === "light" ? DarkTheme : DefaultTheme}>
+      <Stack initialRouteName="(auth)">
+        <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
       </Stack>
     </ThemeProvider>
   );

app/index.tsx

@@ -0,0 +1,25 @@
+import { Text, View, StyleSheet} from "react-native";
+import { router } from "expo-router";
+import { useEffect } from "react";
+
+export default function Index() {
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     router.push("/(auth)/SignIn&SignOut/SetYourFingerPrint");
+  //   }, 2000);
+  // });
+
+  return (
+    <View style={styles.container}>
+      <Text>Onboarding Screen</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+})

app/onBoarding/_layout.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Link, Stack } from "expo-router";
+import { Pressable } from "react-native";
+
+
+// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+function TabBarIcon(props: {
+  name: React.ComponentProps<typeof FontAwesome>["name"];
+  color: string;
+}) {
+  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
+}
+
+export default function TabLayout() {
+
+  return (
+    <Stack>
+      <Stack.Screen
+        name="OnBoardingScrollScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+
+      <Stack.Screen
+        name="FirstScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+
+      <Stack.Screen
+        name="SecondScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+
+      <Stack.Screen
+        name="ThirdScreen"
+        options={{
+          title: "onBoarding page",
+          headerShown: false,
+        }}
+      />
+    </Stack>
+  );
+}

app/onBoarding/firstScreen.tsx

@@ -0,0 +1,46 @@
+import React, {useState} from 'react'
+import {  StyleSheet, Text, View } from 'react-native'
+import { Colors } from '@/constants/Colors'
+import OnboardingComponent from '@/components/OnBoarding/OnboardingComponent';
+
+const image = require("../../../assets/images/OnBoardingImages/firstLightImg.png")
+const darkImg = require("../../../assets/images/OnBoardingImages/firstDarkImg.png")
+
+const firstScreen = () => {
+    const [isDark , setIsDark] = useState(false)
+
+   return (
+    <View style={styles.container}>
+          <OnboardingComponent 
+        image={isDark ? darkImg : image}
+        text="Thousands of    doctors & experts to help your health!"
+        action="Next"
+        direction="/onBoarding/SecondScreen"
+    >
+        <Text style={[styles.dots, {width: 30, backgroundColor: Colors.main.primary._500}]}></Text>
+        <Text style={styles.dots}></Text>
+        <Text style={styles.dots}></Text>
+    </OnboardingComponent>
+
+    </View>
+
+  )
+}
+
+const styles = StyleSheet.create({
+
+    container: {
+        flex: 1,
+        alignItems: "center",
+    },
+
+    dots: {
+        width: 10,
+        height: 10,
+        backgroundColor: "grey",
+        borderRadius: 100,
+        marginHorizontal: 3
+    },
+})
+
+export default firstScreen