getting mini player above tabs

components/Player/mini-player.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Text, View, XStack, YStack } from "tamagui";
+import { usePlayerContext } from "../../player/provider";
+
+export function Miniplayer() : React.JSX.Element {
+
+    const { activeTrack } = usePlayerContext();
+
+    return (
+        <View backgroundColor={"$colorTransparent"}>
+            <XStack>
+                <YStack>
+                    <Text>{activeTrack?.title ?? "Nothing Playing"}</Text>
+                </YStack>
+            </XStack>
+        </View>
+    )
+}

components/navigation.tsx

@@ -8,18 +8,18 @@ export default function Navigation(): React.JSX.Element {
   
     return (
       <RootStack.Navigator>
-      <RootStack.Group>
-        <RootStack.Screen 
-          name="Tabs" 
-          component={Tabs}
-          options={{
-            headerShown: false
-          }}
-        />
-      </RootStack.Group>
-      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
-        <RootStack.Screen name="Player" component={Player} />
-      </RootStack.Group>
+        <RootStack.Group>
+          <RootStack.Screen 
+            name="Tabs" 
+            component={Tabs}
+            options={{
+              headerShown: false
+            }}
+          />
+        </RootStack.Group>
+        <RootStack.Group screenOptions={{ presentation: 'modal' }}>
+          <RootStack.Screen name="Player" component={Player} />
+        </RootStack.Group>
     </RootStack.Navigator>
     )
 }

components/tabs.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { BottomTabBar, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import Home from "./Home/component";
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 import { useColorScheme } from "react-native";
@@ -8,7 +8,7 @@ import Search from "./Search/component";
 import Library from "./Library/component";
 import Settings from "./Settings/component";
 import { Discover } from "./Discover/component";
-import { Text, View, ZStack } from "tamagui";
+import { Miniplayer } from "./Player/mini-player";
 
 const Tab = createBottomTabNavigator();
 
@@ -17,15 +17,16 @@ export function Tabs() : React.JSX.Element {
     const isDarkMode = useColorScheme() === 'dark';
 
     return (
-        <ZStack fullscreen>
-            <View backgroundColor={Colors.Primary}>
-                <Text>Miniplayer</Text>
-            </View>
-
             <Tab.Navigator
                 screenOptions={{
                     tabBarActiveTintColor: isDarkMode ? Colors.Primary : Colors.Secondary
                 }}
+                tabBar={(props) => (
+                    <>
+                        <Miniplayer />
+                        <BottomTabBar {...props} />
+                    </>
+                )}
             >
                 <Tab.Screen 
                     name="Home" 
@@ -81,6 +82,5 @@ export function Tabs() : React.JSX.Element {
                     }}
                 />
             </Tab.Navigator>
-        </ZStack>
     )
 }