topbar.js

topbar.js

import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';

import {
	StyleSheet,
	Text,
	View,
	TouchableOpacity,
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';

const CustomTabBar = createReactClass({
	tabIcons: [],

	propTypes: {
		goToPage: PropTypes.func,
		activeTab: PropTypes.number,
		tabs: PropTypes.array,
		KatName: PropTypes.string
	},

	componentDidMount() {
		this._listener = this.props.scrollValue.addListener(this.setAnimationValue);
	},

	setAnimationValue({ value, }) {
		this.tabIcons.forEach((icon, i) => {
			const progress = Math.min(1, Math.abs(value - i))
			icon.setNativeProps({
				style: {
					color: this.iconColor(progress),
				},
			});
		});
	},

	iconColor(progress) {
		const red = 59 + (204 - 59) * progress;
		const green = 89 + (204 - 89) * progress;
		const blue = 152 + (204 - 152) * progress;
		return `rgb(${red}, ${green}, ${blue})`;
	},

	render() {
		return <View style={[styles.tabs, this.props.style, ]}>
			{this.props.tabs.map((tab, i) => {
				return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
					<Icon
						name={tab}
						size={30}
						color={this.props.activeTab === i ? '#2c2c2c' : '#c1c1c1'}
						ref={(icon) => { this.tabIcons[i] = icon; }}
					/>
					<Text style={[styles.font]}>{this.props.KatName}</Text>;
				</TouchableOpacity>;
			})}
		</View>;
	},
});

const styles = StyleSheet.create({
	tab: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
		paddingBottom: 5
	},
	tabs: {
		height: 45,
		flexDirection: 'row',
		paddingTop: 5,
        borderTopColor: '#ddd',
        borderTopWidth: .5,
        backgroundColor: 'white'
	},
	font: {
		fontSize: 11,
		marginTop: -3
	}
});

export default CustomTabBar;