Merge pull request 'Login_Connection_View' (#5) from Login_Connection_View into master

Reviewed-on: #5

src/FLAD/App.tsx

@@ -1,27 +1,24 @@
-import { LinearGradient } from 'expo-linear-gradient';
-import { StatusBar } from 'expo-status-bar';
-import { useState, useTransition } from 'react';
-import FavoritePage from './screens/favoritePage';
-import { cards as cardArray } from './data/data'
 import Navigation from './navigation/Navigation';
-import { NavigationContainer } from '@react-navigation/native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Animated, Dimensions, ImageBackground, StyleSheet, Text, View } from 'react-native';
-import Card from './components/Card';
-import Login from './pages/login';
-import Spot from './pages/spot';
-
-
+import { StyleSheet,SafeAreaView } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import StartNavigation from './navigation/StartNavigation';
 
 export default function App() {
 
-const Stack = createBottomTabNavigator();
-
   return (
-    
-      <Navigation/>
+    <SafeAreaProvider>
+        <StartNavigation/>
+    </SafeAreaProvider>
+    // <SafeAreaView style={styles.mainSafeArea}>
+    //   {/* <Navigation/> */}
+    // </SafeAreaView>
 
   );
 }
 
-
+const styles = StyleSheet.create({
+  mainSafeArea: {
+    flex: 1,
+    backgroundColor: "#141414",
+  }
+});

src/FLAD/components/CardMusic.tsx

@@ -20,21 +20,22 @@ export default function CardMusic(CBP: CustomCardMusic) {
         </View>
     </View>
   );
-  }
+}
 
-  const styles = StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-      margin: 20
+    marginBottom: 15
   },
   imageContainer: {
     width: 80,
     height: 80,
     alignItems: 'center',
     justifyContent: 'center',
-      marginRight: 20
+    marginRight: 20,
+    marginLeft: 20
   },
   image: {
     width: '100%',
@@ -57,4 +58,4 @@ export default function CardMusic(CBP: CustomCardMusic) {
     color: 'white',
     fontSize: 16
   }
-  });
+});

src/FLAD/components/NextButton.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native';
+import Svg, { G, Circle } from 'react-native-svg';
+import { AntDesign } from '@expo/vector-icons';
+
+// @ts-ignore
+export default function NextButton({ percentage, scrollTo }) {
+    const size = 128;
+    const strokeWidth = 2;
+    const center = size / 2;
+    const radius = size / 2 - strokeWidth / 2;
+    const circumFerence = 2 * Math.PI * radius;
+
+    const progressAnimation = useRef(new Animated.Value(0)).current;
+    const progressRef = useRef(null);
+    // @ts-ignore
+    const animation = (toValue) => {
+        return Animated.timing(progressAnimation, {
+            toValue,
+            duration: 250,
+            useNativeDriver: true
+        }).start()
+    }
+
+    useEffect(() => {
+        animation(percentage);
+    }, [percentage]);
+
+    useEffect(() => {
+        progressAnimation.addListener(
+            (value) => {
+                const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100;
+
+                if (progressRef?.current) {
+                    // @ts-ignore
+                    progressRef.current.setNativeProps({
+                        strokeDashoffset,
+                    });
+                }
+
+            }, 
+            // @ts-ignore
+            [percentage]
+
+        );
+
+        return () => {
+            progressAnimation.removeAllListeners();
+        };
+
+    }, []);
+
+    return (
+        <View style={styles.container}>
+            <Svg width={size} height={size}>
+                <G rotation="-90" origin={center}>
+                    <Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
+                    <Circle
+                        ref={progressRef}
+                        stroke="#b50909"
+                        fill="#141414"
+                        cx={center}
+                        cy={center}
+                        r={radius}
+                        strokeWidth={strokeWidth}
+                        strokeDasharray={circumFerence}
+                    />
+                </G>
+            </Svg>
+            <TouchableOpacity onPress={scrollTo} style={styles.button} activeOpacity={0.6}>
+                <AntDesign name="arrowright" size={32} color="#fff" />
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    button: {
+        position: 'absolute',
+        backgroundColor: '#b50909',
+        borderRadius: 100,
+        padding: 20
+    }
+})

src/FLAD/components/Normalize.tsx

@@ -0,0 +1,18 @@
+import { Dimensions, Platform, PixelRatio } from 'react-native';
+
+const {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT,
+} = Dimensions.get('window');
+
+const scale = SCREEN_WIDTH / 480;
+
+// @ts-ignore
+export default function normalize(size) {
+  const newSize = size * scale 
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize))
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 3
+  }
+}

src/FLAD/components/Onboarding.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useRef } from 'react';
+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 normalize from '../components/Normalize';
+import OnboardingItem from './OnboardingItem';
+import Paginator from './Paginator';
+import NextButton from './NextButton';
+import slides from '../data/slides';
+
+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);
+    // @ts-ignore
+    const viewableItemsChanged = useRef(({ viewableItems }) => {
+        setCurrentIndex(viewableItems[0].index);
+    }).current;
+
+    const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
+
+    const scrollTo = () => {
+        if(currentIndex < slides.length - 1) {
+            // @ts-ignore
+            slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
+        } else {
+            setIsModalVisible(() => !isModalVisible);
+        }
+    };
+
+    return (
+        // @ts-ignore
+        <View style={styles.container}>
+            <View style={styles.balise}>
+                <FlatList 
+                    data={slides} 
+                    renderItem={({item}) => <OnboardingItem item={item} />} 
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    pagingEnabled
+                    bounces={false}
+                    keyExtractor={(item) => item.id}
+                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+                        useNativeDriver: false,
+                    })}
+                    scrollEventThrottle={32}
+                    onViewableItemsChanged={viewableItemsChanged}  
+                    viewabilityConfig={viewConfig}
+                    ref={slidesRef}
+                />   
+                <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}>
+                        <View style={styles.modalView}>
+                            <Text style={styles.versionText}>
+                                v2.0
+                            </Text>
+                            <TouchableOpacity onPress={handleModal} style={styles.closeButtonCircle}>
+                                <View>
+                                    <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(); 
+                                // @ts-ignore
+                                navigation.navigate('Login');         
+                            }}>
+                                <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
+                            </TouchableOpacity>
+                            <TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Inscription');}}>
+                                <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>
+                        </View>
+                    </ImageBackground>
+                </View>
+            </Modal>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#141414'
+    },
+    imageLogo: {
+        width: normalize(324),
+        height: normalize(162),
+        marginBottom: '25%'
+    },
+    balise: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: 50
+    },
+    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%',
+    },
+    modalView: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    backgroundImage: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+    imageButton: {
+        width: 20,
+        height: 20
+    },
+    versionText: {
+        position: 'absolute',
+        top: 50,
+        right: 10,
+        color: 'gray',
+        fontWeight: 'bold',
+        fontSize: normalize(17)
+    },
+    buttonConnection: {
+        width: 262,
+        height: 57,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#24CF5F',
+        borderRadius: 11,
+        borderColor: '#68F097',
+        borderWidth: 1,
+        marginBottom: 12
+    },
+    buttonInscription: {
+        width: 262,
+        height: 57,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#951DDE',
+        borderRadius: 11,
+        borderColor: '#C656ED',
+        borderWidth: 1,
+        marginBottom: 220
+    },
+    text: {
+        fontWeight: 'bold',
+        color: 'white',
+        fontSize: normalize(18)
+    },
+    button2Connection: {
+        width: '100%',
+        height: 80,
+        backgroundColor: '#232123',
+        borderTopColor: '#3C3C3C',
+        borderTopWidth: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        bottom: 40
+    }
+})

src/FLAD/components/OnboardingItem.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native';
+import normalize from '../components/Normalize';
+
+import slides from '../data/slides';
+
+// @ts-ignore
+export default function Onboarding({ item }) {
+    const { width } = useWindowDimensions();
+
+    return (
+        <View style={[styles.container, { width }]}>
+            <Image source={item.image} style={[styles.image, { width, resizeMode: 'contain'}]} />
+            <Text style={styles.title}>{item.title}</Text>
+            <Text style={styles.description}>{item.description}</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: -60
+    },
+    image: {
+        justifyContent: 'center'
+    },
+    title: {
+        fontWeight: '800',
+        fontSize: normalize(32),
+        marginBottom: 10,
+        color: 'white',
+        textAlign: 'left',
+        paddingRight: 30,
+        paddingLeft: 20,
+        marginTop: -80
+    },
+    description: {
+        fontWeight: '300',
+        color: 'white',
+        fontSize: normalize(16),
+        textAlign: 'left',
+        paddingRight: 30,
+        paddingLeft: 20
+    }
+})

src/FLAD/components/Paginator.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native';
+
+
+export default function Paginator({ data, scrollX }) {
+    const { width } = useWindowDimensions();
+
+    return (
+        <View style={{flexDirection: 'row', height: 64}}>
+            {data.map((_, i) => {
+                const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+
+                const dotWidth = scrollX.interpolate({
+                    inputRange,
+                    outputRange: [10, 20, 10],
+                    extrapolate: 'clamp',
+                })
+
+                const opacity = scrollX.interpolate({
+                    inputRange,
+                    outputRange: [0.3, 1, 0.3],
+                    extrapolate: 'clamp'
+                })
+
+                return <Animated.View 
+                    style={[
+                        styles.dot, 
+                        { 
+                            width: dotWidth,
+                            opacity,
+                        }
+                    ]} 
+                    key={i.toString()}
+                />
+            })}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    dot: {
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: "#fff",
+        marginHorizontal: 8
+    }
+})

src/FLAD/data/slides.tsx

@@ -0,0 +1,20 @@
+export default [
+    {
+    id: '1',
+    title: 'Bienvenue sur Flad',
+    description: 'L\'application pour découvrir de nouvelles musiques et vous faire de nouveaux amis',
+    image: require('../assets/images/Board_Image.png')
+    },
+    {
+    id: '2',
+    title: 'Tous les jours de nouvelles musiques qui peuvent vous plaire',
+    description: 'L\'application apprends de vous et de vos amis pour vous suggérer des albums et des musics',
+    image: require('../assets/images/Board_Image2.png')
+    },
+    {
+    id: '3',
+    title: 'La musique ça se partage',
+    description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques',
+    image: require('../assets/images/Board_Image3.png')
+    }
+]

src/FLAD/navigation/FavoriteNavigation.tsx

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import FavoritePage from '../screens/favoritePage';
+import { createStackNavigator } from '@react-navigation/stack';
+
+export default function MusicNavigation() {
+    const Stack = createStackNavigator();
+    return (
+      <Stack.Navigator initialRouteName="FavoritePage">
+        <Stack.Screen 
+          name="FavoritePage" 
+          component={FavoritePage} 
+          options={{ headerShown: false }}
+        />
+      </Stack.Navigator>
+    )
+  }

src/FLAD/navigation/Navigation.tsx

@@ -1,35 +1,60 @@
 import React, {Component} from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import Home from '../screens/spot';
-import FavoritePage from '../screens/favoritePage';
-import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import FavoriteNavigation from './FavoriteNavigation';
+// @ts-ignore
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
 
-export default function StackNavigation() {
-    const Stack = createBottomTabNavigator();
+export default function Navigation() {
+  const BottomTabNavigator = createBottomTabNavigator();
+  const MyTheme = {
+    dark: false,
+    colors: {
+      primary: 'rgb(255, 45, 85)',
+      card: 'rgb(35, 33, 35)',
+      border: 'rgb(35, 33, 35)',
+      text: 'rgb(138, 138, 138)',
+    }
+  };
   return (
-      <NavigationContainer>
-        <Stack.Navigator initialRouteName="Home"
+      // @ts-ignore
+      <NavigationContainer theme={MyTheme}>
+          <BottomTabNavigator.Navigator 
+            initialRouteName="Spots" 
             screenOptions={{
+              //tabBarShowLabel: false, //to remove the titles under the icons
+              tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 90, marginHorizontal: 25},
+              tabBarLabelStyle: { bottom: 5 }
 
             }}>
-          <Stack.Screen 
-            name="Home" 
-            component={FavoritePage} 
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen 
-            name="Favoris" 
-            component={FavoritePage} 
-            options={{ headerShown: false }}
-          />
-          <Stack.Screen 
-            name="Settings" 
-            component={FavoritePage} 
-            options={{ headerShown: false }}
-          />
-        </Stack.Navigator>
+              <BottomTabNavigator.Screen name="Spots" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="music" color={color}/>,
+                         }}/>
+              <BottomTabNavigator.Screen name="Favories" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
+                         }}/>
+              <BottomTabNavigator.Screen name="Messages" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="comment" color={color}/>,
+                         }}/>
+              <BottomTabNavigator.Screen name="Paramètres" component={FavoriteNavigation}
+                        options={{ 
+                            headerShown: false,
+                            tabBarIcon: ({color}) => <TabBarIcon name="cog" color={color}/>,
+                         }}/>
+          </BottomTabNavigator.Navigator>
       </NavigationContainer>
   )
-  }
+}
 
+function TabBarIcon(props: {
+    name: React.ComponentProps<typeof FontAwesome>['name'];
+    color: string;
+}) {
+    return <FontAwesome size={30} {...props} />;
+}

src/FLAD/navigation/StartNavigation.tsx

@@ -0,0 +1,32 @@
+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';
+
+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.Screen 
+            name="Inscription" 
+            component={InscriptionPage} 
+            options={{ headerShown: false }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+
+    )
+  }

src/FLAD/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@react-navigation/bottom-tabs": "^6.5.4",
-    "@react-navigation/native": "^6.1.3",
+    "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.8",
     "@react-navigation/stack": "^6.3.12",
-    "expo": "~47.0.12",
-    "expo-cli": "^6.2.1",
     "axios": "^1.2.6",
+    "expo": "~47.0.12",
     "expo-auth-session": "~3.8.0",
+    "expo-cli": "^6.3.0",
     "expo-haptics": "~12.0.1",
     "expo-linear-gradient": "~12.0.1",
     "expo-location": "~15.0.1",
@@ -27,10 +27,15 @@
     "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-safe-area-context": "^4.4.1",
     "react-native-screens": "~3.18.0",
+    "react-native-svg": "13.4.0",
+    "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.9",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1",
     "rive-react-native": "^3.0.41"
   },
   "devDependencies": {

src/FLAD/screens/InscriptionPage.tsx

@@ -0,0 +1,164 @@
+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";
+import normalize from '../components/Normalize';
+
+// @ts-ignore
+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>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
+                    </View>
+                    <View>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
+                    </View>
+                    <View>
+                        <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.connectionText}>
+                        <Text style={{fontSize: normalize(18), color: 'white'}}>Tu as déjà un compte? </Text>
+                        <TouchableOpacity 
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('Login')}
+                        >
+                            <Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
+                        </TouchableOpacity>
+                    </View>
+                </ImageBackground>
+            </View>
+        </DismissKeyboard>
+    )
+}
+
+const styles = StyleSheet.create ({
+    container: {
+        flex: 1   
+    },
+    image: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    imageLogo: {
+        width: normalize(324),
+        height: normalize(162),
+        alignSelf: 'center',
+        marginBottom: 50,
+        marginTop: -20
+    },
+    button: {
+        marginTop: '10%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        backgroundColor: 'white',
+        width: normalize(100),
+        height: normalize(100),
+        borderRadius: 21
+    },
+    buttonImage: {
+        width: normalize(46),
+        height: normalize(46),
+    },
+    versionText: {
+        position: 'absolute',
+        top: 40,
+        right: 20,
+        color: 'gray',
+        fontWeight: 'bold',
+        fontSize: normalize(17)
+    },
+    text: {
+        fontWeight: 'bold',
+        fontSize: normalize(29),
+        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: normalize(350),
+        height: normalize(50),
+        borderRadius: 30,
+        color: 'black',
+        backgroundColor: 'white',
+        alignSelf: 'center',
+        marginBottom: 20,
+        paddingLeft: 50,
+        paddingRight: 20 
+    },
+    iconUser : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: normalize(80),
+        bottom: '50%'
+    },
+    iconLock : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: normalize(80),
+        bottom: '50%'
+    },
+    connectionText: {
+        flexDirection: 'row', 
+        alignSelf: 'center', 
+        bottom: '-20%'
+    },
+    buttonSpotify: {
+        width: normalize(350),
+        height: normalize(50),
+        backgroundColor: '#24CF5F',
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'center',
+        borderRadius: 30,
+        flexDirection: 'row'
+    }
+})

src/FLAD/screens/favoritePage.tsx

@@ -1,17 +1,18 @@
 import React, {Component} from 'react';
-import { Animated, StyleSheet, Text, View, FlatList, ScrollView, TouchableHighlight } from 'react-native';
-import Card from '../components/Card';
+import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';
 import CardMusic from '../components/CardMusic';
-import Music from '../model/Music'
+import Music from '../Model/Music'
 
 export default function favoritePage() {
     const MUSIC_LIST : Music[] = [
         new Music("La pharmacie", "Jul",require("../assets/images/jul.png")),
         new Music("Deux frères", "PNL", require("../assets/images/pnl.png")),
+        new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"),
         new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"),
         new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"),
         new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"),
         new Music("Blanka", "PNL", require("../assets/images/pnl.png")),
+        new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"),
       ]
     return (
         <View style={styles.body}>
@@ -19,9 +20,9 @@ export default function favoritePage() {
                 <Text style={styles.title}>Favoris</Text>
                 <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
             </View>
-            <ScrollView style={styles.scroll}>
+            <ScrollView>
                 <View>
-                    <FlatList
+                    <FlatList style={{marginBottom: 80}}
                         data={MUSIC_LIST}
                         renderItem={({ item }) => (
                             //<TouchableHighlight onPress={() => navigation.navigate("")}>
@@ -38,11 +39,13 @@ export default function favoritePage() {
 
 const styles = StyleSheet.create({
     body: {
-        backgroundColor: "#141414"
+        flex: 1,
+        justifyContent: 'center',
+        backgroundColor: "#141414",
     },
     titleContainer: {
+        marginTop: 20,
         marginLeft: 20,
-        marginVertical: 50,
     },
     title: {
         fontSize: 24,
@@ -53,8 +56,6 @@ const styles = StyleSheet.create({
         marginTop: 10,
         fontSize: 18,
         color: '#787878',
-    },
-    scroll: {
-        marginBottom: 120,
+        marginBottom: 20
     }
 });

src/FLAD/screens/loginPage.tsx

@@ -0,0 +1,168 @@
+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";
+import normalize from '../components/Normalize';
+
+// @ts-ignore
+const DismissKeyboard = ({ children }) => (
+    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+        {children}
+    </TouchableWithoutFeedback>
+)
+
+export default function loginPage() {
+    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}>SE CONNECTER</Text>
+                    <View>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
+                    </View>
+                    <View>
+                        <TextInput style={[styles.input, styles.shadow]}/>
+                        <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
+                    </View>
+                    <View style={styles.rememberMeContainer}>
+                        <TouchableOpacity style={[styles.checkbox, rememberMe ? styles.checkboxChecked : null]} onPress={toggleRememberMe}></TouchableOpacity>
+                        <Text style={styles.rememberMeText}>SE SOUVENIR DE MOI</Text>
+                    </View>
+                    <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
+                        <Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/>
+                    </TouchableOpacity>
+                    <View style={styles.inscriptionText}>
+                        <Text style={{fontSize: normalize(18), color: 'white'}}>Tu n'as pas de compte? </Text>
+                        <TouchableOpacity 
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('Inscription')}
+                        >
+                            <Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
+                        </TouchableOpacity>
+                    </View>
+                </ImageBackground>
+            </View>
+        </DismissKeyboard>
+    )
+}
+
+
+
+const styles = StyleSheet.create ({
+    container: {
+        flex: 1,    
+    },
+    image: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    imageLogo: {
+        width: normalize(324),
+        height: normalize(162),
+        alignSelf: 'center',
+        marginBottom: '25%'
+    },
+    button: {
+        marginTop: '10%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'center',
+        backgroundColor: 'white',
+        width: normalize(100),
+        height: normalize(100),
+        borderRadius: 21
+    },
+    buttonImage: {
+        width: normalize(46),
+        height: normalize(46),
+    },
+    iconUser : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: normalize(80),
+        bottom: '50%'
+    },
+    iconLock : {
+        position: 'absolute',
+        width: 20,
+        height: 20,
+        left: normalize(80),
+        bottom: '50%'
+    },
+    input: {
+        width: normalize(350),
+        height: normalize(50),
+        borderRadius: 30,
+        color: 'black',
+        backgroundColor: 'white',
+        alignSelf: 'center',
+        marginBottom: 20,
+        paddingLeft: 50,
+        paddingRight: 20 
+    },
+    text: {
+        fontWeight: 'bold',
+        fontSize: normalize(29),
+        alignSelf: 'center',
+        color: 'white',
+        marginBottom: 15
+    },
+    shadow: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 2,
+          height: 3,
+        },
+        shadowOpacity: 0.50,
+        shadowRadius: 3.84,
+    },
+    versionText: {
+        position: 'absolute',
+        top: 40,
+        right: 20,
+        color: 'gray',
+        fontWeight: 'bold',
+        fontSize: normalize(17)
+    },
+    rememberMeContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'center',
+        marginBottom: '5%',
+        marginTop: normalize(10)
+    },
+    checkbox: {
+        width: 20,
+        height: 20,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: 'gray',
+        marginRight: 10
+    },
+    rememberMeText: {
+        fontWeight: 'bold',
+        fontSize: normalize(19),
+        color: 'white'
+    },
+    checkboxChecked: {
+        backgroundColor: 'white'
+    },
+    inscriptionText: {
+        flexDirection: 'row', 
+        alignSelf: 'center', 
+        bottom: '-20%'
+    }
+})