I'm creating my app with react-native and also using react-native-router-flux for routing. I have this piece of code in my router.js file and trying to add a button on the right that once is clicked it should trigger sayHello action.

const CoinImg = () => {
  return (
    <View>
      <Image style={{width:20, height:20}} source={require('./myyImage.png')}/>
    </View>
  );
};

<Scene
          onRight={() => Actions.sayHello()}
          renderRightButton={() => { return <CoinImg />; }} 
          key="firstComponent"  
          component={FirstComponent} 
          title=" " 
        />

The above code can correctly show image on the right but when I click that image nothing happens (action sayHello() is not triggered). Instead, If I have the following code the action is triggered.

<Scene 
          onRight={() => Actions.sayHello()}
          rightTitle="Print Hello"
          key="SecondComponent"
          component={SecondComponent}
          renderTitle={() => { return <CoinImg />; }} 
        />

dependencies versions:

"react": "15.3.2",
"react-native": "0.34.1",
"react-native-router-flux": "^3.35.0"