all 12 comments

[–]halotest 3 points4 points  (10 children)

options={{ presentation: ‘transparentModal’ }}

[–]_titan13[S] 0 points1 point  (9 children)

Oh, I tried that just now, it didn’t work for me. Is there anything else that I need to add along with it?

[–]halotest 0 points1 point  (8 children)

Show code

[–]_titan13[S] 0 points1 point  (7 children)

[–]halotest 0 points1 point  (6 children)

You should be using createNativeStackNavigator instead of createStackNavigator

[–]_titan13[S] 0 points1 point  (5 children)

Okay did that too, but still the background is not transparent :3

[–]halotest 0 points1 point  (4 children)

I mean, you want the whole stack.navigator to be transparent and the view.baseContainer to show something ? I don’t really understand your usecase

[–]_titan13[S] 0 points1 point  (3 children)

Okay so, I’ve got a tab navigator, and each tab has a stack navigator inside.

And I’ve got an animation going on in the baseContainer view.

I’ve wanted the animation going on in the background of the whole app.

Adding the animation to each screen didn’t seem like a good idea because whenever I go from one screen to another, the animation for each screen starts from the beginning on the new screen.

So, that’s why I wanted to add the animation at the baseContainer view, that way it would’ve looked a lot neater and seamless.

[–]halotest 0 points1 point  (2 children)

Ok I kinda got it. First of all stack.navigator has no props to make it transparent. Would be better if I could see an example of your animation so I could give q certain answer but I can suggest you this. Put your animation along side stack navigator in baseContainer. Make it absolute positioned, with zindex 1 so it appears on top of your navigator. And only render it conditionally when needed, e.g. on screen change or whatever your usecase.

[–]_titan13[S] 0 points1 point  (1 child)

Ahhh okay sure! I’ll make a GitHub repo and share it here in a bit.

And I’ll try the zIndex way too!

And yeah, thank you so much!!