How do i change react-native theme to transaperent on ios

Question

how can i change the theme or default background color for ios.. it's conflicting with my background image. I'd like to set it to transparent.. Thanks

Answer 1

First let's understand how scenes in react-native-router-flux works. When you define them in your navigator, like below,

<Scene sceneStyle={{marginTop: 64}} title="Home" key="home" component={Home} />

You simply say that, my content should render below the pre defined navbar. Which can be 54 or 64 depending on your OS. So when you use Router,

<Router navigationBarStyle={{backgroundColor: 'transparent'}}>

and add navigationBarStyle to every Scene you have by introducing that line, you almost forgot what you've done above, setting your Scene to align itself some margin below the navigationBar. Therefore you see nothing (white space) in your simulator.

In order to have what you need, do this where you want your image to appear full screen with navigation controls:

 Actions.refresh({
   key: 'home',
   navigationBarStyle: {backgroundColor: 'transparent'},
   sceneStyle: {marginTop: 0},
 });

Or you can introduce this settings in your Scene component where you define it.

I tested this solution and it works on iOS, can't tell the same for Android, so please back up your code before making changes. You can further customize it to remove borderBottom line.