Reapp.io router sets active BarItem

YourComponent.jsx

import { Bar, React, Reapp, View } from 'reapp-kit';

export default Reapp(React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  getActiveBar() {
    let currentPath = this.context.router.getCurrentPath();
    if (currentPath.indexOf(this.context.router.makePath('shop')) === 0) {
      return 0;
    }
    if (currentPath.indexOf(this.context.router.makePath('sell')) === 0) {
      return 1;
    }
    if (currentPath.indexOf(this.context.router.makePath('profile')) === 0) {
      return 2;
    }
  },

  toggleDrawer(requestedBar) {
    // do some action here to transition to another view
  },

  render() {
    return (
      <View
        after={
          <Bar display='text' position='bottom' activeIndex={this.getActiveBar()}>
            <Bar.Item onTap={this.toggleDrawer.bind(this, 0)}>Shop</Bar.Item>
            <Bar.Item onTap={this.toggleDrawer.bind(this, 1)}>Sell</Bar.Item>
            <Bar.Item onTap={this.toggleDrawer.bind(this, 2)}>Profile</Bar.Item>
          </Bar>}
        fullscreen>
        {this.props.child()}
      </View>
    );
  }
}));