React Native Router Flux custom Icon

Question

this is my first question so pardon me If I make any mistakes.

I am trying to customise navbar icons for IOS using React native router flux but I don't know how to retrieve my custom made icons (png files) In some examples they use icon={tabIcon} like so but what I need to do is decribe a path for the image source but I don't know how to type it in the right syntax.

Any help would be appreciated. Thanks.

Here is my code:

      <Scene key="root">
        <Scene key="tabbar" tabs>

          <Scene key="tab2"  title="Categories"  **icon={TabIcon}**  >
            <Scene key="categories" component={Categories} title="Categories" initial />
            <Scene hideTabBar key="categorylisting" component={CategoryListing} title="Adventure" />
            <Scene hideTabBar key="showdetails" component={ShowDetails} title="TV Show Details"  />
          </Scene>

Answer 1

It seems to be missing from the docs, but it's done like this.

function CustomIcon(props) {
  return (
    <View>
      <Image
        source={iconSource}
        style={{ width: 22, height: 25 }}
        tintColor={'red'}
      />
      <Text>Tab1</Text>
    </View>
  );
}

<Scene key="tab1" icon={CustomIcon} >
</Scene>