Translucent Property. about react-native-navbar

[Kureev]

hm, I'm wondering if it's something different than opacity? You can just pass style prop and specify opacity key there

[Kureev]

For example now you're doing something like

renderScene: function(route, navigator) {
  var Component = route.component;
  var navBar = route.navigationBar;

  if (navBar) {
    navBar = React.addons.cloneWithProps(navBar, {
      navigator: navigator,
      route: route
    });
  }

  return (
    <View style={styles.navigator}>
      {navBar}
      <Component navigator={navigator} route={route} />
    </View>
  );
}

but you can change return a little bit to make it looks like this:

...
  return (
    <View style={styles.navigator}>
      <View style={{ opacity: 0.5, }}>
        {navBar}
      </View>
      <Component navigator={navigator} route={route} />
    </View>
  );

[Kureev]

@piyushchauhan2011 so, was it helpful or you're asking about something else?

[piyushchauhan2011]

@Kureev Sorry for late reply.
It applies the opacity but I think translucent is different.

I tried with and without sidemenu. Translucent is when user can see the content during scrolling below the navbar like in screenshot of medium.

Medium

Without Sidemenu

With Sidemenu

// Navigation with Content View
var Docit = React.createClass({

  renderScene: function(route, navigator) {
    var Component = route.component;
    var navBar = route.navigationBar;

    if (navBar) {
      navBar = React.addons.cloneWithProps(navBar, {
        navigator: navigator,
        route: route
      });
    }

    var menu = <SideBar flux={flux} navigator={navigator}/>;

    return (
      <SideMenu menu={menu}>
      <View style={MainStyles.navigator}>
        <View style={{ opacity: 0.5, }}>
        {navBar}
        </View>
        <View style={MainStyles.container}>
        <Component menu={menu} navigator={navigator} route={route} flux={flux} {...route.passProps} />
        </View>
      </View>
      </SideMenu>
    );
  },

  render: function() {
    return (
      <Navigator
        style={MainStyles.navigator}
        renderScene={this.renderScene}
        initialRoute={{
          component: NavigationBarView,
          navigationBar: <NavigationBar title="Home"/>
        }}
        configureScene={() => {
          return Navigator.SceneConfigs.FadeAndroid;
        }}
      />
    );
  }
});

[Kureev]

In your case you can fix it by adding backgroundColor property to MainStyles.navigator.

[piyushchauhan2011]

I tried it on navigator, it does solve the problem of side menu which was showing up earlier I couldn't get the medium like effect.

[Kureev]

You can implement it by using backgroundStyle from 0.7.2 version. The only point is that you can't use it in "casual" way described in examples. If you use navbar as Navigator.navigationBar property, it'll allocate special place for it. As I understood from your screenshots, you need to embed it into your component property. Maybe I'm wrong, but give it a shot and let me know.

@brentvatne Maybe you have any thoughts?

[Kureev]

Closed until new feedback