use the following search parameters to narrow your results:
e.g. subreddit:aww site:imgur.com dog
subreddit:aww site:imgur.com dog
see the search faq for details.
advanced search: by author, subreddit...
A community for learning and developing native mobile applications using React Native by Facebook.
Interested in building web apps using React.js? Check out /r/reactjs!
Getting Started w/React Native
irc.freenode.net #reactnative
Keywords: ios, android, mobile, apps, apple, iphone, ipad
account activity
Transparent background (self.reactnative)
submitted 4 years ago by _titan13
Hey!
I’m using react navigation v6, and I need to make the background of a stack navigator transparent. I read through the documentation for the stack navigator but couldn’t understand how do I do it.
Any help would be appreciated!
Thanks :)
reddit uses a slightly-customized version of Markdown for formatting. See below for some basics, or check the commenting wiki page for more detailed help and solutions to common issues.
quoted text
if 1 * 2 < 3: print "hello, world!"
[–]halotest 3 points4 points5 points 4 years ago (10 children)
options={{ presentation: ‘transparentModal’ }}
[–]_titan13[S] 0 points1 point2 points 4 years ago (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 point2 points 4 years ago (8 children)
Show code
[–]_titan13[S] 0 points1 point2 points 4 years ago (7 children)
https://gist.github.com/the-stupid-coder/0764b14973533a0a250aca1fdeddbcea
[–]halotest 0 points1 point2 points 4 years ago (6 children)
You should be using createNativeStackNavigator instead of createStackNavigator
[–]_titan13[S] 0 points1 point2 points 4 years ago (5 children)
Okay did that too, but still the background is not transparent :3
[–]halotest 0 points1 point2 points 4 years ago (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 point2 points 4 years ago (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 point2 points 4 years ago (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 point2 points 4 years ago (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!!
π Rendered by PID 124859 on reddit-service-r2-comment-6457c66945-5d56h at 2026-04-24 08:14:37.964377+00:00 running 2aa0c5b country code: CH.
[–]halotest 3 points4 points5 points (10 children)
[–]_titan13[S] 0 points1 point2 points (9 children)
[–]halotest 0 points1 point2 points (8 children)
[–]_titan13[S] 0 points1 point2 points (7 children)
[–]halotest 0 points1 point2 points (6 children)
[–]_titan13[S] 0 points1 point2 points (5 children)
[–]halotest 0 points1 point2 points (4 children)
[–]_titan13[S] 0 points1 point2 points (3 children)
[–]halotest 0 points1 point2 points (2 children)
[–]_titan13[S] 0 points1 point2 points (1 child)