react-native-mdcore/src/components/BottomNavigation.js

Material Design for both Android and iOS

import React from 'react'
import { TouchableWithoutFeedback, View } from 'react-native'

import PropTypes from './PropTypes'
import PureComponent from './PureComponent'
import StyleSheet from './StyleSheet'

export default class BottomNavigation extends PureComponent {

  static contextTypes = {
    theme: PropTypes.any
  }

  static propTypes = {
    backgroundColor: PropTypes.color,
    initialItem: PropTypes.number,
    onItemSelected: PropTypes.func
  }

  static defaultProps = {
    initialItem: 0,
    onItemSelected: (_options = { index: 0 }) => { }
  }

  state = {
    index: undefined
  }

  render() {
    const { theme } = this.context
    const styles = Styles.get(theme, this.props)
    return (
      <View style={styles.container}>
        {this.props.children && this.props.children.map(this._renderItem)}
      </View>
    )
  }

  setItem = (index) => {
    if (index === this.state.index) {
      return
    }
    this.setState({ index })
  }

  _getIndex = () => {
    return this.state.index !== undefined ? this.state.index : this.props.initialItem
  }

  _onItemPress = (index) => {
    this.setState({ index })
    this.props.onItemSelected({ index })
  }

  _renderItem = (item, index) => {
    const { theme } = this.context
    const styles = Styles.get(theme, this.props)
    const active = index === this._getIndex()
    item = item.props.active === active ? item : React.cloneElement(item, { active })
    return (
      <TouchableWithoutFeedback key={index} onPress={() => this._onItemPress(index)}>
        <View style={styles.item}>
          {item}
        </View>
      </TouchableWithoutFeedback>
    )
  }
}

const Styles = StyleSheet.create((theme, { backgroundColor, style }) => {
  const container = {
    backgroundColor,
    flexDirection: 'row',
    ...style
  }
  const item = {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
  return { container, item }
})