FLAD_Dev
/
FLAD
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive view ✅

Browse Source
pull/5/head
Emre KARTAL 2 years ago
parent dc71def851
commit 554688f21a
11 changed files with 140 additions and 101 deletions
Show Stats Download Patch File Download Diff File

17
src/FLAD/App.tsx
Unescape View File

@ -1,17 +1,24 @@
import Navigation from './navigation/Navigation'; import Navigation from './navigation/Navigation';
import {SafeAreaProvider,useSafeAreaInsets} from 'react-native-safe-area-context'; import { StyleSheet,SafeAreaView } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import StartNavigation from './navigation/StartNavigation'; import StartNavigation from './navigation/StartNavigation';
export default function App() { export default function App() {
return ( return (
<SafeAreaProvider> <SafeAreaProvider>
{/* <Navigation/> */} <StartNavigation/>
<StartNavigation/>
</SafeAreaProvider> </SafeAreaProvider>
// <SafeAreaView style={styles.mainSafeArea}>
// {/* <Navigation/> */}
// </SafeAreaView>
); );
} }
const styles = StyleSheet.create({
mainSafeArea: {
flex: 1,
backgroundColor: "#141414",
}
});

9
src/FLAD/components/NextButton.tsx
Unescape View File

@ -3,6 +3,7 @@ import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg'; import Svg, { G, Circle } from 'react-native-svg';
import { AntDesign } from '@expo/vector-icons'; import { AntDesign } from '@expo/vector-icons';
// @ts-ignore
export default function NextButton({ percentage, scrollTo }) { export default function NextButton({ percentage, scrollTo }) {
const size = 128; const size = 128;
const strokeWidth = 2; const strokeWidth = 2;
@ -12,7 +13,7 @@ export default function NextButton({ percentage, scrollTo }) {
const progressAnimation = useRef(new Animated.Value(0)).current; const progressAnimation = useRef(new Animated.Value(0)).current;
const progressRef = useRef(null); const progressRef = useRef(null);
// @ts-ignore
const animation = (toValue) => { const animation = (toValue) => {
return Animated.timing(progressAnimation, { return Animated.timing(progressAnimation, {
toValue, toValue,
@ -31,12 +32,14 @@ export default function NextButton({ percentage, scrollTo }) {
const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100; const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100;
if (progressRef?.current) { if (progressRef?.current) {
// @ts-ignore
progressRef.current.setNativeProps({ progressRef.current.setNativeProps({
strokeDashoffset, strokeDashoffset,
}); });
} }
}, },
// @ts-ignore
[percentage] [percentage]
); );
@ -54,7 +57,7 @@ export default function NextButton({ percentage, scrollTo }) {
<Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/> <Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
<Circle <Circle
ref={progressRef} ref={progressRef}
stroke="#3F2F78" stroke="#b50909"
fill="#141414" fill="#141414"
cx={center} cx={center}
cy={center} cy={center}
@ -79,7 +82,7 @@ const styles = StyleSheet.create({
}, },
button: { button: {
position: 'absolute', position: 'absolute',
backgroundColor: '#3F2F78', backgroundColor: '#b50909',
borderRadius: 100, borderRadius: 100,
padding: 20 padding: 20
} }

18
src/FLAD/components/Normalize.tsx
Unescape View File

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

23
src/FLAD/components/Onboarding.tsx
Unescape View File

@ -3,6 +3,7 @@ import { View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBack
import Modal from "react-native-modal"; import Modal from "react-native-modal";
import {useNavigation} from "@react-navigation/native"; import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
import OnboardingItem from './OnboardingItem'; import OnboardingItem from './OnboardingItem';
import Paginator from './Paginator'; import Paginator from './Paginator';
import NextButton from './NextButton'; import NextButton from './NextButton';
@ -17,7 +18,7 @@ export default function Onboarding() {
const [isModalVisible, setIsModalVisible] = React.useState(false); const [isModalVisible, setIsModalVisible] = React.useState(false);
const handleModal = () => setIsModalVisible(() => !isModalVisible); const handleModal = () => setIsModalVisible(() => !isModalVisible);
// @ts-ignore
const viewableItemsChanged = useRef(({ viewableItems }) => { const viewableItemsChanged = useRef(({ viewableItems }) => {
setCurrentIndex(viewableItems[0].index); setCurrentIndex(viewableItems[0].index);
}).current; }).current;
@ -26,6 +27,7 @@ export default function Onboarding() {
const scrollTo = () => { const scrollTo = () => {
if(currentIndex < slides.length - 1) { if(currentIndex < slides.length - 1) {
// @ts-ignore
slidesRef.current.scrollToIndex({ index: currentIndex + 1 }); slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
} else { } else {
setIsModalVisible(() => !isModalVisible); setIsModalVisible(() => !isModalVisible);
@ -33,6 +35,7 @@ export default function Onboarding() {
}; };
return ( return (
// @ts-ignore
<View style={styles.container}> <View style={styles.container}>
<View style={styles.balise}> <View style={styles.balise}>
<FlatList <FlatList
@ -67,12 +70,18 @@ export default function Onboarding() {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/> <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<TouchableOpacity style={styles.buttonConnection} onPress={() => {handleModal(); navigation.navigate('Login');}}> <TouchableOpacity
style={styles.buttonConnection}
onPress={() => {handleModal();
// @ts-ignore
navigation.navigate('Login');
}}>
<Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text> <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Inscription');}}> <TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Inscription');}}>
<Text style={styles.text}>S’INSCRIRE MAINTENANT</Text> <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}> <TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
<Text style={styles.text}>SE CONNECTER</Text> <Text style={styles.text}>SE CONNECTER</Text>
</TouchableOpacity> </TouchableOpacity>
@ -92,9 +101,9 @@ const styles = StyleSheet.create({
backgroundColor: '#141414' backgroundColor: '#141414'
}, },
imageLogo: { imageLogo: {
width: 280, width: normalize(324),
height: 140, height: normalize(162),
marginBottom: 100 marginBottom: '25%'
}, },
balise: { balise: {
flex: 1, flex: 1,
@ -141,7 +150,7 @@ const styles = StyleSheet.create({
right: 10, right: 10,
color: 'gray', color: 'gray',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15 fontSize: normalize(17)
}, },
buttonConnection: { buttonConnection: {
width: 262, width: 262,
@ -168,7 +177,7 @@ const styles = StyleSheet.create({
text: { text: {
fontWeight: 'bold', fontWeight: 'bold',
color: 'white', color: 'white',
fontSize: 16 fontSize: normalize(18)
}, },
button2Connection: { button2Connection: {
width: '100%', width: '100%',

13
src/FLAD/components/OnboardingItem.tsx
Unescape View File

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

24
src/FLAD/data/slides.tsx
Unescape View File

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

7
src/FLAD/navigation/Navigation.tsx
Unescape View File

@ -2,6 +2,7 @@ import React, {Component} from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import FavoriteNavigation from './FavoriteNavigation'; import FavoriteNavigation from './FavoriteNavigation';
// @ts-ignore
import FontAwesome from 'react-native-vector-icons/FontAwesome'; import FontAwesome from 'react-native-vector-icons/FontAwesome';
export default function Navigation() { export default function Navigation() {
@ -12,18 +13,18 @@ export default function Navigation() {
primary: 'rgb(255, 45, 85)', primary: 'rgb(255, 45, 85)',
card: 'rgb(35, 33, 35)', card: 'rgb(35, 33, 35)',
border: 'rgb(35, 33, 35)', border: 'rgb(35, 33, 35)',
text: 'rgb(255, 255, 255)', text: 'rgb(138, 138, 138)',
} }
}; };
return ( return (
// @ts-ignore
<NavigationContainer theme={MyTheme}> <NavigationContainer theme={MyTheme}>
<BottomTabNavigator.Navigator <BottomTabNavigator.Navigator
initialRouteName="Spots" initialRouteName="Spots"
screenOptions={{ screenOptions={{
//tabBarShowLabel: false, //to remove the titles under the icons //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: 90, marginHorizontal: 25},
tabBarIconStyle: { marginBottom: -20 }, tabBarLabelStyle: { bottom: 5 }
tabBarLabelStyle: { bottom: '-70%' }
}}> }}>
<BottomTabNavigator.Screen name="Spots" component={FavoriteNavigation} <BottomTabNavigator.Screen name="Spots" component={FavoriteNavigation}

2
src/FLAD/package.json
Unescape View File

@ -34,6 +34,8 @@
"react-native-svg": "13.4.0", "react-native-svg": "13.4.0",
"react-native-vector-icons": "^9.2.0", "react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.9", "react-native-web": "~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"rive-react-native": "^3.0.41" "rive-react-native": "^3.0.41"
}, },
"devDependencies": { "devDependencies": {

57
src/FLAD/screens/InscriptionPage.tsx
Unescape View File

@ -1,7 +1,9 @@
import React, {Component, useState } from 'react'; import React, {Component, useState } from 'react';
import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
import {useNavigation} from "@react-navigation/native"; import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
// @ts-ignore
const DismissKeyboard = ({ children }) => ( const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}> <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children} {children}
@ -25,15 +27,15 @@ export default function InscriptionPage() {
</Text> </Text>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/> <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<Text style={styles.text}>S'INSCRIRE</Text> <Text style={styles.text}>S'INSCRIRE</Text>
<View style={styles.containerInput}> <View>
<TextInput style={[styles.input, styles.shadow]}/> <TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} /> <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
</View> </View>
<View style={styles.containerInput}> <View>
<TextInput style={[styles.input, styles.shadow]}/> <TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} /> <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
</View> </View>
<View style={styles.containerInput}> <View>
<TextInput style={[styles.input, styles.shadow]}/> <TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} /> <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
</View> </View>
@ -44,10 +46,13 @@ export default function InscriptionPage() {
<TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}> <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
<Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/> <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.inscriptionText}> <View style={styles.connectionText}>
<Text style={{fontSize: 16, color: 'white'}}>Tu as déjà un compte? </Text> <Text style={{fontSize: normalize(18), color: 'white'}}>Tu as déjà un compte? </Text>
<TouchableOpacity onPress={() => navigation.navigate('Login')}> <TouchableOpacity
<Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text> // @ts-ignore
onPress={() => navigation.navigate('Login')}
>
<Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ImageBackground> </ImageBackground>
@ -60,34 +65,31 @@ const styles = StyleSheet.create ({
container: { container: {
flex: 1 flex: 1
}, },
containerInput: {
justifyContent: 'center'
},
image: { image: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
}, },
imageLogo: { imageLogo: {
width: 280, width: normalize(324),
height: 140, height: normalize(162),
alignSelf: 'center', alignSelf: 'center',
marginBottom: 50, marginBottom: 50,
marginTop: -20 marginTop: -20
}, },
button: { button: {
marginTop: 40, marginTop: '10%',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
alignSelf: 'center', alignSelf: 'center',
backgroundColor: 'white', backgroundColor: 'white',
width: 86, width: normalize(100),
height: 86, height: normalize(100),
borderRadius: 21 borderRadius: 21
}, },
buttonImage: { buttonImage: {
width: 40, width: normalize(46),
height: 40 height: normalize(46),
}, },
versionText: { versionText: {
position: 'absolute', position: 'absolute',
@ -95,11 +97,11 @@ const styles = StyleSheet.create ({
right: 20, right: 20,
color: 'gray', color: 'gray',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15 fontSize: normalize(17)
}, },
text: { text: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 25, fontSize: normalize(29),
alignSelf: 'center', alignSelf: 'center',
color: 'white', color: 'white',
marginBottom: 15 marginBottom: 15
@ -120,12 +122,11 @@ const styles = StyleSheet.create ({
shadowRadius: 3.84, shadowRadius: 3.84,
}, },
input: { input: {
width: 300, width: normalize(350),
height: 42, height: normalize(50),
borderRadius: 30, borderRadius: 30,
color: 'black', color: 'black',
backgroundColor: 'white', backgroundColor: 'white',
fontSize: 15,
alignSelf: 'center', alignSelf: 'center',
marginBottom: 20, marginBottom: 20,
paddingLeft: 50, paddingLeft: 50,
@ -135,24 +136,24 @@ const styles = StyleSheet.create ({
position: 'absolute', position: 'absolute',
width: 20, width: 20,
height: 20, height: 20,
left: '17%', left: normalize(80),
bottom: '50%' bottom: '50%'
}, },
iconLock : { iconLock : {
position: 'absolute', position: 'absolute',
width: 20, width: 20,
height: 20, height: 20,
left: '17%', left: normalize(80),
bottom: '50%' bottom: '50%'
}, },
inscriptionText: { connectionText: {
flexDirection: 'row', flexDirection: 'row',
alignSelf: 'center', alignSelf: 'center',
bottom: -80 bottom: '-20%'
}, },
buttonSpotify: { buttonSpotify: {
width: 300, width: normalize(350),
height: 42, height: normalize(50),
backgroundColor: '#24CF5F', backgroundColor: '#24CF5F',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',

13
src/FLAD/screens/favoritePage.tsx
Unescape View File

@ -20,9 +20,9 @@ export default function favoritePage() {
<Text style={styles.title}>Favoris</Text> <Text style={styles.title}>Favoris</Text>
<Text style={styles.description}>Retrouvez ici vos musiques favorites</Text> <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
</View> </View>
<ScrollView style={styles.scroll}> <ScrollView>
<View> <View>
<FlatList <FlatList style={{marginBottom: 80}}
data={MUSIC_LIST} data={MUSIC_LIST}
renderItem={({ item }) => ( renderItem={({ item }) => (
//<TouchableHighlight onPress={() => navigation.navigate("")}> //<TouchableHighlight onPress={() => navigation.navigate("")}>
@ -40,11 +40,12 @@ export default function favoritePage() {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
body: { body: {
flex: 1, flex: 1,
backgroundColor: "#141414" justifyContent: 'center',
backgroundColor: "#141414",
}, },
titleContainer: { titleContainer: {
marginTop: 20,
marginLeft: 20, marginLeft: 20,
marginVertical: 60,
}, },
title: { title: {
fontSize: 24, fontSize: 24,
@ -55,8 +56,6 @@ const styles = StyleSheet.create({
marginTop: 10, marginTop: 10,
fontSize: 18, fontSize: 18,
color: '#787878', color: '#787878',
}, marginBottom: 20
scroll: {
marginTop: -30
} }
}); });

56
src/FLAD/screens/loginPage.tsx
Unescape View File

@ -1,7 +1,9 @@
import React, {Component, useState } from 'react'; import React, {Component, useState } from 'react';
import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native'; import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
import {useNavigation} from "@react-navigation/native"; import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
// @ts-ignore
const DismissKeyboard = ({ children }) => ( const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}> <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children} {children}
@ -25,11 +27,11 @@ export default function loginPage() {
</Text> </Text>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/> <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<Text style={styles.text}>SE CONNECTER</Text> <Text style={styles.text}>SE CONNECTER</Text>
<View style={styles.containerInput}> <View>
<TextInput style={[styles.input, styles.shadow]}/> <TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} /> <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
</View> </View>
<View style={styles.containerInput}> <View>
<TextInput style={[styles.input, styles.shadow]}/> <TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} /> <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
</View> </View>
@ -41,9 +43,12 @@ export default function loginPage() {
<Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/> <Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.inscriptionText}> <View style={styles.inscriptionText}>
<Text style={{fontSize: 16, color: 'white'}}>Tu n'as pas de compte? </Text> <Text style={{fontSize: normalize(18), color: 'white'}}>Tu n'as pas de compte? </Text>
<TouchableOpacity onPress={() => navigation.navigate('Inscription')}> <TouchableOpacity
<Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text> // @ts-ignore
onPress={() => navigation.navigate('Inscription')}
>
<Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ImageBackground> </ImageBackground>
@ -58,56 +63,51 @@ const styles = StyleSheet.create ({
container: { container: {
flex: 1, flex: 1,
}, },
containerInput: {
justifyContent: 'center',
alignItems: 'flex-start',
},
image: { image: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
}, },
imageLogo: { imageLogo: {
width: 280, width: normalize(324),
height: 140, height: normalize(162),
alignSelf: 'center', alignSelf: 'center',
marginBottom: 100 marginBottom: '25%'
}, },
button: { button: {
marginTop: 40, marginTop: '10%',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
alignSelf: 'center', alignSelf: 'center',
backgroundColor: 'white', backgroundColor: 'white',
width: 86, width: normalize(100),
height: 86, height: normalize(100),
borderRadius: 21 borderRadius: 21
}, },
buttonImage: { buttonImage: {
width: 40, width: normalize(46),
height: 40 height: normalize(46),
}, },
iconUser : { iconUser : {
position: 'absolute', position: 'absolute',
width: 20, width: 20,
height: 20, height: 20,
left: '17%', left: normalize(80),
bottom: '50%' bottom: '50%'
}, },
iconLock : { iconLock : {
position: 'absolute', position: 'absolute',
width: 20, width: 20,
height: 20, height: 20,
left: '17%', left: normalize(80),
bottom: '50%' bottom: '50%'
}, },
input: { input: {
width: 300, width: normalize(350),
height: 42, height: normalize(50),
borderRadius: 30, borderRadius: 30,
color: 'black', color: 'black',
backgroundColor: 'white', backgroundColor: 'white',
fontSize: 15,
alignSelf: 'center', alignSelf: 'center',
marginBottom: 20, marginBottom: 20,
paddingLeft: 50, paddingLeft: 50,
@ -115,7 +115,7 @@ const styles = StyleSheet.create ({
}, },
text: { text: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 25, fontSize: normalize(29),
alignSelf: 'center', alignSelf: 'center',
color: 'white', color: 'white',
marginBottom: 15 marginBottom: 15
@ -135,14 +135,14 @@ const styles = StyleSheet.create ({
right: 20, right: 20,
color: 'gray', color: 'gray',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15 fontSize: normalize(17)
}, },
rememberMeContainer: { rememberMeContainer: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
alignSelf: 'center', alignSelf: 'center',
marginBottom: 20, marginBottom: '5%',
marginTop: 10 marginTop: normalize(10)
}, },
checkbox: { checkbox: {
width: 20, width: 20,
@ -154,7 +154,7 @@ const styles = StyleSheet.create ({
}, },
rememberMeText: { rememberMeText: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 17, fontSize: normalize(19),
color: 'white' color: 'white'
}, },
checkboxChecked: { checkboxChecked: {
@ -163,6 +163,6 @@ const styles = StyleSheet.create ({
inscriptionText: { inscriptionText: {
flexDirection: 'row', flexDirection: 'row',
alignSelf: 'center', alignSelf: 'center',
bottom: -80 bottom: '-20%'
} }
}) })
Write Preview
Loading…
Cancel
Save