Added a phone size for SongCardInfo fixed flex layout to display SongCardInfo in DiscoveryView and added first scrollview

front/components/V2/GoldenRatio.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useBreakpointValue, Text } from 'native-base';
+import { useBreakpointValue } from 'native-base';
 import HomeMainSongCard from './HomeMainSongCard';
 import GoldenRatioPanel from './GoldenRatioPanel';
 

front/components/V2/SongCardInfo.tsx

@@ -1,7 +1,7 @@
 import Song from '../../models/Song';
 import React from 'react';
 import { Image, View } from 'react-native';
-import { Pressable, Text, PresenceTransition, Icon } from 'native-base';
+import { Pressable, Text, PresenceTransition, Icon, useBreakpointValue } from 'native-base';
 import { Ionicons } from '@expo/vector-icons';
 
 type SongCardInfoProps = {
@@ -10,11 +10,6 @@ type SongCardInfoProps = {
 	onPlay: () => void;
 };
 
-const CardDims = {
-	height: 200,
-	width: 200,
-};
-
 const Scores = [
 	{
 		icon: 'warning',
@@ -31,10 +26,17 @@ const Scores = [
 ];
 
 const SongCardInfo = (props: SongCardInfoProps) => {
+	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const isPhone = screenSize === 'small';
 	const [isPlayHovered, setIsPlayHovered] = React.useState(false);
 	const [isHovered, setIsHovered] = React.useState(false);
 	const [isSlided, setIsSlided] = React.useState(false);
 
+	const CardDims = {
+		height: isPhone ? 160 : 200,
+		width: isPhone ? 160 : 200,
+	};
+
 	return (
 		<View
 			style={{

front/views/V2/DiscoveryView.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { Text, useBreakpointValue } from 'native-base';
 import React from 'react';
 import { useQuery, useQueries } from '../../Queries';
@@ -39,71 +39,76 @@ const HomeView = (props: RouteProps<{}>) => {
 
 	return (
 		// <ScaffoldCC routeName={props.route.name}>
-		<View
-			style={{
-				width: '100%',
-				height: '100%',
-				display: 'flex',
-				flexDirection: 'column',
-			}}
-		>
+		<ScrollView>
 			<View
 				style={{
 					width: '100%',
-					maxWidth: 1100,
-					// maxHeight: 500,
-					// aspectRatio: 1.618,
-					// golden ratio in vertical
-					aspectRatio: 0.618,
-				}}
-			>
-				<GoldenRatio />
-			</View>
-			<View
-				style={{
+					height: '100%',
+					display: 'flex',
 					flexDirection: 'column',
-					flexWrap: 'wrap',
-					justifyContent: 'flex-start',
-					alignItems: 'flex-start',
 					gap: 16,
 				}}
 			>
-				<Text
+				<View
 					style={{
-						fontSize: 24,
-						fontWeight: 'bold',
-						marginLeft: 16,
-						marginBottom: 16,
-						marginTop: 24,
+						width: '100%',
+						maxWidth: 1100,
+						// maxHeight: 500,
+						// aspectRatio: 1.618,
+						// golden ratio in vertical
+						aspectRatio: 0.618,
 					}}
 				>
-					{'Suggestions'}
-				</Text>
-				{songsQuery.isLoading && <Text>Loading...</Text>}
-				{/* <View
+					<GoldenRatio />
+				</View>
+				<View
 					style={{
-						flexDirection: 'row',
+						width: '100%',
+						flexDirection: 'column',
 						flexWrap: 'wrap',
-						justifyContent: 'flex-start',
-						alignItems: 'flex-start',
+						justifyContent: 'center',
+						alignItems: 'center',
 						gap: 16,
 					}}
 				>
-					{songsQuery.data?.map((song) => (
-						<SongCardInfo
-							key={song.id}
-							song={song}
-							onPress={() => {
-								navigation.navigate('Play', { songId: song.id });
-							}}
-							onPlay={() => {
-								console.log('play');
-							}}
-						/>
-					))}
-				</View> */}
+					<Text
+						style={{
+							fontSize: 24,
+							fontWeight: 'bold',
+							marginLeft: 16,
+							marginBottom: 16,
+							marginTop: 24,
+						}}
+					>
+						{'Suggestions'}
+					</Text>
+					{songsQuery.isLoading && <Text>Loading...</Text>}
+					<View
+						style={{
+							width: '100%',
+							flexDirection: 'row',
+							flexWrap: 'wrap',
+							justifyContent: 'center',
+							alignItems: 'flex-start',
+							gap: 16,
+						}}
+					>
+						{songsQuery.data?.map((song) => (
+							<SongCardInfo
+								key={song.id}
+								song={song}
+								onPress={() => {
+									navigation.navigate('Play', { songId: song.id });
+								}}
+								onPlay={() => {
+									console.log('play');
+								}}
+							/>
+						))}
+					</View>
+				</View>
 			</View>
-		</View>
+		</ScrollView>
 		// </ScaffoldCC>
 	);
 };