Responsive view ✅

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 (
-    
     <SafeAreaProvider>
-      {/* <Navigation/> */}
         <StartNavigation/>
     </SafeAreaProvider>
+    // <SafeAreaView style={styles.mainSafeArea}>
+    //   {/* <Navigation/> */}
+    // </SafeAreaView>
 
   );
 }
 
-
+const styles = StyleSheet.create({
+  mainSafeArea: {
+    flex: 1,
+    backgroundColor: "#141414",
+  }
+});

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 }) {
                     <Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
                     <Circle
                         ref={progressRef}
-                        stroke="#3F2F78"
+                        stroke="#b50909"
                         fill="#141414"
                         cx={center}
                         cy={center}
@@ -79,7 +82,7 @@ const styles = StyleSheet.create({
     },
     button: {
         position: 'absolute',
-        backgroundColor: '#3F2F78',
+        backgroundColor: '#b50909',
         borderRadius: 100,
         padding: 20
     }

src/FLAD/components/Normalize.tsx

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

src/FLAD/components/Onboarding.tsx

@@ -3,6 +3,7 @@ import { View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBack
 import Modal from "react-native-modal";
 import {useNavigation} from "@react-navigation/native";
 
+import normalize from '../components/Normalize';
 import OnboardingItem from './OnboardingItem';
 import Paginator from './Paginator';
 import NextButton from './NextButton';
@@ -17,7 +18,7 @@ export default function Onboarding() {
     const [isModalVisible, setIsModalVisible] = React.useState(false);
 
     const handleModal = () => 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
         <View style={styles.container}>
             <View style={styles.balise}>
                 <FlatList 
@@ -67,12 +70,18 @@ export default function Onboarding() {
                                 </View>
                             </TouchableOpacity>
                             <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>
                             </TouchableOpacity>
                             <TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Inscription');}}>
                                 <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
                             </TouchableOpacity>
+                            
                             <TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
                                 <Text style={styles.text}>SE CONNECTER</Text>
                             </TouchableOpacity>
@@ -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%',

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 (
         <View style={[styles.container, { width }]}>
             <Image source={item.image} style={[styles.image, { width, resizeMode: 'contain'}]} />
-
             <Text style={styles.title}>{item.title}</Text>
             <Text style={styles.description}>{item.description}</Text>
-
-
         </View>
     );
 }
@@ -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

src/FLAD/data/slides.tsx

@@ -2,18 +2,18 @@ export default [
     {
     id: '1',
     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')
     },
     {
     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',
+    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',
+    title: 'La musique ça se partage',
     description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques',
     image: require('../assets/images/Board_Image3.png')
     }

src/FLAD/navigation/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,18 +13,18 @@ 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
       <NavigationContainer theme={MyTheme}>
           <BottomTabNavigator.Navigator 
             initialRouteName="Spots" 
             screenOptions={{
               //tabBarShowLabel: false, //to remove the titles under the icons
               tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 90, marginHorizontal: 25},
-              tabBarIconStyle: { marginBottom: -20 },
-              tabBarLabelStyle: { bottom: '-70%' }
+              tabBarLabelStyle: { bottom: 5 }
 
             }}>
               <BottomTabNavigator.Screen name="Spots" component={FavoriteNavigation}

src/FLAD/package.json

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

src/FLAD/screens/InscriptionPage.tsx

@@ -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 }) => (
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
         {children}
@@ -25,15 +27,15 @@ export default function InscriptionPage() {
                     </Text>
                     <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
                     <Text style={styles.text}>S'INSCRIRE</Text>
-                    <View style={styles.containerInput}>
+                    <View>
                         <TextInput style={[styles.input, styles.shadow]}/>
                         <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
                     </View>
-                    <View style={styles.containerInput}>
+                    <View>
                         <TextInput style={[styles.input, styles.shadow]}/>
                         <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
                     </View>
-                    <View style={styles.containerInput}>
+                    <View>
                         <TextInput style={[styles.input, styles.shadow]}/>
                         <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
                     </View>
@@ -44,10 +46,13 @@ export default function InscriptionPage() {
                     <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
                         <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
                     </TouchableOpacity>
-                    <View style={styles.inscriptionText}>
-                        <Text style={{fontSize: 16, color: 'white'}}>Tu as déjà un compte? </Text>
-                        <TouchableOpacity onPress={() => navigation.navigate('Login')}>
-                            <Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
+                    <View style={styles.connectionText}>
+                        <Text style={{fontSize: normalize(18), color: 'white'}}>Tu as déjà un compte? </Text>
+                        <TouchableOpacity 
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('Login')}
+                        >
+                            <Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
                         </TouchableOpacity>
                     </View>
                 </ImageBackground>
@@ -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',

src/FLAD/screens/favoritePage.tsx

@@ -20,9 +20,9 @@ export default function favoritePage() {
                 <Text style={styles.title}>Favoris</Text>
                 <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
             </View>
-            <ScrollView style={styles.scroll}>
+            <ScrollView>
                 <View>
-                    <FlatList
+                    <FlatList style={{marginBottom: 80}}
                         data={MUSIC_LIST}
                         renderItem={({ item }) => (
                             //<TouchableHighlight onPress={() => navigation.navigate("")}>
@@ -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
     }
 });

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 }) => (
     <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
         {children}
@@ -25,11 +27,11 @@ export default function loginPage() {
                     </Text>
                     <Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
                     <Text style={styles.text}>SE CONNECTER</Text>
-                    <View style={styles.containerInput}>
+                    <View>
                         <TextInput style={[styles.input, styles.shadow]}/>
                         <Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
                     </View>
-                    <View style={styles.containerInput}>
+                    <View>
                         <TextInput style={[styles.input, styles.shadow]}/>
                         <Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
                     </View>
@@ -41,9 +43,12 @@ export default function loginPage() {
                         <Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/>
                     </TouchableOpacity>
                     <View style={styles.inscriptionText}>
-                        <Text style={{fontSize: 16, color: 'white'}}>Tu n'as pas de compte? </Text>
-                        <TouchableOpacity onPress={() => navigation.navigate('Inscription')}>
-                            <Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
+                        <Text style={{fontSize: normalize(18), color: 'white'}}>Tu n'as pas de compte? </Text>
+                        <TouchableOpacity 
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('Inscription')}
+                        >
+                            <Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
                         </TouchableOpacity>
                     </View>
                 </ImageBackground>
@@ -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%'
     }
 })