Navbar custom wrapper proposal

[almirfilho]

Hello,

I think it would be nice to have a way to wrap the default navbar contents with a custom component.
Currently I'd like to use the blur features of react-native-blur to have nicely blurred navbars (like iOS' system apps).

The thing is, it's not a style issue that we can resolve just with navigationBarStyle prop configuration, in that case I need to use a custom View component (<BlurView>) to wrap the navbar contents.

Looking at the NavBar render() method, the same thing already happens if the prop navigationBarBackgroundImage is set: the navbar contents are wrapped by an Image component.

So, I'd like to include a navigationBarWrapper prop (React.Component type) to do this with a custom component.

What do you guys think about this?

[amhinson]

I'm looking to do this exact thing. Have you found an alternative to use react-native-blue in the navbar?

[almirfilho]

@amhinson I've managed to do it in a, let's say, dirty, ugly way.
I've implemented a new component that extends NavBar and tweaked its rendering, as follows:

import React from 'react';
import { View } from 'react-native';
import { BlurView } from 'react-native-blur';
import { NavBar, Util } from 'react-native-router-flux';
import Style from './style';


export default class CustomNavBar extends NavBar {
  render(){
    // render original navbar
    const renderedNavBar = super.render();
    // check whether the navbar should be displayed or not
    const hide = Util.deepestExplicitValueForKey(this.props, 'hideNavBar');
    // wrap navbar with whatever you want
    return hide ? renderedNavBar : this.wrap(renderedNavBar);
  }
  
  wrap(renderedNavBar){
    return {
      ...renderedNavBar,
      props: {
        ...renderedNavBar.props,
        children:
          <BlurView blurType='xlight'>
            <View style={Style.container}>{renderedNavBar.props.children}</View>
          </BlurView>
      }
    };
  }
}

And then pass it as your navbar in Router:

<Router navBar={CustomNavBar} // ...

I really wish to remove this awful pice of code in the future. Hope it help.

[amhinson]

Hmm can't seem to get the wrap function to render anything. It's just returning an empty navbar. Any thoughts?

EDIT: Actually, whats on your container style?

[almirfilho]

@amhinson yeah you have to reset its position, sorry xD

container: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0
}