navigate to playback

src/screens/Library/components/BackTracks.js

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { FlatList, Image, Text, View, useWindowDimensions } from "react-native";
+import { FlatList, Image, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
 import { useUserData } from "../../../providers/UserDataProvider";
 import { Style } from "../../../styles";
 import CardContainer from "./CardContainer";
@@ -28,14 +30,16 @@ const BackTracks = () => {
             keyExtractor={(item) => item.id}
             renderItem={({ item }) => (
               <View style={{ width: itemWidth }} key={item.id}>
-                <Image
-                  source={{ uri: item.coverUrl || "" }}
-                  style={{
-                    width: "100%",
-                    height: Math.round((itemWidth * 16) / 9),
-                    borderRadius: 10,
-                  }}
-                />
+                <Pressable onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}>
+                  <Image
+                    source={{ uri: item.coverUrl || "" }}
+                    style={{
+                      width: "100%",
+                      height: Math.round((itemWidth * 16) / 9),
+                      borderRadius: 10,
+                    }}
+                  />
+                </Pressable>
               </View>
             )}
           />