Add new Icons, create a registration page and i made the pages more responsive ✅

src/FLAD/components/NextButton.tsx

@@ -75,8 +75,7 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center',
+        alignItems: 'center'
-        marginTop: -70
     },
     button: {
         position: 'absolute',

src/FLAD/components/Onboarding.tsx

@@ -34,7 +34,7 @@ export default function Onboarding() {
 
     return (
         <View style={styles.container}>
-            <View style={{ flex: 3 }}>
+            <View style={styles.balise}>
                 <FlatList 
                     data={slides} 
                     renderItem={({item}) => <OnboardingItem item={item} />} 
@@ -51,32 +51,32 @@ export default function Onboarding() {
                     viewabilityConfig={viewConfig}
                     ref={slidesRef}
                 />   
-            </View>
-            <View style={styles.balise}>
                 <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}>
+                        <View style={styles.modalView}>
-                            v2.0
+                            <Text style={styles.versionText}>
-                        </Text>
+                                v2.0
-                        <TouchableOpacity onPress={handleModal}>
+                            </Text>
-                            <View style={styles.closeButtonCircle}>
+                            <TouchableOpacity onPress={handleModal} style={styles.closeButtonCircle}>
-                                <Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton}/>
+                                <View>
-                            </View>
+                                    <Image source={require("../assets/icons/icons/croix.png")} style={styles.imageButton}/>
-                        </TouchableOpacity>
+                                </View>
-                        <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
+                            </TouchableOpacity>
-                        <TouchableOpacity style={styles.buttonConnection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
+                            <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
-                            <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
+                            <TouchableOpacity style={styles.buttonConnection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
-                        </TouchableOpacity>
+                                <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
-                        <TouchableOpacity style={styles.buttonInscription}>
+                            </TouchableOpacity>
-                            <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
+                            <TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Inscription');}}>
-                        </TouchableOpacity>
+                                <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
-                        <TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
+                            </TouchableOpacity>
-                            <Text style={styles.text}>SE CONNECTER</Text>
+                            <TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
-                        </TouchableOpacity>
+                                <Text style={styles.text}>SE CONNECTER</Text>
+                            </TouchableOpacity>
+                        </View>
                     </ImageBackground>
                 </View>
             </Modal>
@@ -94,15 +94,13 @@ const styles = StyleSheet.create({
     imageLogo: {
         width: 280,
         height: 140,
-        position: 'absolute',
+        marginBottom: 100
-        top: 150,
-        right: 60
     },
     balise: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        marginTop: -130
+        marginBottom: 50
     },
     closeButtonCircle: {
         backgroundColor: 'gray',
@@ -123,6 +121,11 @@ const styles = StyleSheet.create({
         right: '-5%',
         height: '100%',
     },
+    modalView: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
     backgroundImage: {
         flex: 1,
         width: '100%',
@@ -143,28 +146,24 @@ const styles = StyleSheet.create({
     buttonConnection: {
         width: 262,
         height: 57,
-        position: 'absolute',
-        top: 350,
-        right: 70,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: '#24CF5F',
         borderRadius: 11,
         borderColor: '#68F097',
-        borderWidth: 1
+        borderWidth: 1,
+        marginBottom: 12
     },
     buttonInscription: {
         width: 262,
         height: 57,
-        position: 'absolute',
-        top: 420,
-        right: 70,
         justifyContent: 'center',
         alignItems: 'center',
         backgroundColor: '#951DDE',
         borderRadius: 11,
         borderColor: '#C656ED',
-        borderWidth: 1
+        borderWidth: 1,
+        marginBottom: 220
     },
     text: {
         fontWeight: 'bold',

src/FLAD/components/OnboardingItem.tsx

@@ -10,10 +10,9 @@ export default function Onboarding({ item }) {
         <View style={[styles.container, { width }]}>
             <Image source={item.image} style={[styles.image, { width, resizeMode: 'contain'}]} />
 
-            <View style={{ flex: 0.7 }}>
                 <Text style={styles.title}>{item.title}</Text>
                 <Text style={styles.description}>{item.description}</Text>
-            </View>
+
 
         </View>
     );

src/FLAD/navigation/StartNavigation.tsx

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import LoginPage from '../screens/loginPage';
+import InscriptionPage from '../screens/InscriptionPage';
 import Onboarding from '../components/Onboarding';
 import { createStackNavigator } from '@react-navigation/stack';
 import { NavigationContainer } from '@react-navigation/native';
@@ -19,6 +20,11 @@ export default function StartNavigation() {
             component={LoginPage} 
             options={{ headerShown: false }}
           />
+          <Stack.Screen 
+            name="Inscription" 
+            component={InscriptionPage} 
+            options={{ headerShown: false }}
+          />
         </Stack.Navigator>
       </NavigationContainer>
 

src/FLAD/package.json

@@ -31,7 +31,7 @@
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "~3.18.0",
-    "react-native-svg": "^13.8.0",
+    "react-native-svg": "13.4.0",
     "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.9",
     "rive-react-native": "^3.0.41"

src/FLAD/screens/InscriptionPage.tsx

@@ -0,0 +1,163 @@
+import React, {Component, useState } from 'react';
+import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
+import {useNavigation} from "@react-navigation/native";
+
+const DismissKeyboard = ({ children }) => (
+    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+        {children}
+    </TouchableWithoutFeedback>
+)
+
+export default function InscriptionPage() {
+    const [rememberMe, setRememberMe] = useState(false);
+    const navigation = useNavigation();
+
+    const toggleRememberMe = () => {
+        setRememberMe(!rememberMe);
+    }
+
+    return (
+        <DismissKeyboard>
+            <View style={styles.container}>
+                <ImageBackground source={require("../assets/images/Background.png")} resizeMode="cover" style={styles.image}>
+                    <Text style={styles.versionText}>
+                        v2.0
+                    </Text>
+                    <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
+                    <Text style={styles.text}>S'INSCRIRE</Text>
+                    <View style={styles.containerInput}>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
+                    </View>
+                    <View style={styles.containerInput}>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
+                    </View>
+                    <View style={styles.containerInput}>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
+                    </View>
+                    <TouchableOpacity style={[styles.buttonSpotify, styles.shadow]}>
+                        <Text style={styles.textIntoButton}>Lier compte</Text>
+                        <Image source={require("../assets/icons/icons/Spotify.png")} style={{width: 30, height: 30}}/>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
+                        <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
+                    </TouchableOpacity>
+                    <View style={styles.inscriptionText}>
+                        <Text style={{fontSize: 16, color: 'white'}}>Tu as déjà un compte? </Text>
+                        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
+                            <Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
+                        </TouchableOpacity>
+                    </View>
+                </ImageBackground>
+            </View>
+        </DismissKeyboard>
+    )
+}
+
+const styles = StyleSheet.create ({
+    container: {
+        flex: 1   
+    },
+    containerInput: {
+        justifyContent: 'center'
+    },
+    image: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    imageLogo: {
+        width: 280,
+        height: 140,
+        alignSelf: 'center',
+        marginBottom: 50,
+        marginTop: -20
+    },
+    button: {
+        marginTop: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        backgroundColor: 'white',
+        width: 86,
+        height: 86,
+        borderRadius: 21
+    },
+    buttonImage: {
+        width: 40,
+        height: 40
+    },
+    versionText: {
+        position: 'absolute',
+        top: 40,
+        right: 20,
+        color: 'gray',
+        fontWeight: 'bold',
+        fontSize: 15
+    },
+    text: {
+        fontWeight: 'bold',
+        fontSize: 25,
+        alignSelf: 'center',
+        color: 'white',
+        marginBottom: 15
+    },
+    textIntoButton: {
+        fontWeight: 'bold',
+        fontSize: 15,
+        color: 'white',
+        marginRight: 10
+    },
+    shadow: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 2,
+          height: 3,
+        },
+        shadowOpacity: 0.50,
+        shadowRadius: 3.84,
+    },
+    input: {
+        width: 300,
+        height: 42,
+        borderRadius: 30,
+        color: 'black',
+        backgroundColor: 'white',
+        fontSize: 15,
+        alignSelf: 'center',
+        marginBottom: 20,
+        paddingLeft: 50,
+        paddingRight: 20 
+    },
+    iconUser : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: '17%',
+        bottom: '50%'
+    },
+    iconLock : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: '17%',
+        bottom: '50%'
+    },
+    inscriptionText: {
+        flexDirection: 'row', 
+        alignSelf: 'center', 
+        bottom: -80
+    },
+    buttonSpotify: {
+        width: 300,
+        height: 42,
+        backgroundColor: '#24CF5F',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        borderRadius: 30,
+        flexDirection: 'row'
+    }
+})

src/FLAD/screens/loginPage.tsx

@@ -1,6 +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()}>
@@ -10,6 +10,7 @@ const DismissKeyboard = ({ children }) => (
 
 export default function loginPage() {
     const [rememberMe, setRememberMe] = useState(false);
+    const navigation = useNavigation();
 
     const toggleRememberMe = () => {
         setRememberMe(!rememberMe);
@@ -17,30 +18,36 @@ export default function loginPage() {
 
     return (
         <DismissKeyboard>
-        <View style={styles.container}>
+            <View style={styles.container}>
-            <ImageBackground source={require("../assets/images/Background.png")} resizeMode="cover" style={styles.image}>
+                <ImageBackground source={require("../assets/images/Background.png")} resizeMode="cover" style={styles.image}>
-                <Text style={styles.versionText}>
+                    <Text style={styles.versionText}>
-                    v2.0
+                        v2.0
-                </Text>
+                    </Text>
-                <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
+                    <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
-                <Text style={styles.text}>SE CONNECTER</Text>
+                    <Text style={styles.text}>SE CONNECTER</Text>
-                <TextInput placeholder='E-Mail' style={[styles.input, styles.shadow]}>
+                    <View style={styles.containerInput}>
-                </TextInput>
+                        <TextInput style={[styles.input, styles.shadow]}/>
-                <TextInput placeholder='Mot de passe' style={[styles.input, styles.shadow]}>
+                        <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
-                </TextInput>
+                    </View>
-                <View style={styles.rememberMeContainer}>
+                    <View style={styles.containerInput}>
-                    <TouchableOpacity style={[styles.checkbox, rememberMe ? styles.checkboxChecked : null]} onPress={toggleRememberMe}></TouchableOpacity>
+                        <TextInput style={[styles.input, styles.shadow]}/>
-                    <Text style={styles.rememberMeText}>SE SOUVENIR DE MOI</Text>
+                        <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
-                </View>
+                    </View>
-                <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
+                    <View style={styles.rememberMeContainer}>
-                    <Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/>
+                        <TouchableOpacity style={[styles.checkbox, rememberMe ? styles.checkboxChecked : null]} onPress={toggleRememberMe}></TouchableOpacity>
-                </TouchableOpacity>
+                        <Text style={styles.rememberMeText}>SE SOUVENIR DE MOI</Text>
-                <View style={styles.inscriptionText}>
+                    </View>
-                    <Text style={{fontSize: 16, color: 'white'}}>Tu n'as pas de compte? </Text>
+                    <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
-                    <Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
+                        <Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/>
-                </View>
+                    </TouchableOpacity>
-            </ImageBackground>
+                    <View style={styles.inscriptionText}>
-        </View>
+                        <Text style={{fontSize: 16, color: 'white'}}>Tu n'as pas de compte? </Text>
+                        <TouchableOpacity onPress={() => navigation.navigate('Inscription')}>
+                            <Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
+                        </TouchableOpacity>
+                    </View>
+                </ImageBackground>
+            </View>
         </DismissKeyboard>
     )
 }
@@ -51,6 +58,10 @@ const styles = StyleSheet.create ({
     container: {
         flex: 1,    
     },
+    containerInput: {
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+    },
     image: {
         flex: 1,
         justifyContent: 'center',
@@ -76,6 +87,20 @@ const styles = StyleSheet.create ({
         width: 40,
         height: 40
     },
+    iconUser : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: '17%',
+        bottom: '50%'
+    },
+    iconLock : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: '17%',
+        bottom: '50%'
+    },
     input: {
         width: 300,
         height: 42,
@@ -85,7 +110,7 @@ const styles = StyleSheet.create ({
         fontSize: 15,
         alignSelf: 'center',
         marginBottom: 20,
-        paddingLeft: 20,
+        paddingLeft: 50,
         paddingRight: 20 
     },
     text: {