diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index 2873efb..2042677 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -6,12 +6,12 @@ import StartNavigation from './navigation/StartNavigation'; export default function App() { return ( - - - - // - // {/* */} - // + // + // + // + + + ); } diff --git a/src/FLAD/app.json b/src/FLAD/app.json index 906754f..2940b9a 100644 --- a/src/FLAD/app.json +++ b/src/FLAD/app.json @@ -7,7 +7,7 @@ "icon": "./assets/icons/icon.png", "userInterfaceStyle": "light", "splash": { - "image": "./assets/icons/splash.png", + "image": "./assets/images/RedFlady.png", "resizeMode": "contain", "backgroundColor": "#1d2129" }, @@ -29,6 +29,15 @@ }, "web": { "favicon": "./assets/icons/favicon.png" - } + }, + "plugins": [ + [ + "expo-image-picker", + { + "photosPermission": "The app accesses your photos to let you share them with your friends." + } + ] + ] + } } diff --git a/src/FLAD/assets/icons/icons/IconProfil.png b/src/FLAD/assets/icons/icons/IconProfil.png new file mode 100644 index 0000000..b9c6183 Binary files /dev/null and b/src/FLAD/assets/icons/icons/IconProfil.png differ diff --git a/src/FLAD/assets/icons/icons/buttonProfil.png b/src/FLAD/assets/icons/icons/buttonProfil.png new file mode 100644 index 0000000..91a7086 Binary files /dev/null and b/src/FLAD/assets/icons/icons/buttonProfil.png differ diff --git a/src/FLAD/assets/icons/icons/buttonProfil_Inverse.png b/src/FLAD/assets/icons/icons/buttonProfil_Inverse.png new file mode 100644 index 0000000..a9a6110 Binary files /dev/null and b/src/FLAD/assets/icons/icons/buttonProfil_Inverse.png differ diff --git a/src/FLAD/assets/icons/icons/edit.png b/src/FLAD/assets/icons/icons/edit.png new file mode 100644 index 0000000..5f13961 Binary files /dev/null and b/src/FLAD/assets/icons/icons/edit.png differ diff --git a/src/FLAD/assets/icons/splashs.png b/src/FLAD/assets/icons/splashs.png deleted file mode 100644 index 8e0dc29..0000000 Binary files a/src/FLAD/assets/icons/splashs.png and /dev/null differ diff --git a/src/FLAD/assets/images/Flady.png b/src/FLAD/assets/images/Flady.png new file mode 100644 index 0000000..172ff00 Binary files /dev/null and b/src/FLAD/assets/images/Flady.png differ diff --git a/src/FLAD/assets/images/FladyShadow.png b/src/FLAD/assets/images/FladyShadow.png new file mode 100644 index 0000000..f4c532e Binary files /dev/null and b/src/FLAD/assets/images/FladyShadow.png differ diff --git a/src/FLAD/assets/images/RedFlady.png b/src/FLAD/assets/images/RedFlady.png new file mode 100644 index 0000000..c6c3b40 Binary files /dev/null and b/src/FLAD/assets/images/RedFlady.png differ diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 3563a05..7cf3393 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -1,5 +1,7 @@ -import React, {Component} from 'react'; -import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native'; +import React from 'react'; +import { StyleSheet, Text, View , Image } from 'react-native'; + +import normalize from '../components/Normalize'; type CustomCardMusic = { //Props image: ImageSource; @@ -30,8 +32,8 @@ const styles = StyleSheet.create({ marginBottom: 15 }, imageContainer: { - width: 80, - height: 80, + width: normalize(92), + height: normalize(92), alignItems: 'center', justifyContent: 'center', marginRight: 20, @@ -51,11 +53,11 @@ const styles = StyleSheet.create({ title: { fontWeight: 'bold', color: 'white', - fontSize: 20, + fontSize: normalize(23), marginBottom: 10 }, description: { color: 'white', - fontSize: 16 + fontSize: normalize(18) } }); \ No newline at end of file diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx index 49507d7..47b5bd6 100644 --- a/src/FLAD/components/NextButton.tsx +++ b/src/FLAD/components/NextButton.tsx @@ -1,11 +1,13 @@ -import React, { useState, useRef, useEffect } from 'react'; +import React, { 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'; +import normalize from '../components/Normalize'; + // @ts-ignore export default function NextButton({ percentage, scrollTo }) { - const size = 128; + const size = normalize(148); const strokeWidth = 2; const center = size / 2; const radius = size / 2 - strokeWidth / 2; @@ -57,7 +59,7 @@ export default function NextButton({ percentage, scrollTo }) { CONTINUER AVEC SPOTIFY - {handleModal(); navigation.navigate('Inscription');}}> + {handleModal(); navigation.navigate('Register');}}> S’INSCRIRE MAINTENANT - + {handleModal(); navigation.navigate('Login');}}> SE CONNECTER @@ -109,7 +109,7 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - marginBottom: 50 + marginBottom: normalize(110) }, closeButtonCircle: { backgroundColor: 'gray', @@ -188,6 +188,13 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', position: 'absolute', - bottom: 40 + bottom: normalize(46) + }, + mascot: { + width: normalize(150), + height: normalize(150), + position: 'absolute', + bottom: normalize(140), + right: normalize(0) } }) diff --git a/src/FLAD/components/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx index 4038cb7..0846358 100644 --- a/src/FLAD/components/OnboardingItem.tsx +++ b/src/FLAD/components/OnboardingItem.tsx @@ -2,15 +2,15 @@ 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(); + const { width, height } = useWindowDimensions(); return ( - - + + + + {item.title} {item.description} @@ -20,9 +20,12 @@ export default function Onboarding({ item }) { const styles = StyleSheet.create({ container: { flex: 1, - marginTop: -60 + marginTop: normalize(60), + backgroundColor: '#141414' }, image: { + width: '100%', + height: '100%', justifyContent: 'center' }, title: { @@ -33,7 +36,7 @@ const styles = StyleSheet.create({ textAlign: 'left', paddingRight: 30, paddingLeft: 20, - marginTop: -80 + marginTop: normalize(30) }, description: { fontWeight: '300', diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx index d7846ab..a5d69cb 100644 --- a/src/FLAD/components/Paginator.tsx +++ b/src/FLAD/components/Paginator.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native'; +import normalize from '../components/Normalize'; export default function Paginator({ data, scrollX }) { const { width } = useWindowDimensions(); return ( - + {data.map((_, i) => { const inputRange = [(i - 1) * width, i * width, (i + 1) * width]; diff --git a/src/FLAD/navigation/FavoriteNavigation.tsx b/src/FLAD/navigation/FavoriteNavigation.tsx index 40fc83b..d57181b 100644 --- a/src/FLAD/navigation/FavoriteNavigation.tsx +++ b/src/FLAD/navigation/FavoriteNavigation.tsx @@ -1,14 +1,14 @@ -import React, {Component} from 'react'; -import FavoritePage from '../screens/favoritePage'; +import React from 'react'; +import Favorite from '../screens/Favorite'; import { createStackNavigator } from '@react-navigation/stack'; export default function MusicNavigation() { const Stack = createStackNavigator(); return ( - + diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index 9243d9f..c53f79d 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -1,7 +1,10 @@ -import React, {Component} from 'react'; +import React from 'react'; 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'; + // @ts-ignore import FontAwesome from 'react-native-vector-icons/FontAwesome'; @@ -23,16 +26,16 @@ export default function Navigation() { initialRouteName="Spots" screenOptions={{ //tabBarShowLabel: false, //to remove the titles under the icons - tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 90, marginHorizontal: 25}, + tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 30, marginHorizontal: 25}, tabBarLabelStyle: { bottom: 5 } }}> - , }}/> - , @@ -42,7 +45,7 @@ export default function Navigation() { headerShown: false, tabBarIcon: ({color}) => , }}/> - , diff --git a/src/FLAD/navigation/SettingNavigation.tsx b/src/FLAD/navigation/SettingNavigation.tsx new file mode 100644 index 0000000..30142d0 --- /dev/null +++ b/src/FLAD/navigation/SettingNavigation.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Setting from '../screens/Setting'; +import SettingProfil from '../screens/SettingProfil'; +import { createStackNavigator } from '@react-navigation/stack'; + +export default function SettingNavigation() { + const Stack = createStackNavigator(); + return ( + + + + + ) + } \ No newline at end of file diff --git a/src/FLAD/navigation/StartNavigation.tsx b/src/FLAD/navigation/StartNavigation.tsx index ee07e8c..36b6bb7 100644 --- a/src/FLAD/navigation/StartNavigation.tsx +++ b/src/FLAD/navigation/StartNavigation.tsx @@ -1,6 +1,6 @@ -import React, {Component} from 'react'; -import LoginPage from '../screens/loginPage'; -import InscriptionPage from '../screens/InscriptionPage'; +import React from 'react'; +import Login from '../screens/LoginPage'; +import Register from '../screens/Register'; import Onboarding from '../components/Onboarding'; import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; @@ -17,12 +17,12 @@ export default function StartNavigation() { /> diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 26a4985..95f13f2 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -13,13 +13,15 @@ "@react-navigation/native": "^6.1.4", "@react-navigation/native-stack": "^6.9.8", "@react-navigation/stack": "^6.3.12", + "@reduxjs/toolkit": "^1.9.2", + "@types/react-redux": "^7.1.25", "axios": "^1.2.6", "expo": "~47.0.12", + "expo-asset": "^8.7.0", "expo-auth-session": "~3.8.0", "expo-cli": "^6.3.0", - "@reduxjs/toolkit": "^1.9.2", - "@types/react-redux": "^7.1.25", "expo-haptics": "~12.0.1", + "expo-image-picker": "^14.1.1", "expo-linear-gradient": "~12.0.1", "expo-location": "~15.0.1", "expo-random": "~13.0.0", @@ -37,8 +39,7 @@ "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" + "redux": "^4.2.1" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/Favorite.tsx similarity index 86% rename from src/FLAD/screens/favoritePage.tsx rename to src/FLAD/screens/Favorite.tsx index 74cd16e..e201bd2 100644 --- a/src/FLAD/screens/favoritePage.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -1,9 +1,11 @@ -import React, {Component} from 'react'; -import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native'; +import React from 'react'; +import { StyleSheet, Text, View, FlatList, ScrollView } from 'react-native'; import CardMusic from '../components/CardMusic'; -import Music from '../Model/Music' +import Music from '../Model/Music'; +import normalize from '../components/Normalize'; -export default function favoritePage() { + +export default function Favorite() { 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")), @@ -30,7 +32,7 @@ export default function favoritePage() { // )} keyExtractor={(item: Music) => item.title } - /> + /> @@ -44,17 +46,17 @@ const styles = StyleSheet.create({ backgroundColor: "#141414", }, titleContainer: { - marginTop: 20, + marginTop: 30, marginLeft: 20, }, title: { - fontSize: 24, + fontSize: normalize(28), fontWeight: 'bold', color: 'white', }, description: { marginTop: 10, - fontSize: 18, + fontSize: normalize(20), color: '#787878', marginBottom: 20 } diff --git a/src/FLAD/screens/loginPage.tsx b/src/FLAD/screens/LoginPage.tsx similarity index 94% rename from src/FLAD/screens/loginPage.tsx rename to src/FLAD/screens/LoginPage.tsx index 0d792c1..d4f9fc5 100644 --- a/src/FLAD/screens/loginPage.tsx +++ b/src/FLAD/screens/LoginPage.tsx @@ -1,5 +1,5 @@ -import React, {Component, useState } from 'react'; -import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; +import React, { useState } from 'react'; +import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; import {useNavigation} from "@react-navigation/native"; import normalize from '../components/Normalize'; @@ -46,7 +46,7 @@ export default function loginPage() { Tu n'as pas de compte? navigation.navigate('Inscription')} + onPress={() => navigation.navigate('Register')} > S'inscrire @@ -121,13 +121,14 @@ const styles = StyleSheet.create ({ marginBottom: 15 }, shadow: { - shadowColor: '#000', + shadowColor: 'black', shadowOffset: { width: 2, height: 3, }, shadowOpacity: 0.50, shadowRadius: 3.84, + elevation: 5 }, versionText: { position: 'absolute', @@ -163,6 +164,6 @@ const styles = StyleSheet.create ({ inscriptionText: { flexDirection: 'row', alignSelf: 'center', - bottom: '-20%' + bottom: normalize(-98) } }) \ No newline at end of file diff --git a/src/FLAD/screens/InscriptionPage.tsx b/src/FLAD/screens/Register.tsx similarity index 92% rename from src/FLAD/screens/InscriptionPage.tsx rename to src/FLAD/screens/Register.tsx index d466459..c1e176e 100644 --- a/src/FLAD/screens/InscriptionPage.tsx +++ b/src/FLAD/screens/Register.tsx @@ -1,5 +1,5 @@ -import React, {Component, useState } from 'react'; -import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; +import React, { useState } from 'react'; +import { View, Image, StyleSheet, Text, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; import {useNavigation} from "@react-navigation/native"; import normalize from '../components/Normalize'; @@ -14,10 +14,6 @@ export default function InscriptionPage() { const [rememberMe, setRememberMe] = useState(false); const navigation = useNavigation(); - const toggleRememberMe = () => { - setRememberMe(!rememberMe); - } - return ( @@ -41,7 +37,7 @@ export default function InscriptionPage() { Lier compte - + console.log("Oui")}> @@ -73,7 +69,7 @@ const styles = StyleSheet.create ({ width: normalize(324), height: normalize(162), alignSelf: 'center', - marginBottom: 50, + marginBottom: normalize(58), marginTop: -20 }, button: { @@ -108,7 +104,7 @@ const styles = StyleSheet.create ({ }, textIntoButton: { fontWeight: 'bold', - fontSize: 15, + fontSize: normalize(17), color: 'white', marginRight: 10 }, @@ -149,7 +145,7 @@ const styles = StyleSheet.create ({ connectionText: { flexDirection: 'row', alignSelf: 'center', - bottom: '-20%' + bottom: normalize(-98) }, buttonSpotify: { width: normalize(350), diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx new file mode 100644 index 0000000..5413573 --- /dev/null +++ b/src/FLAD/screens/Setting.tsx @@ -0,0 +1,318 @@ +import React, { useRef, useState } from 'react'; +import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, TouchableHighlight } from 'react-native'; +import { Svg, Path } from 'react-native-svg'; +import {useNavigation} from "@react-navigation/native"; + +import normalize from '../components/Normalize'; +import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler'; +import CardMusic from '../components/CardMusic'; + +// @ts-ignore +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + +export default function Setting() { + const textInputRef = useRef(null); + const navigation = useNavigation(); + const handleSvgPress = () => { + //@ts-ignore + textInputRef.current?.focus(); + }; + + //Dark Mode + const[isCheckedDarkMode, setIsCheckedDarkMode] = useState(false); + + const toggleDarkMode = + () => setIsCheckedDarkMode(value => !value); + + + //Notification + const[isCheckedNotif, setIsCheckedNotif] = useState(false); + + const toggleNotif = + () => setIsCheckedNotif(value => !value); + + + //Localisation + const[isCheckedLocalisation, setIsCheckedLocalisation] = useState(false); + + const toggleLocalisation = + () => setIsCheckedLocalisation(value => !value); + return ( + + + + Réglages + + + + + + + + + + + + + navigation.navigate('SettingProfil')}> + + + + Emre KARTAL + id. Spotify, mail et mot de passe + + + + + + + + + + + + + + + + Dark Mode + + + + + + + + + + + + + Notification + + + + + + + + + + + + Localisation + + + + + + + + + + + + + En cours d’écoute... + + + + + + + + + + + + + + + console.log("Tkt t deconnecter")}> + Se deconnecter + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginTop: 30, + marginHorizontal: normalize(25), + flex: 1, + backgroundColor: '#141414', + }, + title: { + fontSize: normalize(30), + fontWeight: 'bold', + color: 'white', + alignItems: 'center', + }, + search: { + paddingVertical: 9, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + marginTop: 9, + marginBottom: 22 + }, + inputSearch: { + placeholderTextColor:'red', + color: 'white', + width: normalize(350), + }, + profil: { + paddingVertical: 9, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + marginBottom: normalize(45) + }, + imageProfil: { + marginLeft: 15, + marginRight: 7, + width: 50, + height: 50 + }, + NameProfil: { + fontWeight: 'bold', + color: 'white', + fontSize: normalize(22) + }, + description: { + color: 'white', + fontSize: normalize(15) + }, + profilContainer: { + flex: 1, + marginLeft: 9, + alignItems: 'flex-start', + justifyContent: 'center', + }, + buttonSetting: { + width: normalize(17), + height: normalize(17), + marginRight: 22 + }, + body: { + paddingTop: normalize(10), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45), + paddingLeft: normalize(10), + }, + view: { + backgroundColor: '#fe9500', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + Option: { + flexDirection: 'row', + alignItems: 'center', + }, + secondOption: { + marginTop: normalize(11), + flexDirection: 'row', + alignItems: 'center', + }, + textOption: { + fontSize: normalize(18), + color: 'white', + fontWeight: 'bold', + marginBottom: normalize(8) + }, + firstOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: '#403F3F' + }, + deconnectedOption: { + paddingVertical: 9, + paddingLeft: 5, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + }, + buttonDeconectedOption: { + backgroundColor: '#DF0404', + padding: 5, + borderRadius: 10, + marginLeft: 15 + }, + textDeconnectionOption: { + fontSize: normalize(18), + color: '#F80404', + fontWeight: 'bold', + marginLeft: 12 + }, + notification: { + backgroundColor: '#fe3c30', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + secondOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: '#403F3F' + }, + lastOptionView: { + flex: 1, + marginLeft: 15, + justifyContent: 'space-between', + flexDirection: 'row', + alignItems: 'center' + }, + localisation: { + backgroundColor: '#0835A7', + padding: 5, + borderRadius: 10, + marginLeft: 15, + marginBottom: normalize(11) + }, + lastOption: { + marginTop: normalize(11), + flexDirection: 'row', + alignItems: 'center', + }, + musicActually: { + paddingTop: normalize(17), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + titleMusic: { + flexDirection: 'row', + marginBottom: 5 + }, + mascot: { + width: normalize(90), + height: normalize(90), + position: 'absolute', + right: normalize(0), + top: normalize(10) + } + +}) \ No newline at end of file diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx new file mode 100644 index 0000000..cb963be --- /dev/null +++ b/src/FLAD/screens/SettingProfil.tsx @@ -0,0 +1,323 @@ +import React, { useState, useRef } from 'react'; +import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView, Image } from 'react-native'; +import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'; +import { Svg, Path } from 'react-native-svg'; +import Modal from "react-native-modal"; +import {useNavigation} from "@react-navigation/native"; + +import normalize from '../components/Normalize'; +import * as ImagePicker from 'expo-image-picker'; + +// @ts-ignore +const DismissKeyboard = ({ children }) => ( + Keyboard.dismiss()}> + {children} + +) + + +export default function SettingProfil() { + const [image, setImage] = useState(null); + const navigation = useNavigation(); + const [currentIndex, setCurrentIndex] = useState(0); + const [isModalVisible, setIsModalVisible] = React.useState(false); + + const handleModal = () => setIsModalVisible(() => !isModalVisible); + // @ts-ignore + const viewableItemsChanged = useRef(({ viewableItems }) => { + setCurrentIndex(viewableItems[0].index); + }).current; + + const pickImage = async () => { + // No permissions request is necessary for launching the image library + let result = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.All, + allowsEditing: true, + aspect: [4, 3], + quality: 1, + }); + + console.log(result); + + if (!result.canceled) { + setImage(result.assets[0].uri); + } + }; + + return ( + + + + navigation.navigate('Setting')}> + + + Exit + + + + Profil + + {image && } + + + + + + + + + + Identifiant + + + + Mail + + + + + + + + + + + + + Modifier le mot de passe + + + + + + + + + + + + + + + + console.log("Tkt t deconnecter")}> + Supprimer le compte + + + + + + + + Annuler + + + Mot de passe + + + Modifier + + + + + + Ancien + + + + Nouveau + + + + Confirmer + + + + + Votre mot de passe doit comporter au moins 8 caractères, dont au moins un chiffre, une majuscule et une minuscule. + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginTop: 20, + marginHorizontal: normalize(25), + flex: 1, + backgroundColor: '#141414', + }, + buttonSetting: { + width: normalize(17), + height: normalize(17), + marginRight: 5 + }, + modalContent: { + position: 'absolute', + top: '5%', + left: '-5%', + right: '-5%', + height: '100%', + backgroundColor: '#141414', + borderRadius: 12 + }, + modalView: { + flexDirection: 'row', + marginTop: 20, + marginLeft: 30, + marginBottom: normalize(45) + }, + exit: { + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center' + }, + textExit: { + fontSize: normalize(20), + color: '#454545', + fontWeight: 'bold' + }, + profilHead: { + alignItems: 'center', + }, + title: { + fontSize: normalize(30), + fontWeight: 'bold', + color: 'white', + }, + imageWrapper: { + width: 126, + height: 126, + borderRadius: 63, + borderWidth: 3, + borderColor: 'white', + overflow: 'hidden', + marginVertical: 20, + alignItems: 'center', + justifyContent: 'center', + }, + imageProfil: { + width: 120, + height: 120, + }, + editButton: { + width: 50, + height: 50, + borderRadius: 25, + backgroundColor: '#7C7C7C', + alignItems: 'center', + justifyContent: 'center' + }, + body: { + paddingVertical: 9, + paddingLeft: normalize(10), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + textOption: { + fontSize: normalize(18), + color: 'white', + fontWeight: 'bold', + marginLeft: 12 + }, + deleteOption: { + paddingVertical: 9, + paddingLeft: 5, + backgroundColor: "#232123", + borderRadius: 13, + flexDirection: 'row', + alignItems: 'center', + }, + textOptionPassword: { + fontSize: normalize(18), + color: '#1c77fb', + marginLeft: 12 + }, + buttonDeleteOption: { + backgroundColor: '#DF0404', + padding: 5, + borderRadius: 10, + marginLeft: 15 + }, + textDeleteOption: { + fontSize: normalize(18), + color: '#F80404', + marginLeft: 12 + }, + optionId: { + flexDirection:'row', + marginBottom: 20, + }, + optionMail: { + flexDirection:'row', + }, + textInputId: { + marginLeft: 50, + width: '57%', + color: 'white', + fontSize: normalize(18), + }, + textInputMail: { + marginLeft: 100, + color: 'white', + width: '57%', + fontSize: normalize(18) + }, + passwordOption: { + paddingVertical: 9, + paddingLeft: normalize(10), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start', + marginBottom: normalize(45) + }, + passwordIcon: { + backgroundColor: '#8e8d92', + padding: 5, + paddingHorizontal: 8, + borderRadius: 10, + marginLeft: 10 + }, + optionView: { + flexDirection: 'row', + marginTop: 5 + }, + cancelText: { + fontSize: normalize(20), + color: '#1c77fb' + }, + updateText: { + marginLeft: 60, + fontSize: normalize(20), + color: '#404040' + }, + titlePassword: { + fontSize: normalize(22), + color: 'white', + marginLeft: 50 + }, + warning: { + color: '#98989f', + fontSize: normalize(15) + }, + warningView: { + marginTop: 10, + paddingHorizontal: 40 + }, + bodyModal: { + paddingVertical: 12, + paddingHorizontal: 10, + marginHorizontal: normalize(25), + backgroundColor: "#232123", + borderRadius: 13, + alignItems: 'flex-start' + } +}) \ No newline at end of file