React-native-navigation: [V2] topBar transparent not work

Created on 2 Sep 2018 · 5Comments · Source: wix/react-native-navigation

Issue Description

my code

 static get options () {
        return {
          topBar : {
            noBorder: true,
            visible: true,
            drawBehind: true,
            transparent: true,
            translucent: true,
            background: { color: 'transparent' },
            elevation: 0,
          }
        };
  }

still not work

[ENTER DESCRIPTION HERE - Please make sure to use the current [naming conventions](https://github.com/wix/react-native-navigation/issues/197)]

proifleimage

Steps to Reproduce / Code Snippets / Screenshots

[FILL THIS OUT - It will be extremely helpful]

Environment

React Native Navigation version: "react-native-navigation": "2.0.2427",
React Native version: "react-native": "0.56.0",
Platform(s) (iOS, Android, or both?): both
Device info (Simulator/Device? OS version? Debug/Release?):simulator ios

Source

herarya

👍3

All 5 comments

It is working fine for me.

Are you using SafeAreaView or something for the content?

Post your complete screen component with the styles

birkir on 4 Sep 2018

@birkir yes correct, i using SafeAreaView,

this code my root

return (
                <Provider store={store}>
                    <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
                        <ChildComponent {...this.props}/>
                    </SafeAreaView>
                </Provider>

)

herarya on 5 Sep 2018

😕1 👎1

Yeah, dont use that, it's adding the space on top

birkir on 5 Sep 2018

just use {translucent: true }in Push Function
ex:
topBar: {
background:{
color:'transparent',
translucent:true
},

ebrahimhassan121 on 4 Jan 2019

👎3

I am having the same problem. Adding the topBar styling options to every screen push works, but is not the prettiest solution.

I started having this issue when upgraded from 2.16.0 to 2.17.0 and then when I tried to get back to 2.16.0 the problem persisted, so I just kept the 2.17.0 version. Seems like the Navigation.setDefaultOptions({ options }) is not keeping the iOS topBar background color, because in android it works fine. Hope this issue can be resolved soon!!

In the meantime, adding the the necessary styling to every push works for me.