Removed Scrollview from ScaffoldMobile and now each view implement its scroll

front/components/UI/ScaffoldCC.tsx

@@ -21,9 +21,10 @@ type ScaffoldCCProps = {
 	children?: React.ReactNode;
 	routeName: string;
 	withPadding?: boolean;
+	enableScroll?: boolean;
 };
 
-const ScaffoldCC = ({ children, routeName, withPadding = true }: ScaffoldCCProps) => {
+const ScaffoldCC = ({ children, routeName, withPadding = true, enableScroll = true }: ScaffoldCCProps) => {
 	const userQuery = useQuery(API.getUserInfo);
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 
@@ -40,6 +41,7 @@ const ScaffoldCC = ({ children, routeName, withPadding = true }: ScaffoldCCProps
 		<Flex style={{ flex: 1, backgroundColor: '#cdd4fd' }}>
 			{screenSize === 'small' ? (
 				<ScaffoldMobileCC
+					enableScroll={enableScroll}
 					user={userQuery.data}
 					logo={logo}
 					routeName={routeName}

front/components/UI/ScaffoldMobileCC.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { View } from 'react-native';
-import { ScrollView, Flex, useMediaQuery, useTheme } from 'native-base';
+import { Flex, useMediaQuery, useTheme } from 'native-base';
 import ButtonBase from './ButtonBase';
 import { Icon } from 'iconsax-react-native';
 import { useNavigation } from '../../Navigation';
@@ -14,9 +14,16 @@ type ScaffoldMobileCCProps = {
 	logo: string;
 	routeName: string;
 	widthPadding: boolean;
+	enableScroll: boolean;
 	menu: readonly {
 		type: 'main' | 'sub';
-		title: string;
+		title:
+			| 'menuDiscovery'
+			| 'menuProfile'
+			| 'menuMusic'
+			| 'menuSearch'
+			| 'menuLeaderBoard'
+			| 'menuSettings';
 		icon: Icon;
 		link: string;
 	}[];
@@ -29,19 +36,15 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => {
 
 	return (
 		<View style={{ height: '100%', flexDirection: 'column', overflow: 'hidden' }}>
-			<ScrollView
+			<View
 				style={{
 					flex: 1,
 					maxHeight: '100%',
-					flexDirection: 'column',
-					flexShrink: 0,
 					padding: props.widthPadding ? 8 : 0,
 				}}
-				contentContainerStyle={{ flex: 1 }}
 			>
-				<View>{props.children}</View>
+				{props.children}
-				<Spacer />
+			</View>
-			</ScrollView>
 			<View style={{ padding: 8, paddingTop: 0 }}>
 				<Flex
 					style={{
@@ -60,15 +63,7 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => {
 							icon={value.icon}
 							title={
 								props.routeName === value.link && !isSmallScreen
-									? translate(
+									? translate(value.title)
-											value.title as
-												| 'menuDiscovery'
-												| 'menuProfile'
-												| 'menuMusic'
-												| 'menuSearch'
-												| 'menuLeaderBoard'
-												| 'menuSettings'
-									  )
 									: undefined
 							}
 							isDisabled={props.routeName === value.link}

front/components/V2/GoldenRatio.tsx

@@ -60,7 +60,7 @@ const GoldenRatio = () => {
 						direction={isPhone ? 'row-reverse' : 'column-reverse'}
 						header={<HomeMainSongCard {...cards[3]} />}
 					>
-						<View style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: 'red' }}>
+						<View style={{ display: 'flex', width: '100%', height: '100%'}}>
 						</View>
 					</GoldenRatioPanel>
 				</GoldenRatioPanel>

front/views/V2/DiscoveryView.tsx

@@ -38,78 +38,75 @@ const HomeView = (props: RouteProps<{}>) => {
 	// }, [artistsQueries]);
 
 	return (
-		// <ScaffoldCC routeName={props.route.name}>
+		<ScaffoldCC routeName={props.route.name}>
-		<ScrollView>
+			<ScrollView>
-			<View
-				style={{
-					width: '100%',
-					height: '100%',
-					display: 'flex',
-					flexDirection: 'column',
-					gap: 16,
-				}}
-			>
-				<View
-					style={{
-						width: '100%',
-						maxWidth: 1100,
-						// maxHeight: 500,
-						// aspectRatio: 1.618,
-						// golden ratio in vertical
-						aspectRatio: 0.618,
-					}}
-				>
-					<GoldenRatio />
-				</View>
 				<View
 					style={{
 						width: '100%',
+						display: 'flex',
 						flexDirection: 'column',
-						flexWrap: 'wrap',
-						justifyContent: 'center',
-						alignItems: 'center',
 						gap: 16,
 					}}
 				>
-					<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',
+							maxWidth: 1100,
-							flexWrap: 'wrap',
+							// maxHeight: 500,
-							justifyContent: 'center',
+							// aspectRatio: 1.618,
-							alignItems: 'flex-start',
+							// golden ratio in vertical
+							aspectRatio: 0.618,
+						}}
+					>
+						<GoldenRatio />
+					</View>
+					<View
+						style={{
+							width: '100%',
+							flexDirection: 'column',
+							justifyContent: 'flex-start',
+							alignItems: 'stretch',
 							gap: 16,
 						}}
 					>
-						{songsQuery.data?.map((song) => (
+						<Text
-							<SongCardInfo
+							style={{
-								key={song.id}
+								fontSize: 24,
-								song={song}
+								fontWeight: 'bold',
-								onPress={() => {
+								marginLeft: 16,
-									navigation.navigate('Play', { songId: song.id });
+								marginBottom: 16,
-								}}
+								marginTop: 24,
-								onPlay={() => {
+							}}
-									console.log('play');
+						>
-								}}
+							{'Suggestions'}
-							/>
+						</Text>
-						))}
+						{songsQuery.isLoading && <Text>Loading...</Text>}
+						<View
+							style={{
+								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>
-		</ScrollView>
+		</ScaffoldCC>
-		// </ScaffoldCC>
 	);
 };