React-Native inserting a custom component into a navigator

Question

I have a podcast player in a react-native bare app I built. My player has a pop-up miniplayer component that is visible when playing a podcast at the bottom of the screen like so:

Now I am working on an iPad version and when in Horizontal mode, I want to mimic the Apple Podcast App where it sticks a mini player inside of the menu bar. Is this possible with a Navigator?

Currently, I inject the miniplayer using this code. I tried doing a <View style={{FlexDirection: 'row'}}> with the 2 components, but that just made the navigation buttons disappear.

<Tab.Navigator
        tabBar={tabsProps => (
          <>
            <MiniPlayer />
            <BottomTabBar {...tabsProps} />
          </>
        )}
      ...

Answer 1

I figured out the solution, I put the MiniPlayer component into a tabBarButton like so. I have this screen only visible on orientation.horizontal (library from the react-native community hooks library).

<Tab.Screen
      component={MiniPlayer}
      name="MiniPlayerHoriz"
      options={{tabBarButton: props => <MiniPlayer />}}
      />