More Responsive and add AdjustText, Flady Components

src/FLAD/components/AdjustSize.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+// @ts-ignore
+export default function AdjustSize(Text: String) {
+    const titleLength = Text.length;
+    const minFontSize = 23;
+    const maxFontSize = 48;
+    const fontRatio = 1.1;
+    const fontSize = Math.max(minFontSize, maxFontSize - (titleLength * fontRatio));
+    return fontSize;
+}

src/FLAD/components/FladyComponent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Image, StyleSheet } from 'react-native';
+import normalize from './Normalize';
+
+type Flady = {
+    image: string | object;
+  };
+
+export default function FladyComponent(monFlady: Flady) {
+    const source = typeof monFlady.image === 'string' ? { uri: monFlady.image } : monFlady.image;
+    return (
+        <View style={styles.container}>
+            <Image source={source} style={styles.image}/>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create ({
+    container: {
+        alignItems: "flex-start",
+        width: normalize(152),
+        height: normalize(152),
+        borderRadius: 90,
+        backgroundColor: "white",
+        marginHorizontal: normalize(15),
+    },
+    image: {
+        width: normalize(200),
+        height: normalize(200),
+    }
+})

src/FLAD/navigation/AuthNavigation.tsx

@@ -42,12 +42,8 @@ export default function AuthNavigation() {
   }
     return (
         <SafeAreaProvider>
-                 {isLogin ? (
-         /* {userToken != null ? ( */
+
             <Navigation/>
-        ) : 
-            <StartNavigation/>
-        }
     </SafeAreaProvider>
     )
   }

src/FLAD/screens/Favorite.tsx

@@ -3,6 +3,7 @@ import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, T
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'
+import FladyComponent from '../components/FladyComponent';
 import {useNavigation} from "@react-navigation/native";
 import { useDispatch, useSelector } from 'react-redux';
 import { getFavoritesMusic } from '../redux/actions/appActions';
@@ -13,7 +14,11 @@ export default function favoritePage() {
     //@ts-ignore
     const favoritesMusic = useSelector(state => state.appReducer.favoriteMusic);
     const dispatch = useDispatch();
-    
+    const images = [
+        { id: 1, source: require('../assets/images/FLADYLove.png') },
+        { id: 2, source: require('../assets/images/FLADYStar.png') },
+        { id: 3, source: require('../assets/images/FLADYStar.png') },
+      ];      
    const navigueToDetail = (music : any) => {
     navigation.navigate("MusicDetail", {"music": music})
     };
@@ -45,7 +50,7 @@ export default function favoritePage() {
             </View>
             <ScrollView>
                 <View>
-                    <FlatList style={{marginBottom: 80}}
+                    <FlatList style={{marginBottom: 30}}
                         data={favoritesMusic}
                         renderItem={({ item }) => (
                             <TouchableHighlight onPress={() => {navigueToDetail(item)}}>
@@ -58,11 +63,22 @@ export default function favoritePage() {
                         keyExtractor={(item: Music) => item.title }
                     />
                 </View>
+                <Text style={[styles.title,{marginLeft: 20}]}>What's your mood?</Text>
+                <FlatList
+                    style={{marginTop: 10}}
+                    data={images}
+                    keyExtractor={(item) => item.id.toString()}
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    renderItem={({ item }) => (
+                        <FladyComponent image={item.source} />
+                    )}
+                />
                     <TouchableOpacity style={[styles.button, styles.shadow]} 
-                        // @ts-ignore
+                    // @ts-ignore
                         onPress={() => navigation.navigate('Genre')}>
-                            <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
-                        </TouchableOpacity>
+                        <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
+                    </TouchableOpacity>
                 </ScrollView>
             </SafeAreaView>
         </View>

src/FLAD/screens/Setting.tsx

@@ -152,6 +152,7 @@ const styles = StyleSheet.create({
     container: {
         marginTop: 30,
         marginHorizontal: normalize(25),
+        paddingBottom: normalize(400),
         flex: 1,
         backgroundColor: '#141414',
     },

src/FLAD/screens/spot.tsx

@@ -9,7 +9,7 @@ import Card from '../components/Card';
 import { cards as cardArray, spotArray2 } from '../data/data'
 import FladButton from '../components/button/button';
 import axios from 'axios';
-
+import AdjustSize from '../components/AdjustSize';
 import * as SecureStore from 'expo-secure-store';
 import { MY_SECURE_AUTH_STATE_KEY } from './login';
 import * as AuthSession from 'expo-auth-session';
@@ -228,7 +228,7 @@ export default function SpotPage() {
                 left: wWidht/9 ,
                 top: normalize(87),
                 color: "#FFFFFF",
-                fontSize: normalize(35),
+                fontSize: normalize(AdjustSize(currentCard.music.title)),
                 fontWeight: "800",
               }}>{currentCard.music.title}</Text>
               <Text