import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';
const styles = StyleSheet.create({
    tabContainer: {
        flexDirection: 'row'
    },
    tabTouchableOpacity: {
        flex: 1
    }
});
export class TabbedContainer extends Component {
    constructor(props) {
        super(props);
        this.selectTab = (index) => () => {
            this.setState({
                selectedIndex: index
            });
        };
        this.state = {
            selectedIndex: this.props.initialIndex || 0
        };
    }
    renderTabs() {
        return (<View style={[styles.tabContainer, this.props.tabContainerStyle]}>
        {this.props.tabs.map((tab, index) => {
            const tabToUse = this.state.selectedIndex === index ? tab.activeTab : tab.tab;
            return (<TouchableOpacity onPress={this.selectTab(index)} style={[styles.tabTouchableOpacity, this.props.tabTouchableStyle]} key={index}>
              {tabToUse}
            </TouchableOpacity>);
        })}
      </View>);
    }
    render() {
        return (<View style={this.props.style}>
        {this.renderTabs()}
        {this.props.tabs[this.state.selectedIndex].renderContent()}
      </View>);
    }
}
//# sourceMappingURL=TabbedContainer.js.map