App.jsx

import React, {Component, PropTypes} from 'react'
import MainPage from './MainPage'
import ClubOverview from './ClubOverview'
import Board from './Board'
import {Page, Navigator, Tabbar, Tab} from 'react-onsenui'
require('moment/locale/de')

class Tabs extends Component {
  constructor (props) {
    super(props)
    this.state = {
      index: 1
    }
  }

  render () {
    return (
      <Page renderBottomToolbar={() => <Tabbar index={this.state.index} onPreChange={event => {
        if (event.index !== this.state.index) {
          this.setState({index: event.index})
        }
      }} renderTabs={() => [
        {
          content: <MainPage key='MainPage' navigator={this.props.navigator} />,
          tab: <Tab key='Events' label='Events' icon='fa-calendar'/>
        },
        {
          content: <ClubOverview key='ClubOverview' navigator={this.props.navigator}/>,
          tab: <Tab key='Clubs' label='Clubs' icon='fa-glass'/>
        }, {
          content: <Board key='Board' navigator={this.props.navigator} />,
          tab: <Tab key='Board' label='Board' icon='fa-comments'/>
        }
      ]}/> } />
    )
  }
}

Tabs.propTypes = {
  navigator: PropTypes.object
}

const App = () => {
  const renderPage = (route, navigator) => {
    return <route.component key={route.key} navigator={navigator} {...route.props}/>
  }

  return <Navigator renderPage={renderPage} initialRoute={{component: Tabs, key: 'Tabs'}}/>
}

export default App