CODEWITHSUNDEEP
react-nativereact-navigation
sorinLates
sorinLates

Reputation: 245

How to show a modal at the root level of an app that has TabNavigator?

I'm using react-navigation and this is how my root level looks like:

    export const Root = StackNavigator({
    [screenExploreTabs]: {
        screen: Tabs,
    },
    [screenFavourites]: {
        screen: FavouriteModal,
    },
},
    {
        mode: "modal",
        headerMode: "none",
    }
);

Tabs is actually a TabNavigator, not a react Component. FavoriteModal is a element from "react-native-modalbox". The problem is I want the underlying Tab Content to be visible in the backdrop of the modal. This doesn't happen because the Modal element has a default background. So my question is how to get the Modal to occupy only part of the screen and leave the rest semi-transparent?

Upvotes: 2

Views: 588

Answers (1)

sorinLates
sorinLates

Reputation: 245

Found a work-around, added another component for the Modal inside my <Provider>, and use the store reference to dynamically change visibility of the Modal.

Upvotes: 2

Related Questions