Create a StartNavigation for LoginPage, Onboarding... and create a modal

src/FLAD/App.tsx

@@ -1,16 +1,15 @@
 import Navigation from './navigation/Navigation';
-import LoginPage from './screens/loginPage';
 import {SafeAreaProvider,useSafeAreaInsets} from 'react-native-safe-area-context';
-import Onboarding from './components/Onboarding';
+import StartNavigation from './navigation/StartNavigation';
 
 export default function App() {
 
   return (
-    <Onboarding/>
-    //<LoginPage/>
-    // <SafeAreaProvider>
-    //   {/* <Navigation/> */}
-    // </SafeAreaProvider>
+    
+    <SafeAreaProvider>
+    {/* <Navigation/> */}
+      <StartNavigation/>
+    </SafeAreaProvider>
 
   );
 }

src/FLAD/components/Onboarding.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef } from 'react';
-import { View, StyleSheet, Text, FlatList, Animated } from 'react-native';
+import { View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBackground, Image } from 'react-native';
+import Modal from "react-native-modal";
+import {useNavigation} from "@react-navigation/native";
 
 import OnboardingItem from './OnboardingItem';
 import Paginator from './Paginator';
@@ -10,6 +12,11 @@ export default function Onboarding() {
     const [currentIndex, setCurrentIndex] = useState(0);
     const scrollX = useRef(new Animated.Value(0)).current;
     const slidesRef = useRef(null);
+    const navigation = useNavigation();
+
+    const [isModalVisible, setIsModalVisible] = React.useState(false);
+
+    const handleModal = () => setIsModalVisible(() => !isModalVisible);
 
     const viewableItemsChanged = useRef(({ viewableItems }) => {
         setCurrentIndex(viewableItems[0].index);
@@ -21,7 +28,7 @@ export default function Onboarding() {
         if(currentIndex < slides.length - 1) {
             slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
         } else {
-            console.log('Last item.');
+            setIsModalVisible(() => !isModalVisible);
         }
     };
 
@@ -49,6 +56,30 @@ export default function Onboarding() {
                 <Paginator data={slides} scrollX={scrollX}/>
                 <NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />    
             </View>
+            <Modal isVisible={isModalVisible}>
+                <View style={styles.modalContent}>
+                    <ImageBackground source={require("../assets/images/Background_Start_Page.png")} style={styles.backgroundImage}>
+                        <Text style={styles.versionText}>
+                            v2.0
+                        </Text>
+                        <TouchableOpacity onPress={handleModal}>
+                            <View style={styles.closeButtonCircle}>
+                                <Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton}/>
+                            </View>
+                        </TouchableOpacity>
+                        <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
+                        <TouchableOpacity style={styles.buttonConnection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
+                            <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.buttonInscription}>
+                            <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
+                            <Text style={styles.text}>SE CONNECTER</Text>
+                        </TouchableOpacity>
+                    </ImageBackground>
+                </View>
+            </Modal>
         </View>
     );
 }
@@ -60,10 +91,95 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         backgroundColor: '#141414'
     },
+    imageLogo: {
+        width: 280,
+        height: 140,
+        position: 'absolute',
+        top: 150,
+        right: 60
+    },
     balise: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         marginTop: -130
+    },
+    closeButtonCircle: {
+        backgroundColor: 'gray',
+        opacity: 0.4,
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 10,
+        right: 10
+    },
+    modalContent: {
+        position: 'absolute',
+        top: '7%',
+        left: '-5%',
+        right: '-5%',
+        height: '100%',
+    },
+    backgroundImage: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+    imageButton: {
+        width: 20,
+        height: 20
+    },
+    versionText: {
+        position: 'absolute',
+        top: 50,
+        right: 10,
+        color: 'gray',
+        fontWeight: 'bold',
+        fontSize: 15
+    },
+    buttonConnection: {
+        width: 262,
+        height: 57,
+        position: 'absolute',
+        top: 350,
+        right: 70,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#24CF5F',
+        borderRadius: 11,
+        borderColor: '#68F097',
+        borderWidth: 1
+    },
+    buttonInscription: {
+        width: 262,
+        height: 57,
+        position: 'absolute',
+        top: 420,
+        right: 70,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#951DDE',
+        borderRadius: 11,
+        borderColor: '#C656ED',
+        borderWidth: 1
+    },
+    text: {
+        fontWeight: 'bold',
+        color: 'white',
+        fontSize: 16
+    },
+    button2Connection: {
+        width: '100%',
+        height: 80,
+        backgroundColor: '#232123',
+        borderTopColor: '#3C3C3C',
+        borderTopWidth: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: 40
     }
 })

src/FLAD/navigation/LoginNavigation.tsx

@@ -1,23 +0,0 @@
-import React, {Component} from 'react';
-import LoginPage from '../screens/loginPage';
-import { createStackNavigator } from '@react-navigation/stack';
-import Navigation from './Navigation';
-
-export default function LoginNavigation() {
-    const Stack = createStackNavigator();
-    console.log("je suis ici");
-    return (
-      <Stack.Navigator initialRouteName="Login">
-        <Stack.Screen 
-          name="Login" 
-          component={LoginPage} 
-          options={{ headerShown: false }}
-        />
-        <Stack.Screen 
-          name="Home" 
-          component={Navigation} 
-          options={{ headerShown: false }}
-        />
-      </Stack.Navigator>
-    )
-  }

src/FLAD/navigation/StartNavigation.tsx

@@ -0,0 +1,26 @@
+import React, {Component} from 'react';
+import LoginPage from '../screens/loginPage';
+import Onboarding from '../components/Onboarding';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+
+export default function StartNavigation() {
+    const Stack = createStackNavigator();
+    return (
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen 
+            name="Home" 
+            component={Onboarding} 
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen 
+            name="Login" 
+            component={LoginPage} 
+            options={{ headerShown: false }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+
+    )
+  }

src/FLAD/package.json

@@ -27,6 +27,7 @@
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-gesture-handler": "~2.8.0",
+    "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "~3.18.0",

src/FLAD/screens/loginPage.tsx

@@ -1,7 +1,6 @@
 import React, {Component, useState } from 'react';
 import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
 import { TouchableHighlight } from 'react-native-gesture-handler';
-//import {useNavigation} from "@react-navigation/native";
 
 const DismissKeyboard = ({ children }) => (
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
@@ -15,14 +14,13 @@ export default function loginPage() {
     const toggleRememberMe = () => {
         setRememberMe(!rememberMe);
     }
-    //const navigation = useNavigation();
 
     return (
         <DismissKeyboard>
         <View style={styles.container}>
             <ImageBackground source={require("../assets/images/Background.png")} resizeMode="cover" style={styles.image}>
                 <Text style={styles.versionText}>
-                    v1.0
+                    v2.0
                 </Text>
                 <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
                 <Text style={styles.text}>SE CONNECTER</Text>