tabbar.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Router, Scene, Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';
import Shows from './OnAir';
import Stations from './Stations';

const TabIcon = props => {
  console.log('selected', props.selected); //undefined
  return (
    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
      <Icon size={24} name={props.name} color={props.selected ? '#D7101A' : '#8F8E94'} />
      <Text style={{ fontSize: 10 }}>
        {props.title}
      </Text>
    </View>
  );
};

class TabBar extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene
            key="tabbar"
            tabs
            tabBarStyle={{
              backgroundColor: 'white',
              borderTopColor: '#8F8E94',
              borderWidth: 1,
              borderTopWidth: 0.5,
              borderLeftWidth: 0,
              borderRightWidth: 0,
              borderBottomWidth: 0
            }}
          >
            <Scene
              key="shows"
              name="ios-albums"
              component={Shows}
              title="Shows"
              duration={0}
              icon={TabIcon}
              hideNavBar
              animation="fade"
              initial
            />
            <Scene
              key="stations"
              name="ios-radio-outline"
              component={Stations}
              title="Stations"
              icon={TabIcon}
              duration={0}
              hideNavBar
              animation="fade"
            />
            <Scene
              key="favorites"
              name="ios-heart"
              component={Stations}
              title="Favorites"
              icon={TabIcon}
              duration={0}
              hideNavBar
              animation="fade"
              onSelect={() => Actions.stations}
            />
            <Scene
              key="search"
              name="ios-search"
              component={Stations}
              title="Search"
              icon={TabIcon}
              duration={0}
              hideNavBar
              animation="fade"
              onSelect={() => Actions.stations}
            />
          </Scene>
        </Scene>
      </Router>
    );
  }
}

export default TabBar;