Merge pull request 'Settings_Binding_ReadMe' (#10) from Settings_Binding_ReadMe into master

Reviewed-on: #10

README.md

@@ -7,7 +7,7 @@
 **Nom de l’application** : FLAD :musical_note:
 </br>
 
-**Thème de l’application** :  Réseau social cross-plateforme dans le thème de la musique destiné aux utilisateurs d'appareils mobiles.
+**Thème de l’application** :  Il s'agit d'un réseau social cross-plateforme axé sur la musique et destiné aux utilisateurs de terminaux mobiles. Son objectif est de permettre aux utilisateurs situés à moins de 100 mètres les uns des autres de visualiser les musiques écoutées par chacun. Ils pourront faire connaissance grâce à un chat et, qui sait, devenir amis. :grin:
 </br>
 
 **Contexte** : 👇
@@ -19,9 +19,9 @@
 
 La racine de notre gitlab est composée de deux dossiers essentiels au projet:
 
-[**src**](src) : **Toute la partie codage de l'application web**
+[**src**](src) : **Toute la partie codage de l'application mobile** (contient un dossier API pour l'API FLAD qui effectue les requêtes vers l'API SPOTIFY et la base de données, ainsi qu'un dossier FLAD qui contient toute la partie côté client de l'application)
 
-[**doc**](doc) : **Documentation de l'application**
+[**doc**](doc) : **Documentation de l'application** 
 
 ## Fonctionnement
 
@@ -76,6 +76,18 @@ Maintenant vous pouvez à tout moment lancer l'application grâce à la commande
 <br>
 :information_source: *Cliquer sur la touche 'w' si vous voulez le visualiser sur un navigateur (ce que je ne conseille pas) ou installer l'application 'Expo go' de votre téléphone et scanner le QR code proposer pour le visualiser (à noter que l'ordinateur dans lequel il se voit lancer doit être dans le même réseau local que votre téléphone)*
 
+- ### Comment s'inscrire sur l'application ? 
+
+Tout d'abord, il faut fournir votre *adresse e-mail* et votre *nom Spotify* aux **techniciens de l'application** (voir plus bas). Ils s'occuperont de vous ajouter définitivement à l'application. Une fois que cela est fait, inscrivez-vous via la **page d'inscription** de l'application en cliquant d'abord sur le bouton 'lier mon compte':
+
+<div align = center>
+
+<img src="doc/Images/Real_RegisterPage.JPG" width="250" >
+
+</div>
+
+
+Vous serez normalement redirigé sur la page Spotify où vous devrez vous connecter. Une fois connecté, entrez votre nom, votre adresse e-mail et votre mot de passe en tant qu'utilisateur FLAD (n'oubliez pas ces informations car vous en aurez besoin pour vous connecter). Ensuite, cliquez sur le bouton 'suivant' et bienvenue sur l'application !
 
 ## Environnement de Travail
 
@@ -102,9 +114,9 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇
 
 La composition pour le projet se voit réaliser par deux élèves de l'IUT d'Aubière:
 <br>
-⚙️ Emre KARTAL
+⚙️ Emre KARTAL : emre.kartal@etu.uca.fr
 <br>
-⚙️ David D'ALMEIDA
+⚙️ David D'ALMEIDA : david.d_almeida@etu.uca.fr
 
 <div align = center>
 © PM2 (Projet inspiré par nos très chers développeurs de la Dafl Team (S.O les Dafl dev))

src/FLAD/components/AnimatedParalax.tsx

@@ -1,6 +1,4 @@
-import { SharedElement } from "react-navigation-shared-element";
-import { NavigationProp, RouteProp } from "@react-navigation/native";
-import { View,Image,StyleSheet, Dimensions, useWindowDimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, withTiming } from "react-native-reanimated";
 
 interface SpotProps {

src/FLAD/components/Artist.tsx

@@ -1,7 +1,6 @@
-import { View, StyleSheet, Dimensions, Image, Pressable, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight } from "react-native";
+import { View, StyleSheet, Dimensions, Image, TouchableOpacity } from "react-native";
 import Animated, {
     Layout,
-    Transition,
     ZoomIn,
     ZoomOut,
   } from "react-native-reanimated";

src/FLAD/components/Card.tsx

@@ -1,12 +1,9 @@
-import { View, Text, Image , Dimensions, StyleSheet } from 'react-native'
-import React, { useRef, useState } from 'react'
+import { View, Image , Dimensions, StyleSheet } from 'react-native'
+import React from 'react'
 import Animated,{ Extrapolate, interpolate, runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 
 import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
-import * as Haptics from 'expo-haptics';
 
-const {width : wWidht} = Dimensions.get("window");
-const SCREEN_HEIGHT = Dimensions.get('window').height
 const SCREEN_WIDTH = Dimensions.get('window').width
 // const width = wWidht *0.75;
 // const height = wWidht * (465/264);

src/FLAD/components/FladLoadingScreen.tsx

@@ -76,7 +76,7 @@ const FladLoading = () => {
 
     
     return (
-      <View style={{flex : 1, justifyContent : 'center', alignItems :'center'}}>
+      <View style={{ justifyContent : 'center', alignItems :'center'}}>
     
         <Animated.View style={[{backgroundColor : '#B40404', justifyContent : 'center', alignItems : 'center'}, breatheStyleSquare]}>
             <Animated.Image source={require('../assets/icons/icon.png')} style={[{height: size, width : size, borderColor : '#fff',borderRadius : size/2}]}/>

src/FLAD/components/HalfCircle.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { View, Text, Image, Animated ,PanResponder, Dimensions, StyleSheet, ImageBackground, Button, Pressable, TextInput } from 'react-native'
+import { View, StyleSheet } from 'react-native'
 
 interface HalfCirlceProps {
     backgroundColor : string;

src/FLAD/components/Onboarding.tsx

@@ -180,20 +180,20 @@ const styles = StyleSheet.create({
     },
     button2Connection: {
         width: '100%',
-        height: 80,
+        height: normalize(92),
         backgroundColor: '#232123',
         borderTopColor: '#3C3C3C',
         borderTopWidth: 1,
         justifyContent: 'center',
         alignItems: 'center',
         position: 'absolute',
-        bottom: normalize(46)
+        bottom: normalize(0)
     },
     mascot: {
         width: normalize(130),
         height: normalize(130),
         position: 'absolute',
-        bottom: normalize(140),
+        bottom: normalize(90),
         right: normalize(0)
     }
 })

src/FLAD/data/data.ts

@@ -1,34 +1,41 @@
 export const cards = [{
-  name : "blue",
+  musicName : "Je bibi",
+  name : "Kaaris",
   sourceUrl : "https://th.bing.com/th/id/R.dbf87f0d8cbfd078ab6a589a5d921994?rik=1%2f6KliMpOAeh8A&pid=ImgRaw&r=0",
   index : 4
 },
 {
-  name : "her",
+  musicName : "Breathin",
+  name : "Ariana Grande",
   sourceUrl : "https://i.ebayimg.com/images/g/rY0AAOSw97djEo2C/s-l500.jpg",
   index : 9
 },
 {
+  musicName : "Zombies",
   name : "gambino",
   sourceUrl : "https://th.bing.com/th/id/R.0b2d1a59bfda9b1a49ecb561e08535a8?rik=Xyc35OZU%2f6VOVw&pid=ImgRaw&r=0",
   index : 3
 },
 {
+  musicName : "Bambina",
   name : "PNL",
   sourceUrl : "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png",
   index : 10
 },
 {
-  name : "Freeze Raël",
+  musicName : "Freeze Raël",
+  name : "Freeze Corleone",
   sourceUrl : "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png",
   index : 23
 },
 {
+  musicName : "Autobahn",
   name : "Sch",
   sourceUrl : "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg",
   index : 44
 },
 {
+  musicName : "Lakehouse",
   name : "Stratos",
   sourceUrl : "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png",
   index : 89

src/FLAD/navigation/AuthNavigation.tsx

@@ -47,9 +47,9 @@ export default function AuthNavigation() {
         <>
                  {isLogin ? (
          /* {userToken != null ? ( */
-        <SafeAreaView style={styles.mainSafeArea} >
+        <SafeAreaProvider>
             <Navigation/>
-        </SafeAreaView>
+        </SafeAreaProvider>
     
         ) : 
         <SafeAreaProvider >
@@ -59,9 +59,3 @@ export default function AuthNavigation() {
     </>
     )
   }
-  const styles = StyleSheet.create({
-    mainSafeArea: {
-      flex: 1,
-      backgroundColor: "#141414",
-    }
-  });

src/FLAD/navigation/Navigation.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
 import FavoriteNavigation from './FavoriteNavigation';
 import SettingNavigation from './SettingNavigation';
-import Spot from '../screens/spot';
 
+import normalize from '../components/Normalize';
 // @ts-ignore
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import SpotNavigation from './SpotNavigation';
@@ -29,14 +30,17 @@ export default function Navigation() {
             initialRouteName="Spots" 
             screenOptions={{
               //tabBarShowLabel: false, //to remove the titles under the icons
-              tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 30, marginHorizontal: 25},
-              tabBarLabelStyle: { bottom: 5 }
+              tabBarStyle: styles.tabBar,
+              ...(Platform.OS === 'android' 
+              ? { tabBarLabelStyle: { bottom: normalize(10) } }
+              : { tabBarLabelStyle: { bottom: normalize(-22) } }
+            ),
 
             }}>
               <BottomTabNavigator.Screen name="Spots" component={SpotNavigation}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="music" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="music" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Favorites" component={FavoriteNavigation}
                         options={{
@@ -45,17 +49,17 @@ export default function Navigation() {
                           tabBarBadge : 2,
                           tabBarBadgeStyle : {backgroundColor : 'yellow'}, 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="heart" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Messages" component={Login}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="comment" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="comment" color={color}/></View>,
                          }}/>
               <BottomTabNavigator.Screen name="Setting" component={SettingNavigation}
                         options={{ 
                             headerShown: false,
-                            tabBarIcon: ({color}) => <TabBarIcon name="cog" color={color}/>,
+                            tabBarIcon: ({color}) => <View style={styles.IconContainer}><TabBarIcon name="cog" color={color}/></View>,
                          }}/>
           </BottomTabNavigator.Navigator>
       </NavigationContainer>
@@ -67,4 +71,18 @@ function TabBarIcon(props: {
     color: string;
 }) {
     return <FontAwesome size={30} {...props} />;
-}
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    height: 60, 
+    position: 'absolute', 
+    bottom: normalize(50), 
+    borderRadius: 30, 
+    marginHorizontal: 25
+  },
+  IconContainer: {
+    position: 'absolute', 
+    top: 5, 
+  }
+})

src/FLAD/screens/Favorite.tsx

@@ -1,5 +1,5 @@
 import React, { useState} from 'react';
-import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity } from 'react-native';
+import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, SafeAreaView } from 'react-native';
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'
@@ -39,33 +39,39 @@ export default function favoritePage() {
 
     return (
         <View style={styles.body}>
-            <View style={styles.titleContainer}>
-                <Text style={styles.title}>Favoris</Text>
-                <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
-            </View>
-            <ScrollView>
-                <View>
-                    <FlatList style={{marginBottom: 80}}
-                        data={MUSIC_LIST}
-                        renderItem={({ item }) => (
-                            //<TouchableHighlight onPress={() => navigation.navigate("")}>
-                                <CardMusic image={item.image} title={item.title} description={item.bio}/>
-                            //</TouchableHighlight>
-                        )}
-                        keyExtractor={(item: Music) => item.title }
-                    />
+            <SafeAreaView style={styles.mainSafeArea}>
+                <View style={styles.titleContainer}>
+                    <Text style={styles.title}>Favoris</Text>
+                    <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
                 </View>
-                <TouchableOpacity style={[styles.button, styles.shadow]} 
-                    // @ts-ignore
-                    onPress={() => navigation.navigate('Genre')}>
-                        <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
-                    </TouchableOpacity>
-            </ScrollView>
+                <ScrollView>
+                    <View>
+                        <FlatList style={{marginBottom: 80}}
+                            data={MUSIC_LIST}
+                            renderItem={({ item }) => (
+                                //<TouchableHighlight onPress={() => navigation.navigate("")}>
+                                <CardMusic image={item.image} title={item.title} description={item.bio}/>
+                                //</TouchableHighlight>
+                                )}
+                                keyExtractor={(item: Music) => item.title }
+                                />
+                    </View>
+                    <TouchableOpacity style={[styles.button, styles.shadow]} 
+                        // @ts-ignore
+                        onPress={() => navigation.navigate('Genre')}>
+                            <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
+                        </TouchableOpacity>
+                </ScrollView>
+            </SafeAreaView>
         </View>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     body: {
         flex: 1,
         justifyContent: 'center',

src/FLAD/screens/Register.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native';
+import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity, Platform } from 'react-native';
 import {useNavigation} from "@react-navigation/native";
 import normalize from '../components/Normalize';
 import * as SecureStore from 'expo-secure-store';
 import * as AuthSession from 'expo-auth-session';
-import axios from 'axios';
 import * as WebBrowser from 'expo-web-browser';
 import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
 import { registerUser } from '../redux/thunk/authThunk';

src/FLAD/screens/Setting.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, TouchableHighlight } from 'react-native';
+import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, SafeAreaView } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import {useNavigation} from "@react-navigation/native";
 
@@ -43,106 +43,112 @@ export default function Setting() {
         () => setIsCheckedLocalisation(value => !value);
     return (
         <DismissKeyboard>
-            <ScrollView>
-                <View style={styles.container}>
-                    <Text style={styles.title}>Réglages</Text>
-                    <View style={styles.search}>
-                        <TouchableOpacity onPress={handleSvgPress}>
-                            <Svg width="21" height="21" style={{marginHorizontal: normalize(10)}} viewBox="0 0 21 21" fill="none">
-                                <Path d="M13.5625 12.25H12.8713L12.6263 12.0137C13.4838 11.0162 14 9.72125 14 8.3125C14 5.17125 11.4537 2.625 8.3125 2.625C5.17125 2.625 2.625 5.17125 2.625 8.3125C2.625 11.4537 5.17125 14 8.3125 14C9.72125 14 11.0162 13.4838 12.0137 12.6263L12.25 12.8713V13.5625L16.625 17.9287L17.9287 16.625L13.5625 12.25ZM8.3125 12.25C6.13375 12.25 4.375 10.4913 4.375 8.3125C4.375 6.13375 6.13375 4.375 8.3125 4.375C10.4913 4.375 12.25 6.13375 12.25 8.3125C12.25 10.4913 10.4913 12.25 8.3125 12.25Z" fill="#828288"/>
+            <SafeAreaView style={styles.mainSafeArea}>
+                <ScrollView>
+                    <View style={styles.container}>
+                        <Text style={styles.title}>Réglages</Text>
+                        <View style={styles.search}>
+                            <TouchableOpacity onPress={handleSvgPress}>
+                                <Svg width="21" height="21" style={{marginHorizontal: normalize(10)}} viewBox="0 0 21 21" fill="none">
+                                    <Path d="M13.5625 12.25H12.8713L12.6263 12.0137C13.4838 11.0162 14 9.72125 14 8.3125C14 5.17125 11.4537 2.625 8.3125 2.625C5.17125 2.625 2.625 5.17125 2.625 8.3125C2.625 11.4537 5.17125 14 8.3125 14C9.72125 14 11.0162 13.4838 12.0137 12.6263L12.25 12.8713V13.5625L16.625 17.9287L17.9287 16.625L13.5625 12.25ZM8.3125 12.25C6.13375 12.25 4.375 10.4913 4.375 8.3125C4.375 6.13375 6.13375 4.375 8.3125 4.375C10.4913 4.375 12.25 6.13375 12.25 8.3125C12.25 10.4913 10.4913 12.25 8.3125 12.25Z" fill="#828288"/>
+                                </Svg>
+                            </TouchableOpacity>
+                            <TextInput placeholderTextColor="#828288" ref={textInputRef} placeholder='Recherche' style={styles.inputSearch}></TextInput>
+                            <Svg width="19" height="19" viewBox="0 0 19 19" fill="none">
+                                <Path d="M13.6563 8.3125V10.0938C13.6563 11.1961 13.2184 12.2532 12.4389 13.0327C11.6595 13.8121 10.6023 14.25 9.5 14.25C8.39769 14.25 7.34054 13.8121 6.56109 13.0327C5.78164 12.2532 5.34375 11.1961 5.34375 10.0938V8.3125H4.15625V10.0938C4.15687 11.4078 4.64161 12.6755 5.51785 13.6547C6.39409 14.6339 7.60038 15.2559 8.90625 15.4019V16.625H6.53125V17.8125H12.4688V16.625H10.0938V15.4019C11.3996 15.2559 12.6059 14.6339 13.4822 13.6547C14.3584 12.6755 14.8431 11.4078 14.8438 10.0938V8.3125H13.6563Z" fill="#828288"/>
+                                <Path d="M9.5 13.0625C10.2874 13.0625 11.0425 12.7497 11.5992 12.193C12.156 11.6362 12.4688 10.8811 12.4688 10.0938V4.15625C12.4688 3.36889 12.156 2.61378 11.5992 2.05703C11.0425 1.50028 10.2874 1.1875 9.5 1.1875C8.71264 1.1875 7.95753 1.50028 7.40078 2.05703C6.84403 2.61378 6.53125 3.36889 6.53125 4.15625V10.0938C6.53125 10.8811 6.84403 11.6362 7.40078 12.193C7.95753 12.7497 8.71264 13.0625 9.5 13.0625Z" fill="#828288"/>
                             </Svg>
-                        </TouchableOpacity>
-                        <TextInput placeholderTextColor="#828288" ref={textInputRef} placeholder='Recherche' style={styles.inputSearch}></TextInput>
-                        <Svg width="19" height="19" viewBox="0 0 19 19" fill="none">
-                            <Path d="M13.6563 8.3125V10.0938C13.6563 11.1961 13.2184 12.2532 12.4389 13.0327C11.6595 13.8121 10.6023 14.25 9.5 14.25C8.39769 14.25 7.34054 13.8121 6.56109 13.0327C5.78164 12.2532 5.34375 11.1961 5.34375 10.0938V8.3125H4.15625V10.0938C4.15687 11.4078 4.64161 12.6755 5.51785 13.6547C6.39409 14.6339 7.60038 15.2559 8.90625 15.4019V16.625H6.53125V17.8125H12.4688V16.625H10.0938V15.4019C11.3996 15.2559 12.6059 14.6339 13.4822 13.6547C14.3584 12.6755 14.8431 11.4078 14.8438 10.0938V8.3125H13.6563Z" fill="#828288"/>
-                            <Path d="M9.5 13.0625C10.2874 13.0625 11.0425 12.7497 11.5992 12.193C12.156 11.6362 12.4688 10.8811 12.4688 10.0938V4.15625C12.4688 3.36889 12.156 2.61378 11.5992 2.05703C11.0425 1.50028 10.2874 1.1875 9.5 1.1875C8.71264 1.1875 7.95753 1.50028 7.40078 2.05703C6.84403 2.61378 6.53125 3.36889 6.53125 4.15625V10.0938C6.53125 10.8811 6.84403 11.6362 7.40078 12.193C7.95753 12.7497 8.71264 13.0625 9.5 13.0625Z" fill="#828288"/>
-                        </Svg>
-                    </View>
-                    <TouchableOpacity onPress={() => navigation.navigate('SettingProfil')}>
-                        <View style={styles.profil}>
-                            <Image source={require('../assets/icons/icons/IconProfil.png')} style={styles.imageProfil}/>
-                            <View style={styles.profilContainer}>
-                                <Text style={styles.NameProfil}>Emre KARTAL</Text>
-                                <Text style={styles.description}>id. Spotify, mail et mot de passe</Text>
-                            </View>
-                            <Image style={styles.buttonSetting} source={require('../assets/icons/icons/buttonProfil.png')}/>    
                         </View>
-                    </TouchableOpacity>
-                    
-                    <View style={styles.body}>
-                        <View style={styles.Option}>
-                            <View style={styles.view}>
-                                <Svg width="23" height="22" viewBox="0 0 23 18" fill="none">
-                                    <Path d="M1 8.63636C1 8.63636 4.81818 1 11.5 1C18.1818 1 22 8.63636 22 8.63636" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <Path d="M1 8.63635C1 8.63635 4.81818 16.2727 11.5 16.2727C18.1818 16.2727 22 8.63635 22 8.63635" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <Path d="M11.4997 11.5C13.0813 11.5 14.3634 10.2179 14.3634 8.63634C14.3634 7.0548 13.0813 5.77271 11.4997 5.77271C9.9182 5.77271 8.63611 7.0548 8.63611 8.63634C8.63611 10.2179 9.9182 11.5 11.4997 11.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                                </Svg>                            
-                            </View>
-                            <View style={styles.firstOptionView}>
-                                <Text style={styles.textOption}>Dark Mode</Text>
-                                <Switch style={{marginBottom: normalize(10), marginRight: 20}} value={isCheckedDarkMode} onValueChange={toggleDarkMode}/>    
+                        <TouchableOpacity onPress={() => navigation.navigate('SettingProfil')}>
+                            <View style={styles.profil}>
+                                <Image source={require('../assets/icons/icons/IconProfil.png')} style={styles.imageProfil}/>
+                                <View style={styles.profilContainer}>
+                                    <Text style={styles.NameProfil}>Emre KARTAL</Text>
+                                    <Text style={styles.description}>id. Spotify, mail et mot de passe</Text>
+                                </View>
+                                <Image style={styles.buttonSetting} source={require('../assets/icons/icons/buttonProfil.png')}/>    
                             </View>
-                        </View>
-                        <View style={styles.secondOption}>
-                            <View style={styles.notification}>
-                                <Svg width="23" height="22" viewBox="0 0 1242 1242">
-                                    <Path d="M620.553 1181.81C642.27 1181.31 663.11 1173.14 679.388 1158.76C695.665 1144.37 706.331 1124.69 709.498 1103.2H528.159C531.416 1125.28 542.581 1145.42 559.577 1159.88C576.572 1174.34 598.241 1182.13 620.553 1181.81Z" fill="white"/>
-                                    <Path d="M1132.51 969.785L1120.79 959.443C1087.53 929.815 1058.43 895.838 1034.25 858.43C1007.85 806.806 992.03 750.428 987.712 692.605V522.298C987.572 501.611 985.727 480.971 982.196 460.587C923.799 448.585 871.344 416.77 833.712 370.531C796.079 324.292 775.582 266.468 775.69 206.851C775.69 199.611 775.69 192.371 775.69 185.131C739.695 167.417 701.023 155.769 661.233 150.656V107.217C661.233 95.011 656.384 83.3046 647.752 74.6733C639.121 66.0421 627.415 61.1931 615.208 61.1931C603.002 61.1931 591.295 66.0421 582.664 74.6733C574.033 83.3046 569.184 95.011 569.184 107.217V152.38C480.09 164.948 398.552 209.324 339.622 277.315C280.692 345.307 248.349 432.323 248.565 522.298V692.605C244.247 750.428 228.424 806.806 202.024 858.43C178.266 895.745 149.628 929.716 116.87 959.443L105.149 969.785V1067.01H1132.51V969.785Z" fill="white"/>
-                                    <Path d="M1034.25 379.226C1129.45 379.226 1206.63 302.051 1206.63 206.851C1206.63 111.65 1129.45 34.4751 1034.25 34.4751C939.053 34.4751 861.878 111.65 861.878 206.851C861.878 302.051 939.053 379.226 1034.25 379.226Z" fill="white"/>
-                                </Svg>
+                        </TouchableOpacity>
+                        
+                        <View style={styles.body}>
+                            <View style={styles.Option}>
+                                <View style={styles.view}>
+                                    <Svg width="23" height="22" viewBox="0 0 23 18" fill="none">
+                                        <Path d="M1 8.63636C1 8.63636 4.81818 1 11.5 1C18.1818 1 22 8.63636 22 8.63636" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <Path d="M1 8.63635C1 8.63635 4.81818 16.2727 11.5 16.2727C18.1818 16.2727 22 8.63635 22 8.63635" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                        <Path d="M11.4997 11.5C13.0813 11.5 14.3634 10.2179 14.3634 8.63634C14.3634 7.0548 13.0813 5.77271 11.4997 5.77271C9.9182 5.77271 8.63611 7.0548 8.63611 8.63634C8.63611 10.2179 9.9182 11.5 11.4997 11.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </Svg>                            
+                                </View>
+                                <View style={styles.firstOptionView}>
+                                    <Text style={styles.textOption}>Dark Mode</Text>
+                                    <Switch style={{marginBottom: normalize(10), marginRight: 20}} value={isCheckedDarkMode} onValueChange={toggleDarkMode}/>    
+                                </View>
                             </View>
-                            <View style={styles.secondOptionView}>
-                                <Text style={styles.textOption}>Notification</Text>
-                                <Switch style={{marginBottom: normalize(10), marginRight: 20}} value={isCheckedNotif} onValueChange={toggleNotif}/>    
+                            <View style={styles.secondOption}>
+                                <View style={styles.notification}>
+                                    <Svg width="23" height="22" viewBox="0 0 1242 1242">
+                                        <Path d="M620.553 1181.81C642.27 1181.31 663.11 1173.14 679.388 1158.76C695.665 1144.37 706.331 1124.69 709.498 1103.2H528.159C531.416 1125.28 542.581 1145.42 559.577 1159.88C576.572 1174.34 598.241 1182.13 620.553 1181.81Z" fill="white"/>
+                                        <Path d="M1132.51 969.785L1120.79 959.443C1087.53 929.815 1058.43 895.838 1034.25 858.43C1007.85 806.806 992.03 750.428 987.712 692.605V522.298C987.572 501.611 985.727 480.971 982.196 460.587C923.799 448.585 871.344 416.77 833.712 370.531C796.079 324.292 775.582 266.468 775.69 206.851C775.69 199.611 775.69 192.371 775.69 185.131C739.695 167.417 701.023 155.769 661.233 150.656V107.217C661.233 95.011 656.384 83.3046 647.752 74.6733C639.121 66.0421 627.415 61.1931 615.208 61.1931C603.002 61.1931 591.295 66.0421 582.664 74.6733C574.033 83.3046 569.184 95.011 569.184 107.217V152.38C480.09 164.948 398.552 209.324 339.622 277.315C280.692 345.307 248.349 432.323 248.565 522.298V692.605C244.247 750.428 228.424 806.806 202.024 858.43C178.266 895.745 149.628 929.716 116.87 959.443L105.149 969.785V1067.01H1132.51V969.785Z" fill="white"/>
+                                        <Path d="M1034.25 379.226C1129.45 379.226 1206.63 302.051 1206.63 206.851C1206.63 111.65 1129.45 34.4751 1034.25 34.4751C939.053 34.4751 861.878 111.65 861.878 206.851C861.878 302.051 939.053 379.226 1034.25 379.226Z" fill="white"/>
+                                    </Svg>
+                                </View>
+                                <View style={styles.secondOptionView}>
+                                    <Text style={styles.textOption}>Notification</Text>
+                                    <Switch style={{marginBottom: normalize(10), marginRight: 20}} value={isCheckedNotif} onValueChange={toggleNotif}/>    
+                                </View>
                             </View>
-                        </View>
-                        <View style={styles.lastOption}>
-                            <View style={styles.localisation}>
-                                <Svg width="24" height="23" viewBox="0 0 472 420" fill="none">
-                                    <Path d="M235.735 0C178.774 0 132.601 46.1729 132.601 103.134C132.601 149.184 200.006 233.115 225.83 263.581C231.061 269.752 240.416 269.752 245.639 263.581C271.463 233.115 338.868 149.184 338.868 103.134C338.868 46.1729 292.696 0 235.735 0ZM235.735 137.512C216.745 137.512 201.357 122.124 201.357 103.134C201.357 84.1441 216.745 68.7559 235.735 68.7559C254.724 68.7559 270.112 84.1441 270.112 103.134C270.112 122.124 254.724 137.512 235.735 137.512ZM16.4687 176.76C11.6081 178.704 7.44144 182.06 4.50605 186.394C1.57065 190.729 0.00116411 195.843 0 201.078L0 405.971C0 415.237 9.35571 421.572 17.9584 418.134L130.964 366.698V175.917C123.728 162.837 117.81 150.101 113.57 137.921L16.4687 176.76ZM235.735 294.398C224.218 294.398 213.323 289.34 205.85 280.516C189.758 261.526 172.643 239.901 157.156 217.719V366.69L314.313 419.075V217.727C298.826 239.901 281.719 261.534 265.619 280.524C258.146 289.34 247.251 294.398 235.735 294.398ZM453.511 131.913L340.505 183.349V419.084L455 373.287C459.862 371.344 464.029 367.989 466.964 363.654C469.9 359.319 471.469 354.204 471.469 348.969V144.076C471.469 134.811 462.113 128.475 453.511 131.913Z" fill="white"/>
-                                </Svg>
+                            <View style={styles.lastOption}>
+                                <View style={styles.localisation}>
+                                    <Svg width="24" height="23" viewBox="0 0 472 420" fill="none">
+                                        <Path d="M235.735 0C178.774 0 132.601 46.1729 132.601 103.134C132.601 149.184 200.006 233.115 225.83 263.581C231.061 269.752 240.416 269.752 245.639 263.581C271.463 233.115 338.868 149.184 338.868 103.134C338.868 46.1729 292.696 0 235.735 0ZM235.735 137.512C216.745 137.512 201.357 122.124 201.357 103.134C201.357 84.1441 216.745 68.7559 235.735 68.7559C254.724 68.7559 270.112 84.1441 270.112 103.134C270.112 122.124 254.724 137.512 235.735 137.512ZM16.4687 176.76C11.6081 178.704 7.44144 182.06 4.50605 186.394C1.57065 190.729 0.00116411 195.843 0 201.078L0 405.971C0 415.237 9.35571 421.572 17.9584 418.134L130.964 366.698V175.917C123.728 162.837 117.81 150.101 113.57 137.921L16.4687 176.76ZM235.735 294.398C224.218 294.398 213.323 289.34 205.85 280.516C189.758 261.526 172.643 239.901 157.156 217.719V366.69L314.313 419.075V217.727C298.826 239.901 281.719 261.534 265.619 280.524C258.146 289.34 247.251 294.398 235.735 294.398ZM453.511 131.913L340.505 183.349V419.084L455 373.287C459.862 371.344 464.029 367.989 466.964 363.654C469.9 359.319 471.469 354.204 471.469 348.969V144.076C471.469 134.811 462.113 128.475 453.511 131.913Z" fill="white"/>
+                                    </Svg>
 
-                            </View>
-                            <View style={styles.lastOptionView}>
-                                <Text style={styles.textOption}>Localisation</Text>
-                                <Switch style={{marginBottom: normalize(10), marginRight: 20}} value={isCheckedLocalisation} onValueChange={toggleLocalisation}/>    
+                                </View>
+                                <View style={styles.lastOptionView}>
+                                    <Text style={styles.textOption}>Localisation</Text>
+                                    <Switch style={{marginBottom: normalize(10), marginRight: 20}} value={isCheckedLocalisation} onValueChange={toggleLocalisation}/>    
+                                </View>
                             </View>
                         </View>
-                    </View>
-                    <View style={styles.titleMusic}>
-                        <Svg width="32" height="23" viewBox="0 0 28 21">
-                            <Path d="M5.84463 0.36924C5.37582 -0.0995746 4.59968 -0.13966 4.10723 0.35111C1.57056 2.8792 0 6.37809 0 10.243C0 14.2583 1.69511 17.8783 4.40753 20.4254C4.90303 20.8906 5.65829 20.8413 6.11707 20.3826C6.65205 19.8476 6.58697 18.9969 6.07118 18.5038C3.89425 16.4228 2.53916 13.4914 2.53916 10.243C2.53916 7.11727 3.79368 4.28541 5.82764 2.22202C6.3189 1.72366 6.36867 0.893273 5.84463 0.36924Z" fill="white"/>
-                            <Path d="M8.82679 3.35124C8.37113 2.89557 7.6097 2.83865 7.11937 3.32383C5.33696 5.08757 4.23193 7.53654 4.23193 10.2428C4.23193 13.1062 5.46885 15.6811 7.43617 17.4616C7.92997 17.9085 8.65988 17.8396 9.10066 17.3988C9.65615 16.8434 9.55157 15.969 9.03099 15.4783C7.63907 14.1659 6.7711 12.306 6.7711 10.2428C6.7711 8.29502 7.5446 6.52876 8.80209 5.23299C9.28672 4.73363 9.3654 3.88984 8.82679 3.35124Z" fill="white"/>
-                            <Path d="M18.2575 3.35124C18.7132 2.89557 19.4746 2.83865 19.965 3.32383C21.7473 5.08757 22.8524 7.53654 22.8524 10.2428C22.8524 13.1062 21.6154 15.6811 19.6481 17.4616C19.1543 17.9085 18.4244 17.8396 17.9836 17.3988C17.4282 16.8434 17.5326 15.969 18.0533 15.4783C19.4453 14.1659 20.3132 12.306 20.3132 10.2428C20.3132 8.29502 19.5398 6.52876 18.2822 5.23299C17.7976 4.73363 17.7188 3.88984 18.2575 3.35124Z" fill="white"/>
-                            <Path d="M21.2398 0.36924C21.7087 -0.0995746 22.4849 -0.13966 22.9773 0.35111C25.5139 2.8792 27.0845 6.37809 27.0845 10.243C27.0845 14.2583 25.3893 17.8783 22.677 20.4254C22.1815 20.8906 21.4262 20.8413 20.9675 20.3826C20.4324 19.8476 20.4975 18.9969 21.0133 18.5038C23.1902 16.4228 24.5453 13.4914 24.5453 10.243C24.5453 7.11727 23.2908 4.28541 21.2567 2.22202C20.7655 1.72366 20.7157 0.893273 21.2398 0.36924Z" fill="white"/>
-                            <Path d="M13.5422 7.70361C12.1399 7.70361 11.0031 8.84043 11.0031 10.2428C11.0031 11.6451 12.1399 12.7819 13.5422 12.7819C14.9445 12.7819 16.0814 11.6451 16.0814 10.2428C16.0814 8.84043 14.9445 7.70361 13.5422 7.70361Z" fill="white"/>
-                        </Svg>
-                        <Text style={[styles.textOption, {marginLeft: 10}]}>En cours d’écoute...</Text>
-                    </View>
+                        <View style={styles.titleMusic}>
+                            <Svg width="32" height="23" viewBox="0 0 28 21">
+                                <Path d="M5.84463 0.36924C5.37582 -0.0995746 4.59968 -0.13966 4.10723 0.35111C1.57056 2.8792 0 6.37809 0 10.243C0 14.2583 1.69511 17.8783 4.40753 20.4254C4.90303 20.8906 5.65829 20.8413 6.11707 20.3826C6.65205 19.8476 6.58697 18.9969 6.07118 18.5038C3.89425 16.4228 2.53916 13.4914 2.53916 10.243C2.53916 7.11727 3.79368 4.28541 5.82764 2.22202C6.3189 1.72366 6.36867 0.893273 5.84463 0.36924Z" fill="white"/>
+                                <Path d="M8.82679 3.35124C8.37113 2.89557 7.6097 2.83865 7.11937 3.32383C5.33696 5.08757 4.23193 7.53654 4.23193 10.2428C4.23193 13.1062 5.46885 15.6811 7.43617 17.4616C7.92997 17.9085 8.65988 17.8396 9.10066 17.3988C9.65615 16.8434 9.55157 15.969 9.03099 15.4783C7.63907 14.1659 6.7711 12.306 6.7711 10.2428C6.7711 8.29502 7.5446 6.52876 8.80209 5.23299C9.28672 4.73363 9.3654 3.88984 8.82679 3.35124Z" fill="white"/>
+                                <Path d="M18.2575 3.35124C18.7132 2.89557 19.4746 2.83865 19.965 3.32383C21.7473 5.08757 22.8524 7.53654 22.8524 10.2428C22.8524 13.1062 21.6154 15.6811 19.6481 17.4616C19.1543 17.9085 18.4244 17.8396 17.9836 17.3988C17.4282 16.8434 17.5326 15.969 18.0533 15.4783C19.4453 14.1659 20.3132 12.306 20.3132 10.2428C20.3132 8.29502 19.5398 6.52876 18.2822 5.23299C17.7976 4.73363 17.7188 3.88984 18.2575 3.35124Z" fill="white"/>
+                                <Path d="M21.2398 0.36924C21.7087 -0.0995746 22.4849 -0.13966 22.9773 0.35111C25.5139 2.8792 27.0845 6.37809 27.0845 10.243C27.0845 14.2583 25.3893 17.8783 22.677 20.4254C22.1815 20.8906 21.4262 20.8413 20.9675 20.3826C20.4324 19.8476 20.4975 18.9969 21.0133 18.5038C23.1902 16.4228 24.5453 13.4914 24.5453 10.243C24.5453 7.11727 23.2908 4.28541 21.2567 2.22202C20.7655 1.72366 20.7157 0.893273 21.2398 0.36924Z" fill="white"/>
+                                <Path d="M13.5422 7.70361C12.1399 7.70361 11.0031 8.84043 11.0031 10.2428C11.0031 11.6451 12.1399 12.7819 13.5422 12.7819C14.9445 12.7819 16.0814 11.6451 16.0814 10.2428C16.0814 8.84043 14.9445 7.70361 13.5422 7.70361Z" fill="white"/>
+                            </Svg>
+                            <Text style={[styles.textOption, {marginLeft: 10}]}>En cours d’écoute...</Text>
+                        </View>
 
-                    <View style={styles.musicActually}>
-                        <CardMusic image="https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png" title='Bambina' description="PNL"/>
-                        <Image source={require("../assets/images/FladyShadow.png")} style={styles.mascot}/>
-                    </View>
+                        <View style={styles.musicActually}>
+                            <CardMusic image="https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png" title='Bambina' description="PNL"/>
+                            <Image source={require("../assets/images/FladyShadow.png")} style={styles.mascot}/>
+                        </View>
 
-                    <View style={styles.deconnectedOption}>
-                        <View style={styles.buttonDeconectedOption}>
-                            <Svg width="23" height="24" viewBox="0 0 23 24">
-                                <Path d="M4.36916 23.102C4.03419 23.102 3.71379 22.9855 3.43707 22.7671L0.5243 20.3349C0.360787 20.2004 0.229004 20.0315 0.138369 19.8401C0.0477338 19.6488 0.000485206 19.4398 0 19.2281L0 3.87773C0 3.44081 0.18933 3.03302 0.5243 2.75631L3.43707 0.324142C3.87399 -0.0253914 4.47111 -0.0982107 4.98085 0.134811C5.23365 0.251805 5.44759 0.438845 5.59731 0.673748C5.74703 0.908652 5.82624 1.18157 5.82555 1.46012V21.6602C5.82624 21.9388 5.74703 22.2117 5.59731 22.4466C5.44759 22.6815 5.23365 22.8685 4.98085 22.9855C4.79152 23.0583 4.57306 23.102 4.36916 23.102ZM17.4767 15.9221V7.18373C17.4767 6.52835 18.2631 6.20795 18.7146 6.67399L22.574 10.5334C23.142 11.1014 23.142 12.0189 22.574 12.5869L18.7146 16.4463C18.6119 16.547 18.4817 16.615 18.3405 16.6418C18.1992 16.6686 18.0532 16.6529 17.9208 16.5969C17.7885 16.5408 17.6756 16.4468 17.5966 16.3267C17.5175 16.2066 17.4758 16.0658 17.4767 15.9221Z" fill="white"/>
-                                <Path d="M5.09735 3.54297H13.1075C13.5153 3.54297 13.8357 3.86337 13.8357 4.27116V7.91213M5.09735 19.5632H13.1075C13.5153 19.5632 13.8357 19.2428 13.8357 18.835V15.1941M21.8458 11.5531H10.1947" stroke="white" stroke-linecap="round"/>
-                            </Svg>
+                        <View style={styles.deconnectedOption}>
+                            <View style={styles.buttonDeconectedOption}>
+                                <Svg width="23" height="24" viewBox="0 0 23 24">
+                                    <Path d="M4.36916 23.102C4.03419 23.102 3.71379 22.9855 3.43707 22.7671L0.5243 20.3349C0.360787 20.2004 0.229004 20.0315 0.138369 19.8401C0.0477338 19.6488 0.000485206 19.4398 0 19.2281L0 3.87773C0 3.44081 0.18933 3.03302 0.5243 2.75631L3.43707 0.324142C3.87399 -0.0253914 4.47111 -0.0982107 4.98085 0.134811C5.23365 0.251805 5.44759 0.438845 5.59731 0.673748C5.74703 0.908652 5.82624 1.18157 5.82555 1.46012V21.6602C5.82624 21.9388 5.74703 22.2117 5.59731 22.4466C5.44759 22.6815 5.23365 22.8685 4.98085 22.9855C4.79152 23.0583 4.57306 23.102 4.36916 23.102ZM17.4767 15.9221V7.18373C17.4767 6.52835 18.2631 6.20795 18.7146 6.67399L22.574 10.5334C23.142 11.1014 23.142 12.0189 22.574 12.5869L18.7146 16.4463C18.6119 16.547 18.4817 16.615 18.3405 16.6418C18.1992 16.6686 18.0532 16.6529 17.9208 16.5969C17.7885 16.5408 17.6756 16.4468 17.5966 16.3267C17.5175 16.2066 17.4758 16.0658 17.4767 15.9221Z" fill="white"/>
+                                    <Path d="M5.09735 3.54297H13.1075C13.5153 3.54297 13.8357 3.86337 13.8357 4.27116V7.91213M5.09735 19.5632H13.1075C13.5153 19.5632 13.8357 19.2428 13.8357 18.835V15.1941M21.8458 11.5531H10.1947" stroke="white" stroke-linecap="round"/>
+                                </Svg>
+                            </View>
+                            <TouchableOpacity onPress={() => console.log("Tkt t deconnecter")}>
+                                <Text style={styles.textDeconnectionOption}>Se deconnecter</Text>
+                            </TouchableOpacity>
                         </View>
-                        <TouchableOpacity onPress={() => console.log("Tkt t deconnecter")}>
-                            <Text style={styles.textDeconnectionOption}>Se deconnecter</Text>
-                        </TouchableOpacity>
                     </View>
-                </View>
-            </ScrollView>
+                </ScrollView>
+            </SafeAreaView>
         </DismissKeyboard>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     container: {
         marginTop: 30,
         marginHorizontal: normalize(25),

src/FLAD/screens/SettingProfil.tsx

@@ -7,6 +7,7 @@ import {useNavigation} from "@react-navigation/native";
 
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 // @ts-ignore
 const DismissKeyboard = ({ children }) => (
@@ -46,107 +47,113 @@ export default function SettingProfil() {
 
     return (
         <DismissKeyboard>
-            <ScrollView>
-                <View style={styles.container}>
-                    <TouchableOpacity onPress={() => navigation.navigate('Setting')}>
-                        <View style={styles.exit}>
-                            <Image style={styles.buttonSetting} source={require('../assets/icons/icons/buttonProfil_Inverse.png')}/>   
-                            <Text style={styles.textExit}>Exit</Text> 
-                        </View>
-                    </TouchableOpacity>
-                    <View style={styles.profilHead}>
-                        <Text style={styles.title}>Profil</Text>
-                        <View style={styles.imageWrapper}>
-                            {image && <Image source={{ uri: image }} style={styles.imageProfil} />}
-                        </View>
-                        <View style={styles.editButton}>
-                            <TouchableOpacity onPress={pickImage} >
-                                <Image
-                                    source={require('../assets/icons/icons/edit.png')} style={{resizeMode: "stretch", height: '85%', aspectRatio: 1}}
-                                />
-                            </TouchableOpacity>    
+            <SafeAreaView style={styles.mainSafeArea}>
+                <ScrollView>
+                    <View style={styles.container}>
+                        <TouchableOpacity onPress={() => navigation.navigate('Setting')}>
+                            <View style={styles.exit}>
+                                <Image style={styles.buttonSetting} source={require('../assets/icons/icons/buttonProfil_Inverse.png')}/>   
+                                <Text style={styles.textExit}>Exit</Text> 
+                            </View>
+                        </TouchableOpacity>
+                        <View style={styles.profilHead}>
+                            <Text style={styles.title}>Profil</Text>
+                            <View style={styles.imageWrapper}>
+                                {image && <Image source={{ uri: image }} style={styles.imageProfil} />}
+                            </View>
+                            <View style={styles.editButton}>
+                                <TouchableOpacity onPress={pickImage} >
+                                    <Image
+                                        source={require('../assets/icons/icons/edit.png')} style={{resizeMode: "stretch", height: '85%', aspectRatio: 1}}
+                                        />
+                                </TouchableOpacity>    
+                            </View>
                         </View>
-                    </View>
-                    <View style={styles.body}>
-                        <View style={styles.optionId}>
-                            <Text style={styles.textOption}>Identifiant</Text>
-                            <TextInput placeholderTextColor='#828288' placeholder='Flady' style={styles.textInputId}/>
+                        <View style={styles.body}>
+                            <View style={styles.optionId}>
+                                <Text style={styles.textOption}>Identifiant</Text>
+                                <TextInput placeholderTextColor='#828288' placeholder='Flady' style={styles.textInputId}/>
+                            </View>
+                            <View style={styles.optionMail}>
+                                <Text style={styles.textOption}>Mail</Text>
+                                <TextInput placeholderTextColor='#828288' placeholder='emre.kartal@etu.uca.fr' style={styles.textInputMail}/>
+                            </View>
                         </View>
-                        <View style={styles.optionMail}>
-                            <Text style={styles.textOption}>Mail</Text>
-                            <TextInput placeholderTextColor='#828288' placeholder='emre.kartal@etu.uca.fr' style={styles.textInputMail}/>
+
+                        <View style={styles.passwordOption}>
+                            <TouchableOpacity style={{flexDirection: 'row'}} onPress={handleModal}>
+                                <View style={styles.passwordIcon}>
+                                    <Svg width="14" height="20" viewBox="0 0 14 26" >
+                                        <Path fill-rule="evenodd" clip-rule="evenodd" d="M3.27129 1.75541C4.23026 1.10258 5.34904 0.723459 6.50733 0.658814C7.66563 0.594169 8.81964 0.846441 9.84531 1.38851C10.7879 1.8833 11.593 2.6042 12.1889 3.48739C12.9939 4.70913 13.3604 6.16796 13.2283 7.62511C13.0962 9.08225 12.4733 10.4514 11.4617 11.5084C11.031 11.9508 10.5387 12.3292 9.99839 12.6274L10.1591 14.3578L9.96312 14.9126L9.00438 15.8973L10.5193 17.3723L10.5326 18.3689L9.05762 19.8838L10.5725 21.3588L10.5858 22.3554L7.63588 25.3852L6.63925 25.3985L4.30933 23.13L4.09638 22.6355L3.96398 12.721C3.36598 12.4165 2.82055 12.0182 2.34835 11.5414C1.68473 10.8774 1.17578 10.0751 0.857766 9.19177C0.539757 8.30846 0.420525 7.36587 0.508571 6.4312C0.596616 5.49652 0.88977 4.59278 1.36714 3.78439C1.8445 2.976 2.49533 2.28386 3.27129 1.75541ZM11.8389 7.50421C11.9428 6.36957 11.6584 5.23325 11.0323 4.28134L11.0412 4.28222C10.5801 3.58952 9.95326 3.02302 9.21756 2.63419C8.48185 2.24536 7.66065 2.04653 6.82857 2.05576C5.99649 2.06499 5.1799 2.28199 4.453 2.68704C3.72611 3.0921 3.11195 3.67236 2.66632 4.37512C2.07477 5.33215 1.8204 6.45957 1.94372 7.57788C2.06704 8.69619 2.56095 9.7411 3.34682 10.5462C3.79752 11.0047 4.33268 11.3684 4.92505 11.6127L5.36528 12.2577L5.5017 22.3236L7.1176 23.8969L9.08424 21.8771L7.56933 20.4021L7.55602 19.4055L9.031 17.8905L7.5161 16.4156L7.50279 15.4189L8.72702 14.1616L8.56231 12.2778L8.97256 11.5736C9.52979 11.3206 10.0346 10.9652 10.4608 10.526C11.249 9.70384 11.7349 8.63846 11.8389 7.50421ZM8.25568 5.66411C8.22318 5.47735 8.15334 5.29906 8.05034 5.13991C7.94734 4.98077 7.8133 4.84403 7.65623 4.73789C7.49916 4.63174 7.3223 4.55837 7.13622 4.52216C6.95014 4.48596 6.75867 4.48765 6.57326 4.52716C6.38785 4.56666 6.21232 4.64315 6.05716 4.75206C5.902 4.86098 5.7704 5.00007 5.67024 5.16101C5.57007 5.32196 5.50341 5.50146 5.47422 5.68877C5.44503 5.87608 5.45393 6.06735 5.50038 6.25114C5.58972 6.60469 5.81261 6.90986 6.12222 7.10253C6.43182 7.29521 6.80405 7.3604 7.16071 7.28441C7.51737 7.20843 7.8307 6.99717 8.03488 6.69503C8.23906 6.39289 8.31821 6.02337 8.25568 5.66411Z" fill="white"/>
+                                    </Svg>
+                                </View>
+                                <View style={styles.optionView}>
+                                    <Text style={styles.textOptionPassword}>Modifier le mot de passe</Text>
+                                </View>
+                            </TouchableOpacity>
                         </View>
-                    </View>
 
-                    <View style={styles.passwordOption}>
-                        <TouchableOpacity style={{flexDirection: 'row'}} onPress={handleModal}>
-                            <View style={styles.passwordIcon}>
-                                <Svg width="14" height="20" viewBox="0 0 14 26" >
-                                    <Path fill-rule="evenodd" clip-rule="evenodd" d="M3.27129 1.75541C4.23026 1.10258 5.34904 0.723459 6.50733 0.658814C7.66563 0.594169 8.81964 0.846441 9.84531 1.38851C10.7879 1.8833 11.593 2.6042 12.1889 3.48739C12.9939 4.70913 13.3604 6.16796 13.2283 7.62511C13.0962 9.08225 12.4733 10.4514 11.4617 11.5084C11.031 11.9508 10.5387 12.3292 9.99839 12.6274L10.1591 14.3578L9.96312 14.9126L9.00438 15.8973L10.5193 17.3723L10.5326 18.3689L9.05762 19.8838L10.5725 21.3588L10.5858 22.3554L7.63588 25.3852L6.63925 25.3985L4.30933 23.13L4.09638 22.6355L3.96398 12.721C3.36598 12.4165 2.82055 12.0182 2.34835 11.5414C1.68473 10.8774 1.17578 10.0751 0.857766 9.19177C0.539757 8.30846 0.420525 7.36587 0.508571 6.4312C0.596616 5.49652 0.88977 4.59278 1.36714 3.78439C1.8445 2.976 2.49533 2.28386 3.27129 1.75541ZM11.8389 7.50421C11.9428 6.36957 11.6584 5.23325 11.0323 4.28134L11.0412 4.28222C10.5801 3.58952 9.95326 3.02302 9.21756 2.63419C8.48185 2.24536 7.66065 2.04653 6.82857 2.05576C5.99649 2.06499 5.1799 2.28199 4.453 2.68704C3.72611 3.0921 3.11195 3.67236 2.66632 4.37512C2.07477 5.33215 1.8204 6.45957 1.94372 7.57788C2.06704 8.69619 2.56095 9.7411 3.34682 10.5462C3.79752 11.0047 4.33268 11.3684 4.92505 11.6127L5.36528 12.2577L5.5017 22.3236L7.1176 23.8969L9.08424 21.8771L7.56933 20.4021L7.55602 19.4055L9.031 17.8905L7.5161 16.4156L7.50279 15.4189L8.72702 14.1616L8.56231 12.2778L8.97256 11.5736C9.52979 11.3206 10.0346 10.9652 10.4608 10.526C11.249 9.70384 11.7349 8.63846 11.8389 7.50421ZM8.25568 5.66411C8.22318 5.47735 8.15334 5.29906 8.05034 5.13991C7.94734 4.98077 7.8133 4.84403 7.65623 4.73789C7.49916 4.63174 7.3223 4.55837 7.13622 4.52216C6.95014 4.48596 6.75867 4.48765 6.57326 4.52716C6.38785 4.56666 6.21232 4.64315 6.05716 4.75206C5.902 4.86098 5.7704 5.00007 5.67024 5.16101C5.57007 5.32196 5.50341 5.50146 5.47422 5.68877C5.44503 5.87608 5.45393 6.06735 5.50038 6.25114C5.58972 6.60469 5.81261 6.90986 6.12222 7.10253C6.43182 7.29521 6.80405 7.3604 7.16071 7.28441C7.51737 7.20843 7.8307 6.99717 8.03488 6.69503C8.23906 6.39289 8.31821 6.02337 8.25568 5.66411Z" fill="white"/>
+                        <View style={styles.deleteOption}>
+                            <View style={styles.buttonDeleteOption}>
+                                <Svg width="20" height="22" viewBox="0 0 25 31">
+                                    <Path d="M21.4265 16.0194V21.7371V28.4078L19.8044 29.8373H10.6125L21.4265 16.0194Z" fill="#686868"/>
+                                    <Path d="M9.41089 3.4031V1H15.4186V3.4031" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <Path d="M21.4264 8.81006V27.4341C21.4264 28.7613 20.3504 29.8372 19.0233 29.8372H5.80618C4.47901 29.8372 3.40308 28.7613 3.40308 27.4341V8.81006" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <Path d="M1 3.40308H23.8295V5.80618H1V3.40308Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <Path d="M15.4185 10.7626V26.8333" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+                                    <Path d="M9.41089 10.7626V26.8333" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                 </Svg>
                             </View>
-                            <View style={styles.optionView}>
-                                <Text style={styles.textOptionPassword}>Modifier le mot de passe</Text>
-                            </View>
-                        </TouchableOpacity>
-                    </View>
-
-                    <View style={styles.deleteOption}>
-                        <View style={styles.buttonDeleteOption}>
-                            <Svg width="20" height="22" viewBox="0 0 25 31">
-                                <Path d="M21.4265 16.0194V21.7371V28.4078L19.8044 29.8373H10.6125L21.4265 16.0194Z" fill="#686868"/>
-                                <Path d="M9.41089 3.4031V1H15.4186V3.4031" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                                <Path d="M21.4264 8.81006V27.4341C21.4264 28.7613 20.3504 29.8372 19.0233 29.8372H5.80618C4.47901 29.8372 3.40308 28.7613 3.40308 27.4341V8.81006" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                                <Path d="M1 3.40308H23.8295V5.80618H1V3.40308Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                                <Path d="M15.4185 10.7626V26.8333" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                                <Path d="M9.41089 10.7626V26.8333" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                            </Svg>
+                            <TouchableOpacity onPress={() => console.log("Tkt t deconnecter")}>
+                                <Text style={styles.textDeleteOption}>Supprimer le compte</Text>
+                            </TouchableOpacity>
                         </View>
-                        <TouchableOpacity onPress={() => console.log("Tkt t deconnecter")}>
-                            <Text style={styles.textDeleteOption}>Supprimer le compte</Text>
-                        </TouchableOpacity>
-                    </View>
-                    <Modal isVisible={isModalVisible}>
-                        <View style={styles.modalContent}>
-                            <View style={styles.modalView}>
-                                <TouchableOpacity onPress={handleModal}>
-                                    <View>
-                                        <Text style={styles.cancelText}>Annuler</Text>
+                        <Modal isVisible={isModalVisible}>
+                            <View style={styles.modalContent}>
+                                <View style={styles.modalView}>
+                                    <TouchableOpacity onPress={handleModal}>
+                                        <View>
+                                            <Text style={styles.cancelText}>Annuler</Text>
+                                        </View>
+                                    </TouchableOpacity>
+                                    <Text style={styles.titlePassword}>Mot de passe</Text>
+                                    <TouchableOpacity>
+                                        <View>
+                                            <Text style={styles.updateText}>Modifier</Text>
+                                        </View>
+                                    </TouchableOpacity>                             
+                                </View>
+                                <View style={styles.bodyModal}>
+                                    <View style={styles.optionModalWithUnderline}>
+                                        <Text style={styles.textOptionModal}>Ancien</Text>
+                                        <TextInput placeholderTextColor='#828288' placeholder="saisir l'ancien mot de passe" style={styles.textInputOldModal}/>
                                     </View>
-                                </TouchableOpacity>
-                                <Text style={styles.titlePassword}>Mot de passe</Text>
-                                <TouchableOpacity>
-                                    <View>
-                                        <Text style={styles.updateText}>Modifier</Text>
+                                    <View style={styles.optionModalWithUnderline}>
+                                        <Text style={styles.textOptionModal}>Nouveau</Text>
+                                        <TextInput placeholderTextColor='#828288' placeholder='saisir le mot de passe' style={styles.textInputNewModal}/>
+                                    </View>
+                                    <View style={styles.optionModal}>
+                                        <Text style={styles.textOptionModal}>Confirmer</Text>
+                                        <TextInput placeholderTextColor='#828288' placeholder='mot de passe' style={styles.textInputConfirmModal}/>
                                     </View>
-                                </TouchableOpacity>                             
-                            </View>
-                            <View style={styles.bodyModal}>
-                                <View style={styles.optionModalWithUnderline}>
-                                    <Text style={styles.textOptionModal}>Ancien</Text>
-                                    <TextInput placeholderTextColor='#828288' placeholder="saisir l'ancien mot de passe" style={styles.textInputOldModal}/>
-                                </View>
-                                <View style={styles.optionModalWithUnderline}>
-                                    <Text style={styles.textOptionModal}>Nouveau</Text>
-                                    <TextInput placeholderTextColor='#828288' placeholder='saisir le mot de passe' style={styles.textInputNewModal}/>
                                 </View>
-                                <View style={styles.optionModal}>
-                                    <Text style={styles.textOptionModal}>Confirmer</Text>
-                                    <TextInput placeholderTextColor='#828288' placeholder='mot de passe' style={styles.textInputConfirmModal}/>
+                                <View style={styles.warningView}>
+                                    <Text style={styles.warning}>Votre mot de passe doit comporter au moins 8 caractères, dont au moins un chiffre, une majuscule et une minuscule.</Text>
                                 </View>
                             </View>
-                            <View style={styles.warningView}>
-                                <Text style={styles.warning}>Votre mot de passe doit comporter au moins 8 caractères, dont au moins un chiffre, une majuscule et une minuscule.</Text>
-                            </View>
-                        </View>
-                    </Modal>
-                </View>
-            </ScrollView>
+                        </Modal>
+                    </View>
+                </ScrollView>
+            </SafeAreaView>
         </DismissKeyboard>
     );
 };
 
 const styles = StyleSheet.create({
+    mainSafeArea: {
+        flex: 1,
+        backgroundColor: "#141414",
+    },
     container: {
         marginTop: 20,
         marginHorizontal: normalize(25),

src/FLAD/screens/SpotDetailsPage.tsx

@@ -1,6 +1,6 @@
 import { SharedElement } from "react-navigation-shared-element";
 import { NavigationProp, RouteProp } from "@react-navigation/native";
-import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity } from "react-native";
+import { View,Text,Image,StyleSheet, Dimensions, useWindowDimensions, Button, TouchableOpacity, SafeAreaView } from "react-native";
 import Animated, { interpolate, SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue, Value, withSpring, withTiming } from "react-native-reanimated";
 import { BlurView } from 'expo-blur';
 import qs from "qs";
@@ -217,6 +217,7 @@ const SpotDetailsPage = ({ route }) => {
 
     
     return (
+      <SafeAreaView style={styles.mainSafeArea}>
 <View style={{ flex: 1, justifyContent : 'flex-start', alignItems : 'center' }}>
         {/* <SharedElement  id={spot.name} style={{ flex: 1 }}>                 */}
         <View style={{borderWidth : 1, borderColor : 'red'}}>
@@ -287,8 +288,16 @@ const SpotDetailsPage = ({ route }) => {
         </View> */}
         {/* </SharedElement> */}
         </View>
+      </SafeAreaView>
 
     );
 };
 
-export default SpotDetailsPage;
+export default SpotDetailsPage;
+
+const styles = StyleSheet.create ({
+  mainSafeArea: {
+    flex: 1,
+    backgroundColor: "#141414",
+  }
+})

src/FLAD/screens/spot.tsx

@@ -204,35 +204,32 @@ export default function Spot() {
                                  height: "100%",
                                  justifyContent: "center",
                                  alignItems: "center",
-                                 opacity: 0.48
                              }}
                              source={{
                                  uri:currentCard.sourceUrl ,
                              }}
       ></ImageBackground>
-
-      <View style={{flex : 1.65}}>
-      <LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%','rgba(0, 0, 0, 0) 90.56%']}style={styles.gradient}>
-      <Text
-      style={{
-        fontStyle : 'normal',
-        left: wWidht/9 ,
-        top: 65,
-        color: "#FFFFFF",
-        fontSize: 20,
-        fontWeight: "800",
-      }}>LOST FOREST</Text>
-      <Text
-      style={{
-        fontStyle : 'normal',
-        left: wWidht/9 ,
-        top: 65,
-        color: "#FFFFFF",
-        fontSize: 18,
-        fontWeight: "800",
-      }}>Laylow</Text>
-      </LinearGradient>
-      </View>
+        <SafeAreaView style={styles.mainSafeArea}>
+            <LinearGradient colors={['rgba(2, 2, 2, 0.58) 0%','rgba(0, 0, 0, 0) 100.56%']}style={styles.gradient}>
+              <Text
+              style={{
+                fontStyle : 'normal',
+                left: wWidht/9 ,
+                top: 75,
+                color: "#FFFFFF",
+                fontSize: 30,
+                fontWeight: "800",
+              }}>{currentCard.musicName}</Text>
+              <Text
+              style={{
+                fontStyle : 'normal',
+                left: wWidht/9 ,
+                top: 75,
+                color: "#FFFFFF",
+                fontSize: 18,
+              }}>{currentCard.name}</Text>
+            </LinearGradient>
+        </SafeAreaView>
       <View style={{flex : 8.35}}>
       
       <View style={{flex : 1.83, justifyContent: 'center', alignItems: 'center' }}>
@@ -272,23 +269,22 @@ export default function Spot() {
       </View>
       </>
       )
-      : (<View style={{justifyContent : 'center', alignItems : 'center', flex : 1}}>
-        <View style={{flex:7}}>
-
-                        <FladLoading></FladLoading>
-        </View>
-        <View style={{flex : 3 , justifyContent: 'flex-start'}}>
-        <Text style={{color: "grey", fontWeight: "400", textAlign: "center"}}>Vous avez explorer toutes les spot autour de vous.
-                            {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées dur vos gouts musicaux.</Text>
-        </View>
-                                            
-      </View>)
+      : (<View style={{justifyContent : 'center', alignItems : 'center', flex : 1, backgroundColor: "#141414"}}>
+          <View style={{position: "absolute"}}>
+            <FladLoading/>
+          </View>               
+            <Text style={{color: "grey", fontWeight: "400", textAlign: "center", top: 100}}>Vous avez explorer toutes les spot autour de vous.
+                              {"\n"}Continuer dans discoverie pour découvrir de nouvelles music basées dur vos gouts musicaux.</Text>               
+        </View>)
     }
     </View>
       
   );
 };
   const styles = StyleSheet.create({
+    mainSafeArea: {
+      flex: 1,
+    },
     spot : {
       flex: 1,
       alignItems: 'center',
@@ -320,9 +316,5 @@ export default function Spot() {
       right : 0,
       height : 209,
     },
-
-      mainSafeArea: {
-        flex: 1,
-      }
   })