React-native-router-flux: renderRightButton displays button on left side of NavBar

[AlessandroCorradini]

Version

Tell us which versions you are using:

• react-native-router-flux v3.32.0
• react-native v0.30.0

Expected behaviour

I would to render a custom icon for the right button with renderRightButton method. I'm using react-native-vector-icons. The button appears on left. The button works, but it is of the wrong side of the NavBar.

Actual behaviour

Steps to reproduce

const MenuIcon = <TouchableHighlight onPress={()=>Actions.menu()} style={{ backgroundColor: 'red', width: 30, height: 30}}> <Icon name="menu" size={30} /> </TouchableHighlight>;

<Scene key="home" component={HomePage} title="Home" onRight={()=>Actions.menu()} rightTitle="Menu" initial={true} renderRightButton={() => MenuIcon}/>

[zth]

I have the same issue :)

[sarovin]

Can you try to fix it with style props?

[AlessandroCorradini]

@sarovin
yes, if I add "position: absolute" and "right: 0" or another number, the button is in the correct position, but I think than the right button should be on the right side by default and the style props should serve for micro adjustments :)

<TouchableHighlight onPress={()=>Actions.menu()} style={{ backgroundColor: 'red', width: 40, height: 40, right: 5, top: 5, position: 'absolute'}}>
        <Icon name="menu" size={40} />
    </TouchableHighlight>;

[moschan]

I sent Pull request (https://github.com/aksonov/react-native-router-flux/pull/1054) for solve this problem, and It was merged. Please check this function when next version bumped :smile_cat:

[marciobueno1]

My navigationBarStyle is
{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', borderBottomWidth: 0, }

I also have custom styles for renderTitle (using flex) and renderRightButton (using absolute) and it is broken with 3.36, although it works fine with 3.35. Probably because of this PR...