Seeking Guidance on Notification Icon Implementation

[ringzhz]

Hey,

Great work! This library is the only one I could get working well for Navigation w/ Toolbar integration on react-native android.
I'm adding a custom notification icon to the notification bar by using this snippet:
<Scene key="root" renderRightButton={()=>notificationsIcon}>

I was wondering if you have any guidance on passing in a state to this icon so that it might be able to conditionally render itself as having no notifications or n-number of notifications.

Versions:
"react-native": "^0.23.0"
"react-native-router-flux": "^3.2.7"

[ringzhz]

Additionally, I'm trying to use a custom icon for the leftButton.

I'm not sure how to write comparable functionality in my button renderers without a reference to the navigationState.

I can understand why you haven't done it yet, but might it be useful to bind the passed in renderers to this, as is done for the built-in renderers? How else would my button be able to access the drawer instance as to call its toggle method?

Unless I'm missing something, which is the likely case, I'd suggest the following change. I will gladly create a PR if you agree.

Rewriting this:

export default class NavBar extends React.Component {
    componentWillMount(){
        const state = this.props.navigationState;
        this._renderRightButton = this._renderRightButton.bind(this);
        this._renderBackButton = this._renderBackButton.bind(this);
        this._renderLeftButton = this._renderLeftButton.bind(this);
        this._renderTitle = this._renderTitle.bind(this);
        if (state.renderLeftButton){
            this._renderLeftButton = state.renderLeftButton;
        }
        if (state.renderRightButton){
            this._renderRightButton = state.renderRightButton;
        }
        if (state.renderBackButton){
            this._renderBackButton = state.renderBackButton;
        }
    }

as:

export default class NavBar extends React.Component {
    componentWillMount(){
        const state = this.props.navigationState;
        this._renderRightButton = this._renderRightButton.bind(this);
        this._renderBackButton = this._renderBackButton.bind(this);
        this._renderLeftButton = this._renderLeftButton.bind(this);
        this._renderTitle = this._renderTitle.bind(this);
        if (state.renderLeftButton){
            this._renderLeftButton = state.renderLeftButton.bind(this);
            //or .bind(this.props.navigationState);
        }
        if (state.renderRightButton){
            this._renderRightButton = state.renderRightButton.bind(this);
        }
        if (state.renderBackButton){
            this._renderBackButton = state.renderBackButton.bind(this);
        }
    }

[aksonov]

What sense to bind to this? These function should be bind to the navigation state. Please check latest version, now render functions are binded during render()

[aksonov]

Now you could use just rightButton/leftButton as React components. I'm closing this ticket.