var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        if (index >= 0) {
            return (
                <View style={styles.navContainer}>
                    <TouchableHighlight
                        underlayColor="transparent"
                        onPress={() => { if (index > 0) { navigator.pop() } }}>
                        <Text style={ styles.leftNavButton }>
                            <Icon name="arrow-left" size={25} color="#900" />
                        </Text>
                    </TouchableHighlight>
                </View>
            )
        }
        else { return null }
    },
    RightButton(route, navigator, index, navState) {
        if (route.onPress) {
            return (
                <View style={styles.navContainer}>
                    <TouchableHighlight
                        underlayColor="transparent"
                         onPress={ () => route.onPress() }>
                         <Text style={ styles.rightNavButton }>
                            { route.rightText || <Icon name="arrow-right" size={25} color="#900" /> }
                         </Text>
                    </TouchableHighlight>
                </View>
            )
        }
        else { return null }
    },
    Title(route, navigator, index, navState) {
        return (
            <View style={styles.navContainer}>
                <Text style={ styles.title }>{route.title}</Text>
            </View>
        )
    }
};

// Main component description
class App extends Component {

// not important stuff here

    render() {
        return (
            <Provider store={store}>
                <Navigator
                    configureScene={this.configureScene}
                    initialRoute={{ component: Index, title: 'HOME', display: true}}
                    renderScene={ this.renderScene }
                    style={{backgroundColor: '#FFD800'}}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={ styles.navigator }
                            routeMapper={ NavigationBarRouteMapper }
                        />
                    }

                />
            </Provider>
        )
    }
}

var styles = StyleSheet.create({
    navigator: {
        flex: 1,
        backgroundColor: '#FFD800',
        justifyContent: 'center',
        alignItems: 'center',
//      height: 64,
    },
    navContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: 'red',
    },
    title: {
        alignItems: 'center',
    },
    leftNavButton: {
        marginLeft: 12,
    },
    rightNavButton: {
        marginRight: 12,
    },
});