react-native-big-tab-bar/build/dist/BigTabBar.js

react native image / number tab bar

import React, { Component } from 'react';
import { Text, View, Image, TouchableOpacity, ScrollView, } from 'react-native';
/**
 * ? Local Imports
 */
import styles, { _buttonStyle, _innerContainerStyle, _textStyle, _innerTextStyle, } from './BigTabBar.style';
export default class BigTabBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: props.selectedItem || 0,
        };
    }
    handleOnPress = (item) => {
        const { onPress, onChange } = this.props;
        this.setState({ selected: item.id });
        onPress && onPress(item);
        onChange && onChange(item);
    };
    renderBottomTextContainer = (text, isActive) => {
        const { bottomTextStyle, inActiveTextColor = '#6e685f', activeTextColor = '#fff', } = this.props;
        return (<Text style={[
                _textStyle(inActiveTextColor, activeTextColor, isActive),
                bottomTextStyle,
            ]}>
        {text}
      </Text>);
    };
    renderContentContainer = (item, isActive) => {
        const { innerContainerHeight = 50, innerContainerWeight = 46, ImageComponent = Image, imageStyle, innerActiveTextColor = '#F5C812', innerInActiveTextColor = '#F5C812', inActiveBackgroundColor = '#faeed9', innerTextStyle, } = this.props;
        return (<View style={_innerContainerStyle(innerContainerHeight, innerContainerWeight, inActiveBackgroundColor)}>
        {item.image && ImageComponent ? (<ImageComponent source={item.image} style={styles.imageStyle || imageStyle}/>) : (item.innerText && (<Text style={[
                    _innerTextStyle(innerActiveTextColor, innerInActiveTextColor, isActive),
                    innerTextStyle,
                ]}>
              {item.innerText}
            </Text>))}
      </View>);
    };
    renderTabs = () => {
        const { tabs, inActiveBackgroundColor = '#faeed9', activeBackgroundColor = '#F5C812', itemStyle, height = 120, width = 72, } = this.props;
        return tabs.map((item) => {
            let isActive = false;
            if (item.id === this.state.selected) {
                isActive = !isActive;
            }
            return (<TouchableOpacity style={[
                    _buttonStyle(height, width, inActiveBackgroundColor, activeBackgroundColor, isActive),
                    itemStyle,
                ]} onPress={() => this.handleOnPress(item)}>
          {this.renderContentContainer(item, isActive)}
          {this.renderBottomTextContainer(item.bottomText, isActive)}
        </TouchableOpacity>);
        });
    };
    render() {
        return (<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
        {this.renderTabs()}
      </ScrollView>);
    }
}
//# sourceMappingURL=BigTabBar.js.map