Sticky component above bottom tab navigator

Issue

I am creating a sticky component and I want to show it on top of my tab bar navigator. The position of the component must be relative because otherwise it would cover the content of my app. I want the provider to be the same for each screen.

I leave part of my code below:

Provider:

export const PlayerProvider = ({ children }) => {
  const { player, play, pause, playSong } = useSongPlayer();

  return (
    <PlayerContext.Provider value={{ player, play, pause, playSong }}>
      {children}
      <SongPlayer ... code />
    </PlayerContext.Provider>
  )
};

BottomTabNavigator:

const Tab = createBottomTabNavigator();
export const BottomTabNavigation = () => (
  <Tab.Navigator initialRouteName='Home' screenOptions={{ tabBarActiveTintColor: 'white', tabBarStyle: styles.bottomContainer }}>
     <Tab.Screen ... tab1/>
    <Tab.Screen ... tab2/>
    <Tab.Screen ...tab3/>
  </Tab.Navigator>
);

App:

export default function App() {
 ... some code ... 
  return (
    ... code
    <BottomTabNavigation />
    ... code
  );
}

I have tried different alternatives, but none of them do exactly what I want.

Solution

Ok i make it's work for you, the key is:

customComponent: {
    position: 'absolute',
    left: 12, right: 12,
    borderRadius: 12,
    bottom: 49 + 8, //assume bottomnavigation height
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: colors.bottomTabBackground,
  },

see more here:

https://snack.expo.dev/@fukemy/spotify-clone

Answered By - famfamfam