Onboarding and login page realized, add new Images and navigation has been improved ✅

src/FLAD/App.tsx

@@ -1,22 +1,16 @@
-import { LinearGradient } from 'expo-linear-gradient';
-import { StatusBar } from 'expo-status-bar';
-import { useState, useTransition } from 'react';
-import FavoritePage from './screens/favoritePage';
-import { cards as cardArray } from './data/data'
 import Navigation from './navigation/Navigation';
-import { NavigationContainer } from '@react-navigation/native';
+import LoginPage from './screens/loginPage';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {SafeAreaProvider,useSafeAreaInsets} from 'react-native-safe-area-context';
-import { Animated, Dimensions, ImageBackground, StyleSheet, Text, View } from 'react-native';
+import Onboarding from './components/Onboarding';
-import Card from './components/Card';
-
 
 export default function App() {
 
-const Stack = createBottomTabNavigator();
-
   return (
-    
+    <Onboarding/>
-      <Navigation/>
+    //<LoginPage/>
+    // <SafeAreaProvider>
+    //   {/* <Navigation/> */}
+    // </SafeAreaProvider>
 
   );
 }

src/FLAD/components/NextButton.tsx

@@ -0,0 +1,87 @@
+import React, { useState, 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';
+
+export default function NextButton({ percentage, scrollTo }) {
+    const size = 128;
+    const strokeWidth = 2;
+    const center = size / 2;
+    const radius = size / 2 - strokeWidth / 2;
+    const circumFerence = 2 * Math.PI * radius;
+
+    const progressAnimation = useRef(new Animated.Value(0)).current;
+    const progressRef = useRef(null);
+
+    const animation = (toValue) => {
+        return Animated.timing(progressAnimation, {
+            toValue,
+            duration: 250,
+            useNativeDriver: true
+        }).start()
+    }
+
+    useEffect(() => {
+        animation(percentage);
+    }, [percentage]);
+
+    useEffect(() => {
+        progressAnimation.addListener(
+            (value) => {
+                const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100;
+
+                if (progressRef?.current) {
+                    progressRef.current.setNativeProps({
+                        strokeDashoffset,
+                    });
+                }
+
+            }, 
+            [percentage]
+
+        );
+
+        return () => {
+            progressAnimation.removeAllListeners();
+        };
+
+    }, []);
+
+    return (
+        <View style={styles.container}>
+            <Svg width={size} height={size}>
+                <G rotation="-90" origin={center}>
+                    <Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
+                    <Circle
+                        ref={progressRef}
+                        stroke="#3F2F78"
+                        fill="#141414"
+                        cx={center}
+                        cy={center}
+                        r={radius}
+                        strokeWidth={strokeWidth}
+                        strokeDasharray={circumFerence}
+                    />
+                </G>
+            </Svg>
+            <TouchableOpacity onPress={scrollTo} style={styles.button} activeOpacity={0.6}>
+                <AntDesign name="arrowright" size={32} color="#fff" />
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: -70
+    },
+    button: {
+        position: 'absolute',
+        backgroundColor: '#3F2F78',
+        borderRadius: 100,
+        padding: 20
+    }
+})

src/FLAD/components/Onboarding.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useRef } from 'react';
+import { View, StyleSheet, Text, FlatList, Animated } from 'react-native';
+
+import OnboardingItem from './OnboardingItem';
+import Paginator from './Paginator';
+import NextButton from './NextButton';
+import slides from '../data/slides';
+
+export default function Onboarding() {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const scrollX = useRef(new Animated.Value(0)).current;
+    const slidesRef = useRef(null);
+
+    const viewableItemsChanged = useRef(({ viewableItems }) => {
+        setCurrentIndex(viewableItems[0].index);
+    }).current;
+
+    const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
+
+    const scrollTo = () => {
+        if(currentIndex < slides.length - 1) {
+            slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
+        } else {
+            console.log('Last item.');
+        }
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={{ flex: 3 }}>
+                <FlatList 
+                    data={slides} 
+                    renderItem={({item}) => <OnboardingItem item={item} />} 
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    pagingEnabled
+                    bounces={false}
+                    keyExtractor={(item) => item.id}
+                    onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+                        useNativeDriver: false,
+                    })}
+                    scrollEventThrottle={32}
+                    onViewableItemsChanged={viewableItemsChanged}  
+                    viewabilityConfig={viewConfig}
+                    ref={slidesRef}
+                />      
+            </View>
+            <View style={styles.balise}>
+                <Paginator data={slides} scrollX={scrollX}/>
+                <NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />    
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#141414'
+    },
+    balise: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginTop: -130
+    }
+})

src/FLAD/components/OnboardingItem.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native';
+
+import slides from '../data/slides';
+
+export default function Onboarding({ item }) {
+    const { width } = useWindowDimensions();
+
+    return (
+        <View style={[styles.container, { width }]}>
+            <Image source={item.image} style={[styles.image, { width, resizeMode: 'contain'}]} />
+
+            <View style={{ flex: 0.7 }}>
+                <Text style={styles.title}>{item.title}</Text>
+                <Text style={styles.description}>{item.description}</Text>
+            </View>
+
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'flex-start',
+        marginTop: -60
+    },
+    image: {
+        justifyContent: 'center'
+    },
+    title: {
+        fontWeight: '800',
+        fontSize: 28,
+        marginBottom: 10,
+        color: 'white',
+        textAlign: 'left',
+        paddingRight: 30,
+        paddingLeft: 20,
+        marginTop: -80
+    },
+    description: {
+        fontWeight: '300',
+        color: 'white',
+        textAlign: 'left',
+        paddingRight: 30,
+        paddingLeft: 20
+    }
+})

src/FLAD/components/Paginator.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native';
+
+
+export default function Paginator({ data, scrollX }) {
+    const { width } = useWindowDimensions();
+
+    return (
+        <View style={{flexDirection: 'row', height: 64}}>
+            {data.map((_, i) => {
+                const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+
+                const dotWidth = scrollX.interpolate({
+                    inputRange,
+                    outputRange: [10, 20, 10],
+                    extrapolate: 'clamp',
+                })
+
+                const opacity = scrollX.interpolate({
+                    inputRange,
+                    outputRange: [0.3, 1, 0.3],
+                    extrapolate: 'clamp'
+                })
+
+                return <Animated.View 
+                    style={[
+                        styles.dot, 
+                        { 
+                            width: dotWidth,
+                            opacity,
+                        }
+                    ]} 
+                    key={i.toString()}
+                />
+            })}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    dot: {
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: "#fff",
+        marginHorizontal: 8
+    }
+})

src/FLAD/data/slides.tsx

@@ -0,0 +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: '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: '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')
+    }
+]

src/FLAD/navigation/FavoriteNavigation.tsx

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import FavoritePage from '../screens/favoritePage';
+import { createStackNavigator } from '@react-navigation/stack';
+
+export default function MusicNavigation() {
+    const Stack = createStackNavigator();
+    return (
+      <Stack.Navigator initialRouteName="FavoritePage">
+        <Stack.Screen 
+          name="FavoritePage" 
+          component={FavoritePage} 
+          options={{ headerShown: false }}
+        />
+      </Stack.Navigator>
+    )
+  }

src/FLAD/navigation/LoginNavigation.tsx

@@ -0,0 +1,23 @@
+import React, {Component} from 'react';
+import LoginPage from '../screens/loginPage';
+import { createStackNavigator } from '@react-navigation/stack';
+import Navigation from './Navigation';
+
+export default function LoginNavigation() {
+    const Stack = createStackNavigator();
+    console.log("je suis ici");
+    return (
+      <Stack.Navigator initialRouteName="Login">
+        <Stack.Screen 
+          name="Login" 
+          component={LoginPage} 
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen 
+          name="Home" 
+          component={Navigation} 
+          options={{ headerShown: false }}
+        />
+      </Stack.Navigator>
+    )
+  }

src/FLAD/navigation/Navigation.tsx

@@ -1,36 +1,35 @@
 import React, {Component} from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import Home from '../screens/spot';
-import FavoritePage from '../screens/favoritePage';
-import LoginPage from '../screens/loginPage';
-import { createStackNavigator } from '@react-navigation/stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import FavoriteNavigation from './FavoriteNavigation';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
 
-export default function StackNavigation() {
+export default function Navigation() {
-    const Stack = createBottomTabNavigator();
+  const BottomTabNavigator = createBottomTabNavigator();
-    return (
+  const MyTheme = {
-      <NavigationContainer>
+    dark: false,
-        <Stack.Navigator initialRouteName="Home"
+    colors: {
-        screenOptions={{
+      primary: 'rgb(255, 45, 85)',
-          
+      card: 'rgb(35, 33, 35)',
-        }}>
+      border: 'rgb(35, 33, 35)',
-          <Stack.Screen 
+    },
-            name="Home" 
+  };
-            component={FavoritePage} 
+  return (
-            options={{ headerShown: false }}
+      <NavigationContainer theme={MyTheme}>
-          />
+          <BottomTabNavigator.Navigator initialRouteName="Home">
-          <Stack.Screen 
+              <BottomTabNavigator.Screen name="Home" component={FavoriteNavigation}
-            name="Favoris" 
+                        options={{ 
-            component={LoginPage} 
+                            headerShown: false,
-            options={{ headerShown: false }}
+                            tabBarIcon: ({color}) => <TabBarIcon name="music" color={color}/>,
-          />
+                         }}/>
-          <Stack.Screen 
+          </BottomTabNavigator.Navigator>
-            name="Settings" 
-            component={FavoritePage} 
-            options={{ headerShown: false }}
-          />
-        </Stack.Navigator>
       </NavigationContainer>
-    )
+  )
-  }
+}
 
+function TabBarIcon(props: {
+    name: React.ComponentProps<typeof FontAwesome>['name'];
+    color: string;
+}) {
+    return <FontAwesome size={30} {...props} />;
+}

src/FLAD/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@react-navigation/bottom-tabs": "^6.5.4",
-    "@react-navigation/native": "^6.1.3",
+    "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.8",
     "@react-navigation/stack": "^6.3.12",
     "axios": "^1.2.6",
@@ -28,8 +28,10 @@
     "react-native": "0.70.5",
     "react-native-gesture-handler": "~2.8.0",
     "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "4.4.1",
+    "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "~3.18.0",
+    "react-native-svg": "^13.8.0",
+    "react-native-vector-icons": "^9.2.0",
     "react-native-web": "~0.18.9",
     "rive-react-native": "^3.0.41"
   },

src/FLAD/screens/favoritePage.tsx

@@ -1,8 +1,7 @@
 import React, {Component} from 'react';
-import { Animated, StyleSheet, Text, View, FlatList, ScrollView, TouchableHighlight } from 'react-native';
+import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';
-import Card from '../components/Card';
 import CardMusic from '../components/CardMusic';
-import Music from '../model/Music'
+import Music from '../Model/Music'
 
 export default function favoritePage() {
     const MUSIC_LIST : Music[] = [
@@ -11,7 +10,7 @@ export default function favoritePage() {
         new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"),
         new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"),
         new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"),
-        new Music("Blanka", "PNL", require("../assets/images/pnl.png")),
+        new Music("Blanka", "PNL", require("../assets/images/pnl.png"))
       ]
     return (
         <View style={styles.body}>
@@ -42,7 +41,7 @@ const styles = StyleSheet.create({
     },
     titleContainer: {
         marginLeft: 20,
-        marginVertical: 50,
+        marginVertical: 60,
     },
     title: {
         fontSize: 24,
@@ -56,5 +55,6 @@ const styles = StyleSheet.create({
     },
     scroll: {
         marginBottom: 120,
+        marginTop: -30
     }
 });

src/FLAD/screens/loginPage.tsx

@@ -1,20 +1,54 @@
-import React, {Component} from 'react';
+import React, {Component, useState } from 'react';
-import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput } from 'react-native';
+import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
+import { TouchableHighlight } from 'react-native-gesture-handler';
+//import {useNavigation} from "@react-navigation/native";
+
+const DismissKeyboard = ({ children }) => (
+    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+        {children}
+    </TouchableWithoutFeedback>
+)
 
 export default function loginPage() {
+    const [rememberMe, setRememberMe] = useState(false);
+
+    const toggleRememberMe = () => {
+        setRememberMe(!rememberMe);
+    }
+    //const navigation = useNavigation();
+
     return (
+        <DismissKeyboard>
         <View style={styles.container}>
             <ImageBackground source={require("../assets/images/Background.png")} resizeMode="cover" style={styles.image}>
+                <Text style={styles.versionText}>
+                    v1.0
+                </Text>
                 <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>
-                <TextInput placeholder='E-Mail' style={styles.input}>
+                <TextInput placeholder='E-Mail' style={[styles.input, styles.shadow]}>
-                    {/* <FontAwesomeIcon icon="fa-solid fa-lock" /> */}
+                </TextInput>
+                <TextInput placeholder='Mot de passe' style={[styles.input, styles.shadow]}>
                 </TextInput>
+                <View style={styles.rememberMeContainer}>
+                    <TouchableOpacity style={[styles.checkbox, rememberMe ? styles.checkboxChecked : null]} onPress={toggleRememberMe}></TouchableOpacity>
+                    <Text style={styles.rememberMeText}>SE SOUVENIR DE MOI</Text>
+                </View>
+                <TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
+                    <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>
+                    <Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
+                </View>
             </ImageBackground>
         </View>
+        </DismissKeyboard>
     )
 }
 
+
+
 const styles = StyleSheet.create ({
     container: {
         flex: 1,    
@@ -24,25 +58,88 @@ const styles = StyleSheet.create ({
         justifyContent: 'center',
     },
     imageLogo: {
-        width: 200,
+        width: 280,
-        height: 100,
+        height: 140,
+        alignSelf: 'center',
+        marginBottom: 100
+    },
+    button: {
+        marginTop: 40,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
         alignSelf: 'center',
-        marginTop: 50
+        backgroundColor: 'white',
+        width: 86,
+        height: 86,
+        borderRadius: 21
+    },
+    buttonImage: {
+        width: 40,
+        height: 40
     },
     input: {
         width: 300,
-        height: 30,
+        height: 42,
-        borderRadius: 10,
+        borderRadius: 30,
         color: 'black',
         backgroundColor: 'white',
-        fontSize: 10,
+        fontSize: 15,
-        alignSelf: 'center'
+        alignSelf: 'center',
-
+        marginBottom: 20,
+        paddingLeft: 20,
+        paddingRight: 20 
     },
     text: {
         fontWeight: 'bold',
-        fontSize: 20,
+        fontSize: 25,
+        alignSelf: 'center',
+        color: 'white',
+        marginBottom: 15
+    },
+    shadow: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 2,
+          height: 3,
+        },
+        shadowOpacity: 0.50,
+        shadowRadius: 3.84,
+    },
+    versionText: {
+        position: 'absolute',
+        top: 40,
+        right: 20,
+        color: 'gray',
+        fontWeight: 'bold',
+        fontSize: 15
+    },
+    rememberMeContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
         alignSelf: 'center',
+        marginBottom: 20,
+        marginTop: 10
+    },
+    checkbox: {
+        width: 20,
+        height: 20,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: 'gray',
+        marginRight: 10
+    },
+    rememberMeText: {
+        fontWeight: 'bold',
+        fontSize: 17,
         color: 'white'
+    },
+    checkboxChecked: {
+        backgroundColor: 'white'
+    },
+    inscriptionText: {
+        flexDirection: 'row', 
+        alignSelf: 'center', 
+        bottom: -80
     }
 })