Scene, tabs (react-native-router-flux) and icons (react-native-vector-icons)

Question

I have my router file as below :

import *;


const TabIcon = ({ selected, title }) => (
  <Text style={{ color: selected ? 'red' : 'black' }}>{ title }</Text>
);

const RouterComponent = () => (
  <Router>
    <Scene key="root">
      <Scene
        key="tabbar"
        tabs
        tabBarStyle={{ backgroundColor: '#FFFFFF' }}
      >
        <Scene key="One" title="ONE" icon={TabIcon}>
            <Scene
              key="screenone"
              component={ScreenOne}
              hideNavBar
              initial
            />
          </Scene>
          <Scene key="Two" title="Two" icon={TabIcon}>
            <Scene
              key="screentwo"
              component={ScreenTwo}
              hideNavBar
            />
          </Scene>
          <Scene key="Three" title="Three" icon={TabIcon}>
            <Scene
              key="screenthree"
              component={ScreenThree}
              hideNavBar
            />
          </Scene>
          <Scene key="Four" title="Four" icon={TabIcon}>
            <Scene
              key="screenfour"
              component={ScreenFour}
              hideNavBar
            />
          </Scene>
          <Scene key="Five" title="Five" icon={TabIcon}>
            <Scene
              key="screenfive"
              component={ScreenFive}
              hideNavBar
            />
          </Scene>
        </Scene>
      </Scene>
      <Scene
        key="modal"
        component={ModalScreen}
        title="Modal"
        direction="vertical"
        hideNavBar
      />
  </Router>
);

export default RouterComponent;

Everything works as expected but i want one more thing: Adding icons from 'react-native-vector-icons' to replace 'string' for tabs buttons.

Can someone assists please?

I have installed react-native-vector-icons already and its working perfectly.

Thanks

Answer 1

This should give you some idea -

import Icon from 'react-native-vector-icons/FontAwesome';

const myIcon = (<Icon name="rocket" size={30} color="#900" />)

const TabIcon = ({ selected, title }) => (
    myIcon
);