router issue in reactNative

event-detail.js

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

export default class EventDetail extends Component {
    render() {
        return (
            <View>
                <Text>EventDetail</Text>
            </View>
        );
    }
}

event-list-item.js

import styles from '../stylesheets/app';
import React, { PropTypes } from 'react';
import
    {
        View,
        Image,
        TouchableHighlight,
        Text, Component,
    } from 'react-native';

const propTypes = {
    showEvent: PropTypes.func.isRequired,
    text: PropTypes.string,
    user: PropTypes.object,
};

class EventListItem extends Component {
    constructor(props) {
        super(props);
        this.showEvent = this.showEvent.bind(this);
    }
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.length !== this.props.length;
    }

    showEvent() {
        this.props.showEvent(this.props);
    }
    render() {
        return (
            <View style={styles.wrapper}>
                <TouchableHighlight underlayColor = "#ccc"
                    onPress = {this.showEvent}
                >
                    <View></View>
                </TouchableHighlight>
            </View>
        )
    }
}

EventListItem.propTypes = propTypes;


export default EventListItem;

event.js

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

import styles from '../stylesheets/app';
import EventListItem from './events-list-item';
import EventDetail from './event-detail';

const propTypes = {
    toRoute: PropTypes.func.isRequired,
};

class Events extends Component {
    constructor(props) {
        super(props);
        this.state = {
            events: [],
        };
        this.showEvent = this.showEvent.bind(this);
    }

    componentDidMount() {
    }

    showEvent() {
        this.props.toRoute({
          name: 'Event',
          component: EventDetail
        });
    }

    render() {
        return (
            <ScrollView
                style={styles.scrollView}
                contentContainerStyle={styles.contentContainer}
                automaticallyAdjustContentInsets={true}
            >
                {
                  this.state.events.map(function(event){
                      return (
                          <EventListItem {...event} key={event.id} showEvent= {this.showEvent} />
                    )
                  })
                }
             </ScrollView>
        );
    }
}
Events.propTypes = propTypes;

export default Events;

index.js

const Icon = require('react-native-vector-icons/Octicons');
import Router from 'react-native-simple-router';
import Home from './app/components/home';
import Events from './app/components/events';
import Search from './app/components/search';
import store from './app/store';
import React, { Component } from 'react';
import styles from './app/stylesheets/app';
const I18n = require('react-native-i18n');

import {
    AppRegistry,
    TabBarIOS,
} from 'react-native';

const homeRoute = {
    name: 'Home',
    component: Home,
};
const eventsRoute = {
    name: 'Events',
    component: Events,
};
const searchRoute = {
    name: 'Search',
    component: Search,
};

class ReduxApp extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = store.getState();
        store.subscribe(() => {
            this.setState(store.getState());
        });
    }
    selectTab(tabName) {
        store.dispatch({
            type: 'SELECTED_TAB',
            selectedTab: tabName
        });
    }

    render() {
        return (
        <TabBarIOS
            barTintColor = "#779cc9"
            tintColor = "white"
        >
            <Icon.TabBarItem
                title = {I18n.t('home')}
                iconName= {'globe'}
                selected = {
                    this.state.selectedTab === 'homeTab'
                }
                onPress = {
                    () => {
                        this.selectTab('homeTab');
                    }
                }

            >
                <Router
                    firstRoute = {homeRoute}
                    headerStyle = {styles.header}
                />
            </Icon.TabBarItem>
            <Icon.TabBarItem
                title = "Events"
                iconName= {'calendar'}
                selected = {
                    this.state.selectedTab === 'eventsTab'
                }
                onPress = {
                    () => {
                        this.selectTab('eventsTab');
                    }
                }

            >
            <Router
                firstRoute = {eventsRoute}
                headerStyle = {styles.header}
            />

            </Icon.TabBarItem>
            <Icon.TabBarItem
                title = "Search"
                iconName= {'search'}
                selected = {
                    this.state.selectedTab === 'searchTab'
                }
                onPress = {
                    () => {
                        this.selectTab('searchTab');
                    }
                }

            >
            <Router
                firstRoute = {searchRoute}
                headerStyle = {styles.header}
            />

            </Icon.TabBarItem>
        < /TabBarIOS>
    );
  }
}
I18n.fallbacks = true;

I18n.translations = {
  en: {
    home: 'Home'
  },
  fr: {
    home: 'Accueil'
  }
};

AppRegistry.registerComponent('ReduxApp', () => ReduxApp);