How can you implement a logo in the react-native-router-flux navbar?

Question

Currently I am trying to implement a logo, which is a png file, in the react-native-router-flux navbar. I am not sure if this is possible, as I haven't found any examples online. I have tried using the 'navigationBarBackgroundImage' property from react-native-router-flux. In the code below, the sceneStyle and navigationBarStyle properties work, however, the background image does not. Any Advice?

    <Router
      sceneStyle={{ paddingTop: 60 }}
      navigationBarStyle={{ backgroundColor: '#80ffbf' }}
      navigationBarBackgroundImage={{src:'./Resources/GiftIt_Logo_Green.png' }}
    >

Answer 1

I added a logo to the NavBy by using the renderTitle prop on the root scene and rendered a custom component:

const AppLogo = () => {
  return (
    <View style={{ alignItems: 'center', marginTop: 26 }}>
      <Image source={require('./app/assets/images/appLogo.png')}
             style={{ width: 84, height: 27 }} />
    </View>
  );
};


const MyApp = React.createClass({

  render() {
    <Provider store={store}>
      <RouterWithRedux hideNavBar={true}>
        <Scene key="root" renderTitle={() => { return <AppLogo />; }}>
        <Scene key="home" component={HomePage} title="My App" initial={true} />
        ...
});