Search code examples
react-nativereact-native-navigationwix-react-native-navigationreact-native-navigation-v2

react-native-navigation (wix) v2 static Scene for all tabs


We are developing an app which will have a music player (similar to spotify). Even tho React-navigation worked, we thought about switching to React-native-navigation (v2) from wix. While implementing RNN v2 we had the problem to place a component above the bottomTabs Bar so that it will stay static while the tabs switch. We dont want the component to rerender with switching Tabs. It should behave similar to spotifys music player! Is that possible?

tl;dr

How can I place a component (e.g. a music player) just above the bottomTabs. It should not rerender with switching tabs.

thanks a lot for your help

update

this worked for me:

Navigation.showOverlay({
  component: {
    name: 'yourRegisteredScene',
    passProps: {
    },
    options: {
      overlay: {
        interceptTouchOutside: false,
      },
      layout: {
        backgroundColor: 'transparent',
        orientation: ['portrait'],
      }
    }
  }
});

Solution

  • RNN v2 has an overlay API which allows you to show a component as an overlay above the whole app. If you don't dismiss the overlay, it will persistently show even when you switch between tabs.

    I'm not sure if it meets all your needs but you can give it a try. Take a look at the documentation for more info. There's also an example in the playground project.