linear gradient

front/Theme.tsx

@@ -4,9 +4,15 @@ import { useEffect } from 'react';
 
 const ThemeProvider = ({ children }: { children: JSX.Element }) => {
 	const colorScheme = useColorScheme();
+    const config = {
+        dependencies: {
+            "linear-gradient": require("expo-linear-gradient").LinearGradient,
+        },
+    };
 
 	return (
 		<NativeBaseProvider
+            config={config}
 			theme={extendTheme({
 				config: {
 					useSystemColorMode: false,

front/package.json

@@ -34,6 +34,7 @@
 		"expo": "^47.0.8",
 		"expo-asset": "~8.7.0",
 		"expo-dev-client": "~2.0.1",
+		"expo-linear-gradient": "^12.3.0",
 		"expo-linking": "~3.3.1",
 		"expo-screen-orientation": "~5.0.1",
 		"expo-secure-store": "~12.0.0",
@@ -87,11 +88,11 @@
 		"@types/react": "~18.0.24",
 		"@types/react-native": "~0.70.6",
 		"@types/react-navigation": "^3.4.0",
+		"@typescript-eslint/eslint-plugin": "^5.43.0",
+		"@typescript-eslint/parser": "^5.0.0",
 		"babel-loader": "^8.3.0",
 		"babel-plugin-transform-inline-environment-variables": "^0.4.4",
 		"chromatic": "^6.14.0",
-		"@typescript-eslint/eslint-plugin": "^5.43.0",
-		"@typescript-eslint/parser": "^5.0.0",
 		"eslint": "^8.42.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-prettier": "^4.0.0",

front/views/ArtistDetailsView.tsx

@@ -8,6 +8,25 @@ import Song, { SongWithArtist } from '../models/Song';
 import SongRow from '../components/SongRow';
 import { Key, useEffect, useState } from 'react';
 import { useNavigation } from '../Navigation';
+import { ImageBackground } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+const colorRange = [
+	{
+		code: '#364fc7',
+	},
+	{
+		code: '#5c940d',
+	},
+	{
+		code: '#c92a2a',
+	},
+	{
+		code: '#d6336c',
+	},
+	{
+		code: '#20c997'
+	}
+]
 
 const songs: Song[] = [
 	{
@@ -119,7 +138,14 @@ const ArtistDetailsView = ({ artistId }: any) => {
 
 	return (
 		<ScrollView>
-			<Box>
+			<ImageBackground
+    style={{width : '100%', height: isMobileView ? 200 : 300}}
+    source={{uri : "https://picsum.photos/720"}}>
+    <LinearGradient 
+        colors={['#00000000', '#000000']} 
+        style={{height : '100%', width : '100%'}}/>
+</ImageBackground>
+			{/* <Box>
 				<Image
 				source={{ uri: 'https://picsum.photos/720' }}
 				alt={artistData?.name}
@@ -127,7 +153,7 @@ const ArtistDetailsView = ({ artistId }: any) => {
 				height={isMobileView ? 200 : 300}
 				width={'100%'}
 				resizeMode='cover'
-				/>
+				/> */}
 				<Box>
 					<Heading mt={-20} ml={3} fontSize={50}>{artistData?.name}</Heading>
 					<ScrollView mt={3}>
@@ -144,7 +170,7 @@ const ArtistDetailsView = ({ artistId }: any) => {
 						}
 					</ScrollView>
 				</Box>
-			</Box>
+			{/* </Box> */}
 		</ScrollView>
 	);
 };

front/views/GenreDetailsView.tsx

@@ -124,7 +124,13 @@ const GenreDetailsView = ({ genreId }: any) => {
 			size={'100%'}
 			height={isMobileView ? 200 : 300}
 			width={'100%'}
-			backgroundColor={colorRange[Math.floor(Math.random() * 5)]?.code ?? '#364fc7'}
+			// backgroundColor={colorRange[Math.floor(Math.random() * 5)]?.code ?? '#364fc7'}
+			bg={{
+				linearGradient: {
+					colors: [colorRange[Math.floor(Math.random() * 5)]?.code ?? '#364fc7', 'black'],
+					start: [0, 0],
+					end: [0, 1],
+				},}}
 			/>
 			<Flex
 				flexWrap="wrap"

front/yarn.lock

@@ -9126,6 +9126,11 @@ expo-keep-awake@~11.0.1:
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"
   integrity sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==
 
+expo-linear-gradient@^12.3.0:
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.3.0.tgz#7abd8fedbf0138c86805aebbdfbbf5e5fa865f19"
+  integrity sha512-f9e+Oxe5z7fNQarTBZXilMyswlkbYWQHONVfq8MqmiEnW3h9XsxxmVJLG8uVQSQPUsbW+x1UUT/tnU6mkMWeLg==
+
 expo-linking@~3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-3.3.1.tgz#253b183321e54cb6fa1a667a53d4594aa88a3357"