blurs

src/screens/Library/Library.js

@@ -1,3 +1,4 @@
+import { BlurView } from "expo-blur";
 import React from "react";
 import {
   Image,
@@ -77,7 +78,13 @@ const Library = () => {
           }}
           showsVerticalScrollIndicator={false}
         >
-          {hasMyMusic && <MyMusic />}
+          <BlurView
+            intensity={20}
+            experimentalBlurMethod="dimezisBlurView"
+            style={{ borderRadius: 12, padding: 12, overflow: "hidden" }}
+          >
+            {hasMyMusic && <MyMusic />}
+          </BlurView>
           {hasBackTracks && <BackTracks />}
           {hasLikedMusic && <LikedMusic />}
           {hasMyClips && <MyClips />}

src/screens/Library/Library.web.js

@@ -1,4 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BlurView } from "expo-blur";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Image, Platform, ScrollView, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { background, icons } from "../../assets";
@@ -60,22 +67,22 @@ const Library = () => {
     (value) => {
       setSelected((previous) => (previous === value ? null : value));
     },
-    [setSelected],
+    [setSelected]
   );
 
   const musicResults = useMemo(
     () => (Array.isArray(musics) ? musics : []),
-    [musics],
+    [musics]
   );
 
   const playbackResults = useMemo(
     () => (Array.isArray(playbacks) ? playbacks : []),
-    [playbacks],
+    [playbacks]
   );
 
   const userResults = useMemo(
     () => (Array.isArray(users) ? users : []),
-    [users],
+    [users]
   );
 
   const musicsLoading = loading;
@@ -199,13 +206,14 @@ const Library = () => {
           }}
           showsVerticalScrollIndicator={false}
         >
-          <View
+          <BlurView
+            intensity={80}
             style={{
               flexDirection: "row",
               gap: 20,
               padding: 10,
               borderRadius: 12,
-              backgroundColor: Palette.ultraLightWhite,
+              // backgroundColor: Palette.ultraLightWhite,
               ...Style.defaultBorder,
             }}
           >
@@ -219,7 +227,7 @@ const Library = () => {
                 <MyPlaylist />
               </View>
             )}
-          </View>
+          </BlurView>
 
           <View style={{ flexDirection: "row", gap: 20 }}>
             {hasBackTracks && (