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' }}
    >

have you looked at this on the github page? https://github.com/aksonov/react-native-router-flux/issues/1310 — Train, Oct 20 '16 at 20:53
Also take a look at how he created the component, check out how it looks in the js side and ios side. You can update the code manually but you probably won't be able to update if something new comes out. — Train, Oct 20 '16 at 20:56

score 9 · Answer 1 · answered Dec 01 '16 at 18:39

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} />
        ...
});

score 1 · Answer 2 · answered May 04 '17 at 15:55

When building your scene, pass the renderTitle() method into your scene component and you can insert your image there. Make sure you are getting the correct relative path to your image file.

    import React from 'react';
    import { View, Image } from 'react-native';
    import { Scene, Router } from 'react-native-router-flux';
    import Feed from './components/Feed';
    import LogoText from './assets/logo-text.png';


    const RouterComponent = () => {
      return (
        <Router>
          <Scene
            key="Feed"
            renderTitle={() => (
              <View>
                <Image style={styles.headerLogo} source={LogoText} />
              </View>
            )}
            renderBackButton={() => (null)}
            navigationBarStyle={styles.header}
            component={Feed}
          />
        </Router>
      );
    };

    const styles = {
      header: {
        backgroundColor: 'lightgrey',
        padding: 25,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        height: 64,
      },
      headerLogo: {
        height: 14,
        width: 90,
      },
    };

    export default RouterComponent;

score 0 · Answer 3 · answered Oct 20 '16 at 21:38

Check out the issues section on the github page.

Try this

    navigationBarBackgroundImage={{
        uri: 'navbar-background', // reference to resource
        width: Dimensions.get('window').width, // make sure the image stretches all the way
        height: 64, // height of the navbar
    }}

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

3 Answers3