StackNavigator: Set body style

Question

I am currently working at a project with a StackNavigator of React-Navigation: https://snack.expo.io/@pob/stacknavigator-problem. I use the Navigator in front of a background image and I want, that the body of each of its pages is transparent, so that you can see the background image through the StackNavigator.

I already found out how to set the style of the StackNavigator's header, but I have no idea how to set the style of its body. I would like to set the color of this body to 'transparent'. Can anyone help?

Screenshot of the result I get with Hazim Ali's snack in iOS:

score 1 · Accepted Answer · edited Oct 26 '18 at 15:50

1

the body style should be added something like this if you want all screen in StackNavigator to have transparent background, and header not visible

const MyStackNavigator = new StackNavigator({
  ScreenOne: { screen: ScreenOne },  
},{
  cardStyle: {
    backgroundColor: "transparent",
  },
  navigationOptions: {
    header: null
  }
});

edited Oct 26 '18 at 15:50

Matt H

6,422
2
28
32

answered May 20 '18 at 15:15

Hazim Ali

1,077
4
17
28

Thank you for your answer. I tried it out, but the option "backgroundColor" doesn't support the value "transparent". Do you have any other idea? – Paul May 20 '18 at 16:34
that's weird, as backgroundColor always support "transparent", I already try with your code and it's working :-) check this one https://snack.expo.io/ryRw231J7 @Paul – Hazim Ali May 21 '18 at 03:28
When I open your snack, I can't see the background image through the StackNavigator, I can only see a black StackNavigator. So the problem is, that the StackNavigator's card is transparent, but behind it there is another black layer of the StackNavigator. Any idea to solve this? Or does your snack work at your device? – Paul May 21 '18 at 07:53
@Paul What do you means by black ? as I open, I can see the background image and the stackNavigator background become transparent.. so, I see text directly on top of the background image.. or are you looking for something else ? – Hazim Ali May 21 '18 at 15:39
I posted a picture of what I get with your snack... (see the question) – Paul May 21 '18 at 16:03
I tried your snack another time, this time in Android, and it worked. But in iOS I get what you see in the second picture of my question. Any idea how to solve the problem in iOS? – Paul May 21 '18 at 17:07
Ok, I will open a new topic for this specific question! Thank you! – Paul May 22 '18 at 07:46
That's the new topic, that I've opened: https://stackoverflow.com/questions/50462905/react-native-transparent-stack-navigator-in-ios-doesnt-work – Paul May 22 '18 at 08:57

StackNavigator: Set body style

1 Answers1