search

expo / ex-navigation

Route-centric navigation for React Native
997 stars 201 forks source link

Navigationbar Transparency #228

Open davidfloegel opened 7 years ago

davidfloegel commented 7 years ago

Hello,

I was trying to use the navigation bar component with a transparent background to be able to layer it on top of an image.

However, if I do rgba(0,0,0, 0) it doesn't work at all.

Anyone got any experience?

David

harshq commented 7 years ago

add a minus marginTop value to the container

juellez commented 7 years ago

See https://github.com/exponentjs/ex-navigation/issues/248#issuecomment-261697559

You must set transparency={true} after which you may set a tabBarColor or tabBarStyle with opacity in the rgba value.

davidfloegel commented 7 years ago

But that's regarding the tab bar - i'm looking to make the title bar (on top) transparent.

kiki-le-singe commented 7 years ago

@davidfloegel you can use the translucent prop:

  static route = {
    navigationBar: {
      title: 'Foo',
      translucent: 'transparent', // or translucent: 'rgb(48, 56, 171)'
    }
  }

see navigationBar properties - translucent

Nhacsam commented 7 years ago

I have the same problem. It set a blur on exponent : https://github.com/exponent/ex-navigation/blob/5b893fa0a84b0d14826c867b5d6a29a7c425ab1b/src/ExNavigationBar.js#L250 Is it possible to make it optional ?