diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx
index ada21a1..2873efb 100644
--- a/src/FLAD/App.tsx
+++ b/src/FLAD/App.tsx
@@ -1,17 +1,24 @@
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';
export default function App() {
return (
-
- {/* */}
-
+
+ //
+ // {/* */}
+ //
);
}
-
+const styles = StyleSheet.create({
+ mainSafeArea: {
+ flex: 1,
+ backgroundColor: "#141414",
+ }
+});
\ No newline at end of file
diff --git a/src/FLAD/components/NextButton.tsx b/src/FLAD/components/NextButton.tsx
index f0c6c9a..49507d7 100644
--- a/src/FLAD/components/NextButton.tsx
+++ b/src/FLAD/components/NextButton.tsx
@@ -3,6 +3,7 @@ import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg';
import { AntDesign } from '@expo/vector-icons';
+// @ts-ignore
export default function NextButton({ percentage, scrollTo }) {
const size = 128;
const strokeWidth = 2;
@@ -12,7 +13,7 @@ export default function NextButton({ percentage, scrollTo }) {
const progressAnimation = useRef(new Animated.Value(0)).current;
const progressRef = useRef(null);
-
+ // @ts-ignore
const animation = (toValue) => {
return Animated.timing(progressAnimation, {
toValue,
@@ -31,12 +32,14 @@ export default function NextButton({ percentage, scrollTo }) {
const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100;
if (progressRef?.current) {
+ // @ts-ignore
progressRef.current.setNativeProps({
strokeDashoffset,
});
}
},
+ // @ts-ignore
[percentage]
);
@@ -54,7 +57,7 @@ export default function NextButton({ percentage, scrollTo }) {
setIsModalVisible(() => !isModalVisible);
-
+ // @ts-ignore
const viewableItemsChanged = useRef(({ viewableItems }) => {
setCurrentIndex(viewableItems[0].index);
}).current;
@@ -26,6 +27,7 @@ export default function Onboarding() {
const scrollTo = () => {
if(currentIndex < slides.length - 1) {
+ // @ts-ignore
slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
} else {
setIsModalVisible(() => !isModalVisible);
@@ -33,6 +35,7 @@ export default function Onboarding() {
};
return (
+ // @ts-ignore
- {handleModal(); navigation.navigate('Login');}}>
+ {handleModal();
+ // @ts-ignore
+ navigation.navigate('Login');
+ }}>
CONTINUER AVEC SPOTIFY
{handleModal(); navigation.navigate('Inscription');}}>
S’INSCRIRE MAINTENANT
+
{handleModal(); navigation.navigate('Login');}}>
SE CONNECTER
@@ -92,9 +101,9 @@ const styles = StyleSheet.create({
backgroundColor: '#141414'
},
imageLogo: {
- width: 280,
- height: 140,
- marginBottom: 100
+ width: normalize(324),
+ height: normalize(162),
+ marginBottom: '25%'
},
balise: {
flex: 1,
@@ -141,7 +150,7 @@ const styles = StyleSheet.create({
right: 10,
color: 'gray',
fontWeight: 'bold',
- fontSize: 15
+ fontSize: normalize(17)
},
buttonConnection: {
width: 262,
@@ -168,7 +177,7 @@ const styles = StyleSheet.create({
text: {
fontWeight: 'bold',
color: 'white',
- fontSize: 16
+ fontSize: normalize(18)
},
button2Connection: {
width: '100%',
diff --git a/src/FLAD/components/OnboardingItem.tsx b/src/FLAD/components/OnboardingItem.tsx
index e130da0..4038cb7 100644
--- a/src/FLAD/components/OnboardingItem.tsx
+++ b/src/FLAD/components/OnboardingItem.tsx
@@ -1,19 +1,18 @@
import React from 'react';
import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native';
+import normalize from '../components/Normalize';
import slides from '../data/slides';
+// @ts-ignore
export default function Onboarding({ item }) {
const { width } = useWindowDimensions();
return (
-
- {item.title}
- {item.description}
-
-
+ {item.title}
+ {item.description}
);
}
@@ -21,7 +20,6 @@ export default function Onboarding({ item }) {
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'flex-start',
marginTop: -60
},
image: {
@@ -29,7 +27,7 @@ const styles = StyleSheet.create({
},
title: {
fontWeight: '800',
- fontSize: 28,
+ fontSize: normalize(32),
marginBottom: 10,
color: 'white',
textAlign: 'left',
@@ -40,6 +38,7 @@ const styles = StyleSheet.create({
description: {
fontWeight: '300',
color: 'white',
+ fontSize: normalize(16),
textAlign: 'left',
paddingRight: 30,
paddingLeft: 20
diff --git a/src/FLAD/data/slides.tsx b/src/FLAD/data/slides.tsx
index 9ce8c0d..1659da4 100644
--- a/src/FLAD/data/slides.tsx
+++ b/src/FLAD/data/slides.tsx
@@ -1,20 +1,20 @@
export default [
{
- id: '1',
- title: 'Bienvenue sur Flad',
- description: 'L\'application pour découvrir de nouvelle music et vous faires de nouveaux amis',
- image: require('../assets/images/Board_Image.png')
+ id: '1',
+ title: 'Bienvenue sur Flad',
+ description: 'L\'application pour découvrir de nouvelles musiques et vous faire de nouveaux amis',
+ image: require('../assets/images/Board_Image.png')
},
{
- id: '2',
- title: 'Tous les jours de nouvelle music qui peut vous plaire',
- description: 'L\'application apprend de vous et de vos amis pour vos suggérer des albums et séries',
- image: require('../assets/images/Board_Image2.png')
+ id: '2',
+ title: 'Tous les jours de nouvelles musiques qui peuvent vous plaire',
+ description: 'L\'application apprends de vous et de vos amis pour vous suggérer des albums et des musics',
+ image: require('../assets/images/Board_Image2.png')
},
{
- id: '3',
- title: 'La music ça se partage',
- description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques',
- image: require('../assets/images/Board_Image3.png')
+ id: '3',
+ title: 'La musique ça se partage',
+ description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques',
+ image: require('../assets/images/Board_Image3.png')
}
]
\ No newline at end of file
diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx
index 24b51d9..9243d9f 100644
--- a/src/FLAD/navigation/Navigation.tsx
+++ b/src/FLAD/navigation/Navigation.tsx
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import FavoriteNavigation from './FavoriteNavigation';
+// @ts-ignore
import FontAwesome from 'react-native-vector-icons/FontAwesome';
export default function Navigation() {
@@ -12,19 +13,19 @@ export default function Navigation() {
primary: 'rgb(255, 45, 85)',
card: 'rgb(35, 33, 35)',
border: 'rgb(35, 33, 35)',
- text: 'rgb(255, 255, 255)',
+ text: 'rgb(138, 138, 138)',
}
};
return (
+ // @ts-ignore
(
Keyboard.dismiss()}>
{children}
@@ -25,15 +27,15 @@ export default function InscriptionPage() {
S'INSCRIRE
-
+
-
+
-
+
@@ -44,10 +46,13 @@ export default function InscriptionPage() {
console.log("Oui")}>
-
- Tu as déjà un compte?
- navigation.navigate('Login')}>
- Se connecter
+
+ Tu as déjà un compte?
+ navigation.navigate('Login')}
+ >
+ Se connecter
@@ -60,34 +65,31 @@ const styles = StyleSheet.create ({
container: {
flex: 1
},
- containerInput: {
- justifyContent: 'center'
- },
image: {
flex: 1,
justifyContent: 'center',
},
imageLogo: {
- width: 280,
- height: 140,
+ width: normalize(324),
+ height: normalize(162),
alignSelf: 'center',
marginBottom: 50,
marginTop: -20
},
button: {
- marginTop: 40,
+ marginTop: '10%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
backgroundColor: 'white',
- width: 86,
- height: 86,
+ width: normalize(100),
+ height: normalize(100),
borderRadius: 21
},
buttonImage: {
- width: 40,
- height: 40
+ width: normalize(46),
+ height: normalize(46),
},
versionText: {
position: 'absolute',
@@ -95,11 +97,11 @@ const styles = StyleSheet.create ({
right: 20,
color: 'gray',
fontWeight: 'bold',
- fontSize: 15
+ fontSize: normalize(17)
},
text: {
fontWeight: 'bold',
- fontSize: 25,
+ fontSize: normalize(29),
alignSelf: 'center',
color: 'white',
marginBottom: 15
@@ -120,12 +122,11 @@ const styles = StyleSheet.create ({
shadowRadius: 3.84,
},
input: {
- width: 300,
- height: 42,
+ width: normalize(350),
+ height: normalize(50),
borderRadius: 30,
color: 'black',
backgroundColor: 'white',
- fontSize: 15,
alignSelf: 'center',
marginBottom: 20,
paddingLeft: 50,
@@ -135,24 +136,24 @@ const styles = StyleSheet.create ({
position: 'absolute',
width: 20,
height: 20,
- left: '17%',
+ left: normalize(80),
bottom: '50%'
},
iconLock : {
position: 'absolute',
width: 20,
height: 20,
- left: '17%',
+ left: normalize(80),
bottom: '50%'
},
- inscriptionText: {
+ connectionText: {
flexDirection: 'row',
alignSelf: 'center',
- bottom: -80
+ bottom: '-20%'
},
buttonSpotify: {
- width: 300,
- height: 42,
+ width: normalize(350),
+ height: normalize(50),
backgroundColor: '#24CF5F',
justifyContent: 'center',
alignItems: 'center',
diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx
index c631a7d..74cd16e 100644
--- a/src/FLAD/screens/favoritePage.tsx
+++ b/src/FLAD/screens/favoritePage.tsx
@@ -20,9 +20,9 @@ export default function favoritePage() {
Favoris
Retrouvez ici vos musiques favorites
-
+
- (
// navigation.navigate("")}>
@@ -40,11 +40,12 @@ export default function favoritePage() {
const styles = StyleSheet.create({
body: {
flex: 1,
- backgroundColor: "#141414"
+ justifyContent: 'center',
+ backgroundColor: "#141414",
},
titleContainer: {
+ marginTop: 20,
marginLeft: 20,
- marginVertical: 60,
},
title: {
fontSize: 24,
@@ -55,8 +56,6 @@ const styles = StyleSheet.create({
marginTop: 10,
fontSize: 18,
color: '#787878',
- },
- scroll: {
- marginTop: -30
+ marginBottom: 20
}
});
diff --git a/src/FLAD/screens/loginPage.tsx b/src/FLAD/screens/loginPage.tsx
index d04d7b9..0d792c1 100644
--- a/src/FLAD/screens/loginPage.tsx
+++ b/src/FLAD/screens/loginPage.tsx
@@ -1,7 +1,9 @@
import React, {Component, useState } from 'react';
import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
import {useNavigation} from "@react-navigation/native";
+import normalize from '../components/Normalize';
+// @ts-ignore
const DismissKeyboard = ({ children }) => (
Keyboard.dismiss()}>
{children}
@@ -25,11 +27,11 @@ export default function loginPage() {
SE CONNECTER
-
+
-
+
@@ -41,9 +43,12 @@ export default function loginPage() {
- Tu n'as pas de compte?
- navigation.navigate('Inscription')}>
- S'inscrire
+ Tu n'as pas de compte?
+ navigation.navigate('Inscription')}
+ >
+ S'inscrire
@@ -58,56 +63,51 @@ const styles = StyleSheet.create ({
container: {
flex: 1,
},
- containerInput: {
- justifyContent: 'center',
- alignItems: 'flex-start',
- },
image: {
flex: 1,
justifyContent: 'center',
},
imageLogo: {
- width: 280,
- height: 140,
+ width: normalize(324),
+ height: normalize(162),
alignSelf: 'center',
- marginBottom: 100
+ marginBottom: '25%'
},
button: {
- marginTop: 40,
+ marginTop: '10%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
backgroundColor: 'white',
- width: 86,
- height: 86,
+ width: normalize(100),
+ height: normalize(100),
borderRadius: 21
},
buttonImage: {
- width: 40,
- height: 40
+ width: normalize(46),
+ height: normalize(46),
},
iconUser : {
position: 'absolute',
width: 20,
height: 20,
- left: '17%',
+ left: normalize(80),
bottom: '50%'
},
iconLock : {
position: 'absolute',
width: 20,
height: 20,
- left: '17%',
+ left: normalize(80),
bottom: '50%'
},
input: {
- width: 300,
- height: 42,
+ width: normalize(350),
+ height: normalize(50),
borderRadius: 30,
color: 'black',
backgroundColor: 'white',
- fontSize: 15,
alignSelf: 'center',
marginBottom: 20,
paddingLeft: 50,
@@ -115,7 +115,7 @@ const styles = StyleSheet.create ({
},
text: {
fontWeight: 'bold',
- fontSize: 25,
+ fontSize: normalize(29),
alignSelf: 'center',
color: 'white',
marginBottom: 15
@@ -135,14 +135,14 @@ const styles = StyleSheet.create ({
right: 20,
color: 'gray',
fontWeight: 'bold',
- fontSize: 15
+ fontSize: normalize(17)
},
rememberMeContainer: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center',
- marginBottom: 20,
- marginTop: 10
+ marginBottom: '5%',
+ marginTop: normalize(10)
},
checkbox: {
width: 20,
@@ -154,7 +154,7 @@ const styles = StyleSheet.create ({
},
rememberMeText: {
fontWeight: 'bold',
- fontSize: 17,
+ fontSize: normalize(19),
color: 'white'
},
checkboxChecked: {
@@ -163,6 +163,6 @@ const styles = StyleSheet.create ({
inscriptionText: {
flexDirection: 'row',
alignSelf: 'center',
- bottom: -80
+ bottom: '-20%'
}
})
\ No newline at end of file