Enhancement: Refactored UI and added specialized emojis

src/screens/AlbumsScreen/components/Card.jsx

@@ -14,41 +14,41 @@ import { fonts } from "../../../constants/fonts";
 
 const Card = ({ albumData, index }) => {
 	const navigation = useNavigation();
-	albumData.title = albumData.title ? albumData.title : albumData.name;
+	const { title, name, image } = albumData;
+
+	const albumTitle = title || name;
+	const displayTitle = decode(
+		albumTitle.length > 25 ? `${albumTitle.substring(0, 25)}...` : albumTitle
+	);
+
+	const optimizedImageUri = image
+		.replace("150x150", "500x500")
+		.replace("50x50", "500x500");
+
+	const handlePress = () =>
+		handleAlbum({
+			albumData,
+			image_: image,
+			title_: albumTitle,
+			navigation,
+		});
+
+	const cardHeight = index % 3 === 0 ? 240 : 200;
 
 	return (
-		<TouchableOpacity delayPressIn={100}
-			onPress={() =>
-				handleAlbum({
-					albumData: albumData,
-					image_: albumData.image,
-					title_: albumData.title,
-					navigation: navigation,
-				})
-			}
-			style={[
-				styles.card,
-				{ height: index % 3 === 0 ? 240 : 200 },
-			]}
+		<TouchableOpacity
+			delayPressIn={100}
+			onPress={handlePress}
+			style={[styles.card, { height: cardHeight }]}
 			activeOpacity={0.85}
 		>
 			<ImageBackground
-				source={{
-					uri: albumData.image
-						.replace("150x150", "500x500")
-						.replace("50x50", "500x500"),
-				}}
+				source={{ uri: optimizedImageUri }}
 				style={styles.image}
 				imageStyle={styles.imageOverlay}
 			>
 				<View style={styles.overlay} />
-				<Text style={styles.title}>
-					{decode(
-						albumData.title.length > 20
-							? `${albumData.title.substring(0, 20)}...`
-							: albumData.title
-					)}
-				</Text>
+				<Text style={styles.title}>{displayTitle}</Text>
 			</ImageBackground>
 		</TouchableOpacity>
 	);
@@ -58,8 +58,6 @@ export default Card;
 
 const styles = StyleSheet.create({
 	card: {
-		maxWidth: 190,
-		minWidth: 170,
 		backgroundColor: colors.secondaryColor,
 		borderRadius: 10,
 		shadowColor: colors.primaryColor,
@@ -68,15 +66,13 @@ const styles = StyleSheet.create({
 		shadowOffset: { width: 0, height: 3 },
 		elevation: 6,
 		overflow: "hidden",
-		marginHorizontal: 10,
-		marginVertical: 12,
+		marginHorizontal: 6,
+		marginVertical: 6,
 	},
 	image: {
 		width: "100%",
 		height: "100%",
 		justifyContent: "flex-end",
-		position: "relative",
-		overflow: "hidden",
 	},
 	imageOverlay: {
 		borderRadius: 10,
@@ -88,11 +84,10 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		position: "absolute",
-		bottom: 12,
-		left: 12,
-		fontSize: 18,
+		bottom: 8,
+		left: 8,
+		fontSize: 16,
 		color: colors.secondaryColor,
-		letterSpacing: 0.5,
 		fontFamily: fonts.poppinsSecondary,
 	},
 });

src/screens/AlbumsScreen/components/Category.jsx

@@ -1,24 +1,27 @@
 import { StyleSheet, Text, View } from "react-native";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import MasonryList from "@react-native-seoul/masonry-list";
 import Card from "./Card";
 import generateEmoji from "../../../utils/emoticanGenerator";
 import { fonts } from "../../../constants/fonts";
 import { colors } from "../../../constants/colors";
 
 const Category = ({ categoryName, categoryData }) => {
-	categoryData = categoryData.map((item, index) => ({
-		...item,
-		index,
-	}));
-	const renderCard = ({ item }) => <Card albumData={item} index={item.index} />;
+	const transformedData = useMemo(
+		() => categoryData.map((item, index) => ({ ...item, index })),
+		[categoryData]
+	);
+
+	const emoji = useMemo(() => generateEmoji(), []);
+
+	const renderCard = useCallback(({ item }) => <Card albumData={item} index={item.index} />, []);
 
 	return (
 		<View style={styles.container}>
-			<Text style={styles.categoryTitle}>{categoryName} {generateEmoji()}</Text>
+			<Text style={styles.categoryTitle}>{categoryName} {emoji}</Text>
 			<MasonryList
-				data={categoryData}
-				keyExtractor={(item) => item.id}
+				data={transformedData}
+				keyExtractor={(item) => item.id.toString()}
 				numColumns={2}
 				showsVerticalScrollIndicator={false}
 				renderItem={renderCard}
@@ -39,13 +42,14 @@ const styles = StyleSheet.create({
 		borderBottomColor: 'gray',
 		borderBottomLeftRadius: 10,
 		borderBottomRightRadius: 10,
+		paddingBottom: 20
 	},
 	categoryTitle: {
 		color: colors.categoryColorPrimary,
 		fontSize: 26,
 		fontFamily: fonts.poppinsSecondary,
 		textAlign: "left",
 		marginHorizontal: 10,
-		marginTop: 5,
+		marginTop: 20,
 	},
 });

src/screens/FloatingPlayerScreen/FloatingPlayerScreen.jsx

@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
 		bottom: 5,
 		width: "94%",
 		marginHorizontal: "3%",
-		borderRadius: 10,
+		borderRadius: 8,
 		backgroundColor: colors.floatingPlayerBgPrimary,
 		paddingHorizontal: 8,
 		paddingTop: 4,
@@ -227,20 +227,20 @@ const styles = StyleSheet.create({
 	albumArt: {
 		width: 40,
 		height: 40,
-		borderRadius: 8,
+		borderRadius: 6,
 		marginRight: 12,
 	},
 	textWrapper: {
 		flex: 1,
 		justifyContent: "center",
 	},
 	songTitle: {
-		fontSize: 16,
+		fontSize: 14,
 		color: colors.secondaryColor,
 		fontFamily: fonts.poppinsSecondary
 	},
 	artistName: {
-		fontSize: 14,
+		fontSize: 12,
 		color: colors.floatingPlayerColorSecomdary,
 		fontFamily: fonts.poppinsPrimary
 	},

src/utils/emoticanGenerator.js

@@ -1,6 +1,66 @@
 export default function generateEmoji() {
-        const emoticonRangeStart = 0x1F600;
-        const emoticonRangeEnd = 0x1F64F;
-        const randomCodePoint = Math.floor(Math.random() * (emoticonRangeEnd - emoticonRangeStart + 1)) + emoticonRangeStart;
-        return String.fromCodePoint(randomCodePoint);
-}
+        const cuteEmojis = [
+                0x1F60A, // Smiling Face with Smiling Eyes
+                0x1F60D, // Smiling Face with Heart-Eyes
+                0x1F618, // Face Blowing a Kiss
+                0x1F61A, // Kissing Face with Closed Eyes
+                0x1F970, // Smiling Face with Hearts
+                0x1F63A, // Smiling Cat Face with Open Mouth
+                0x1F638, // Grinning Cat Face with Smiling Eyes
+                0x1F431, // Cat Face
+                0x1F436, // Dog Face
+                0x1F42D, // Mouse Face
+                0x1F430, // Rabbit Face
+                0x1F43C, // Panda Face
+                0x1F981, // Lion Face
+                0x1F42F, // Tiger Face
+                0x1F439, // Hamster Face
+                0x1F43B, // Bear Face
+                0x1F43A, // Wolf Face
+                0x1F424, // Chick
+                0x1F426, // Bird
+                0x1F427, // Penguin
+                0x1F43D, // Pig Nose
+                0x1F428, // Koala
+                0x1F98B, // Butterfly
+                0x1F98E, // Lizard
+                0x1F984, // Unicorn Face
+                0x1F493, // Beating Heart
+                0x1F496, // Sparkling Heart
+                0x1F49B, // Yellow Heart
+                0x1F49A, // Green Heart
+                0x1F499, // Blue Heart
+                0x1F49C, // Purple Heart
+                0x1F495, // Two Hearts
+                0x1F48B, // Kiss Mark
+                0x1F44D, // Thumbs Up
+                0x1F44C, // OK Hand
+                0x1F44F, // Clapping Hands
+                0x1F389, // Party Popper
+                0x1F381, // Wrapped Gift
+                0x1F3C6, // Trophy
+                0x1F37E, // Bottle with Popping Cork
+                0x1F9E1, // Orange Heart
+                0x1F9E2, // Party Hat
+                0x1F497, // Growing Heart
+                0x1F9F8, // Teddy Bear
+                0x1F43E, // Paw Prints
+                0x1F430, // Rabbit Face
+                0x1F98A, // Fox Face
+                0x1F99D, // Raccoon
+                0x1F43F, // Chipmunk
+                0x1F425, // Front-Facing Baby Chick
+                0x1F418, // Elephant
+                0x1F422, // Turtle
+                0x1F98C, // Deer
+                0x1F40C, // Snail
+                0x1F43B, // Bear Face
+                0x1F987, // Bat
+                0x1F419, // Octopus
+                0x1F41F, // Fish
+                0x1F996, // T-Rex
+        ];
+
+        const randomEmoji = cuteEmojis[Math.floor(Math.random() * cuteEmojis.length)];
+        return String.fromCodePoint(randomEmoji);
+}