import React from 'react';
import {
  Text,
  View,
} from 'react-native';

// 3rd party libraries
import {
  Actions,
  Router,
  Scene,
} from 'react-native-router-flux';
import GoogleAnalytics from 'react-native-google-analytics-bridge';
import Icon from 'react-native-vector-icons/MaterialIcons';

import { config } from './app/config';
GoogleAnalytics.setTrackerId(config.trackerId);

// Views
import MainView from './app/views/main';
import SettingsView from './app/views/settings';
import AddView from './app/views/add';

// @todo remove when RN upstream is fixed
console.ignoredYellowBox = [
  'Warning: In next release empty section headers will be rendered.',
  'Warning: setState(...): Can only update a mounted or mounting component.',
];

class TabIcon extends React.Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Icon style={{color: this.props.selected ? '#455A64' : '#9E9E9E'}} name={this.props.tabIcon} size={24} />
        <Text style={{color: this.props.selected ? '#455A64' : '#9E9E9E', fontSize: 10}}>{this.props.tabName}</Text>
      </View>
    );
  }
}

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="tabbar" tabs={true}>
      <Scene key="main" title="Bitcoin Calculator" component={MainView} tabIcon="home" tabName="Home" icon={TabIcon} hideNavBar={true} initial={true} />
      <Scene key="settings" title="Settings" component={SettingsView} tabIcon="settings" tabName="Settings" icon={TabIcon} hideNavBar={true} />
    </Scene>

    <Scene key="add" title="Add" component={AddView} hideNavBar={true} direction="vertical"/>
  </Scene>
);

export default class Periods extends React.Component {
  render() {
    return <Router scenes={scenes} />;
  }
}

@@ -23,56 +23,8 @@
 ct';
-%0Aimport %7B%0A  Text,%0A  View,%0A%7D from 'react-native';
 %0A%0A//
@@ -189,68 +189,8 @@
 ge';
-%0Aimport Icon from 'react-native-vector-icons/MaterialIcons';
 %0A%0Aim
@@ -641,377 +641,8 @@
 %5D;%0A%0A
-class TabIcon extends React.Component %7B%0A  render() %7B%0A    return (%0A      %3CView style=%7B%7BalignItems: 'center'%7D%7D%3E%0A        %3CIcon style=%7B%7Bcolor: this.props.selected ? '#455A64' : '#9E9E9E'%7D%7D name=%7Bthis.props.tabIcon%7D size=%7B24%7D /%3E%0A        %3CText style=%7B%7Bcolor: this.props.selected ? '#455A64' : '#9E9E9E', fontSize: 10%7D%7D%3E%7Bthis.props.tabName%7D%3C/Text%3E%0A      %3C/View%3E%0A    );%0A  %7D%0A%7D%0A%0A
 cons
@@ -693,47 +693,8 @@
 t%22%3E%0A
-    %3CScene key=%22tabbar%22 tabs=%7Btrue%7D%3E%0A  
     
@@ -762,53 +762,8 @@
 iew%7D
- tabIcon=%22home%22 tabName=%22Home%22 icon=%7BTabIcon%7D
  hid
@@ -795,18 +795,16 @@
 rue%7D /%3E%0A
-  
     %3CSce
@@ -867,95 +867,48 @@
 ew%7D 
-tabIcon=%22settings%22 tabName=%22Settings%22 icon=%7BTabIcon%7D hideNavBar=%7Btrue%7D /%3E%0A    %3C/Scene%3E%0A
+hideNavBar=%7Btrue%7D direction=%22vertical%22/%3E
 %0A   

Remove TabIcon