CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
nishi
nishi

Reputation: 550

how to customize React native Navigation cardoverlay styles?

i would like to implement this black background on the react native navigation stack navigator. I know that passing

a couple properties like these:

options={{
    gestureEnabled: true,
    cardOverlayEnabled: true,
    ...TransitionPresets.ModalSlideFromBottomIOS,
    cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
    mode: 'modal',
}

how can this be implemented? the cardOverlayEnabled provides grey-ish tone. i tried to add a View flex 1 with black background, but when i do so, i lost the screen in the back

enter image description here

Upvotes: 2

Views: 1178

Answers (1)

nishi
nishi

Reputation: 550

so the answer has nothing to do with overlay. Actually, all the new pages will place on top of each other if you set various pages to open like a swipe up modal like that, and the page that you have not set to up like this but instead place like a full page, this full page will be placed in the very bottom. With this, if you set a black view wrapping your routes, will give a black background effect as desired.

Upvotes: 1

Related Questions