Example.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import Tabs from './Tabs'
import Tab from './Tabs/Tab'

export default class ExamplePage extends Component {
  state = {
    selectedTab: 1
  }

  render() {
    return (
      <Tabs>
        <Tab
          title="Tab 1"
          selected={this.state.selectedTab === 1}
          onPress={() => this.setState({selectedTab: 1})}>
          <View>
            <Text>This is the content for Tab 1</Text>
          </View>
        </Tab>
        <Tab
          title="Tab 2"
          selected={this.state.selectedTab === 2}
          onPress={() => this.setState({selectedTab: 2})}>
          <View>
            <Text>This is the content for Tab 2</Text>
          </View>
        </Tab>
      </Tabs>
    )
  }
}

ScrollableTabView.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  tabs: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#fafafa',
    borderBottomWidth: 1,
    borderBottomColor: '#e1e1e1'
  }
})

class ScrollableTabView extends Component {

  renderTabBar() {
    return (
      <View style={styles.tabs}>
        {this.props.children}
      </View>
    )
  }

  renderTabContent() {
    const tabs = React.Children.toArray(this.props.children)
    const selectedTab = tabs.find(tab => tab.props.selected) || tabs[0]

    let content

    if (selectedTab) {
      content = selectedTab.props.children
    }

    return (
      <View>
        <View>
          {content}
        </View>
      </View>
    )
  }

  render() {
    return (
      <View>
        {this.renderTabBar()}
        {this.renderTabContent()}
      </View>
    )
  }

}

export default ScrollableTabView

Tab.js

import React, { Component, PropTypes } from 'react'
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native'

const indicatorColor = '#0275d8'

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: '100%',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 2,
    borderBottomColor: 'transparent'
  },
  tabSelected: {
    borderBottomColor: indicatorColor
  },
  tabText: {
    fontSize: 14,
    fontWeight: '600',
    color: 'rgba(0, 0, 0, 0.54)',
    textTransform: 'uppercase'
  },
  tabTextSelected: {
    color: indicatorColor
  },
});

const Button = function(props) {
  return (
    <TouchableOpacity {...props}>
      {props.children}
    </TouchableOpacity>
  )
}

class Tab extends Component {
  static propsTypes = {
    title: PropTypes.string,
    selected: PropTypes.bool
  }

  render() {
    const {
      title,
      /* eslint-disable */
      selected,
      children,
      /* eslint-enable */
      ...props
    } = this.props

    return (
      <Button {...props} style={{flex: 1}}>
        <View style={[styles.tab, selected && styles.tabSelected]}>
          <Text style={[styles.tabText, selected && styles.tabTextSelected]}>{title}</Text>
        </View>
      </Button>
    )
  }
}

export default Tab

Tabs.js

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import ScrollableTabView from './ScrollableTabView'

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

class Tabs extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollableTabView>
          {this.props.children}
        </ScrollableTabView>
      </View>
    )
  }
}

export default Tabs