One root view for react-native-navigation

Question

I'm facing a problem where i need to put a component on top of all the app but react-native-navigation structure is preventing me from implementing this, there's no root component that's containing the app.
For example: If i wanted to add a component on top of the whole app i will have to put it in 'FEED_SCREEN' and 'CHAT_LIST' and 'PROFILE_SCREEN' as in the code structure below,
Is there a way to inject a component on top of the whole app without having to go to every child in bottomTabs and write the same component or function?

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            children: [
              {
                component: {
                  name: 'FEED_SCREEN'
                }
              }
            ]
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  name: 'CHAT_LIST'
                }
              }
            ]
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  name: 'PROFILE_SCREEN'
                }
              }
            ]
          }
        }
      ]
    }
  }
});

I have tried searching wix documentation but can't find a suitable structure for my problem. All i need is one root view to put anything without duplicating them in each bottomtab child. Here's the basic root structure on https://wix.github.io/react-native-navigation/docs/root#common-root-structures

Answer 1

You should use an Overlay to display a component on top of the root