Couldn't change the background of the navbar about react-native-navbar

[Kureev]

Hi @aaronbwatkins! First of all, thanks for the warm words, I feel a warm inside when I hear somebody using our component.

Solving your issue: You need to try a tintColor="transparent" property, that should work.

[Kureev]

Hi Alejandro! I'm feel myself very sorry for not responding you for a 2 weeks. I was busy making https://github.com/Kureev/browserify-react-live . So, answering your question: since version 0.7.2 you can use backgroundStyle property to customize background layer. If you using prev. version it's also fine and backgroundColor should work. The only case it may not work - if you also specify style property and override backgroundColor there. For this case I made this patch in 0.7.2. Please, let me know if it works fine for you

[robtg4]

Hey Kureev,
So with backgroundStyle would you just do the following:

<Navigator
renderScene={this.renderScene}
initialRoute={{
component: Main,
backgroundStyle: 'transparent',
navigationBar: (
<NavigationBar
customTitle={}
customPrev={} />
),
}} />

as i can't make it work this way.

[alejomendoza]

Hi Alexey!! I finally didn't use react-native-navbar but it gave me some ideas to keep moving forward, thank you though! you can check out my own solution here: https://github.com/skyhitz/skyhitz-react-native-ios/

[Kureev]

Hey @robtg4! I think we're talking about react-native-navbar so far, so backgroundStyle property should be applied to it. Also, not sure I got your idea with this part:

navigationBar: (
customTitle={}
customPrev={} />
),

I'd say you need to do something like this instead:

navigationBar: (
  <Navbar backgroundStyle={{ backgroundColor: 'transparent', }} />
),

[Kureev]

@alejomendoza Hi again! Not sure I can find where you're using my component in the code. I think you're building a great application, but not sure I understand what kind of help I can do for you. Make sure you read readme first and using component as I pointed out in examples.

[Kureev]

@alejomendoza Have you figured out how to solve this issue?

[robtg4]

ok thatnks @Kureev !

[robtg4]

Hey @Kureev - sorry for the delayed response - I still seem to not be able to make the navbar transparent - here is my code so far:

and here's wha that looks like:

[Kureev]

• Update your library version
• In the new version (0.8.2) you should use style instead of backgroundColor

Would it solve your problem?

[Kureev]

Closed due to lack of feedback (+ check 1.0.0 version, it has tintColor property for this purpose)

[aaronbwatkins]

Hi @Kureev - this is perhaps my favorite react component...certainly the one I use most often, so thank you so much. I've also tried:

<Navbar backgroundStyle={{ backgroundColor: 'transparent', }} />

and I am getting a white background. I'm using the latest version of react-native-navbar. Would I also need to adjust something in the obj-c file to accomplish this? thanks so much.

[aaronbwatkins]

Thanks @Kureev - I just tried tintColor = "transparent" as well. Still gives me a white background. I also tried adding a style property to the NavBar and putting tintColor in my Stylesheet.create function. Also tried <Navbar backgroundStyle={{ tintColor: 'transparent', }} /> to no avail. I know this is also pretty tedious to do in Xcode/Swift. No worries if it's not possible, I can manage with a white navBar for now. Thanks again!

[Kureev]

I'll take a look on it asap, I promise.

[aaronbwatkins]

thanks a lot @Kureev . I appreciate that. :-)

[kkgelu]

                tintColor='transparent'

This actually worked for me. It may have something to do with how you position the view, strange enough I had to put the nav bar as the last element of the root view. Inspired by this:

https://github.com/brentvatne/react-native-overlay

Ideally, no. This should probably only be used as a last resort. You can usually accomplish what you need to by just absolute positioning an view at the bottom of your root component."

let me know if you come up with something better.

[Kureev]

backgroundColor has nothing with a way you position elements. It's not necessary to put a navbar element at the end of your view and align it via position: absolute.

[kkgelu]

@Kureev you are absolutely right. I was saying that's only way I accomplished transparent nav bar -- usually it flows over a picture or scrollview. I am hoping you or others can find a better approach.

[Kureev]

Hm, what stops you from something like this:

<View style={container}>
  <Navbar {...navbarSettings} />
  <ScrollView {..scrollViewSettings} />
</View>

That shouldn't overlap a ScrollView, right?

[kkgelu]

@Kureev I might be totally misunderstanding what the issue was, I thought people want something like this:

Anyway, the background of the navbar is transparent.

[Kureev]

Oh, I got what you mean, @kkgelu!

Well, in this particular use-case I'd recommend to use an approach with absolute positioning:

{
  position: 'absolute',
  top: 0,
}