Pass props into TabIcon with React Native Router Flux

Question

I'm using react-native-router-flux in my app and want to pass in paths to png images for my TabIcon components. I know I could just make a different tab icon component for each tab, but these icons would be exactly the same except for the image source and I want to find a DRY way to accomplish my goal. Where in my scenes can I pass in the image path?

Here is my TabIcon component:

const TabIcon = ({ selected, title, image }) => {
  const tabStyle = selected ? styles.selected : styles.unselected
  return (
    <View style={tabStyle}>
      <Image
        style={{height: 35, width: 35}}
        source={require(image)}
      />
    </View>
  )
}

My scenes:

const Scenes = Actions.create(
  <Scene key='root'>
    <Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}>
      <Scene key='tab1' title='Feed' icon={TabIcon}>
        <Scene 
          key='Feed'
          component={Feed}
          title='Feed'
          initial={true}
        />
      </Scene>
      <Scene key='tab2' title='Create' icon={TabIcon}>
        <Scene
          key='Create'
          component={Create}
          title='Create'
        />
      </Scene>
      <Scene key='tab3' title='Leaderboard' icon={TabIcon}>
        <Scene
          key='leaderboard'
          component={Leaderboard}
          title='Leaderboard' 
        />
      </Scene>
    </Scene>
  </Scene>
)

EDIT

I have tried passing in the image like so

const Scenes = Actions.create(
  <Scene key='root'>
    <Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}>
                                                    //HERE
      <Scene key='tab1' title='Feed' icon={TabIcon} image={'../images/feed.png'}>
        <Scene 
          key='matchupsFeed'
          component={MatchupsFeed}
          title='Feed'
          initial={true}
        />
      </Scene>
...
...
...

Within my TabIcon component if I console.log(image) it prints out "../images/feed.png" but I get this error in the simulator:

Unknown named module: '../images/feed.png'

score 2 · Accepted Answer · edited May 23 '17 at 12:24

After taking a look at this SO question, I figured it out:

const TabIcon = ({ selected, title, image }) => {
  const selectColor = selected ? '#ED1B25' : '#FFF'
  return (
    <View style={[styles.tabStyle, {borderBottomColor: selectColor}]}>
      <Image
        style={{height: 35, width: 35}}
        // Change HERE
        source={image}
      />
    </View>
  )
}

Scenes

const Scenes = Actions.create(
  <Scene key='root'>
    <Scene key='tabbar' tabs={true} tabBarStyle={styles.tabBarStyle}>
                                                   //Change HERE
      <Scene key='tab1' title='Feed' icon={TabIcon} image={require('../images/feed.png')}>

Pass props into TabIcon with React Native Router Flux

1 Answers1