import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import RNAnimatedTabs from 'rn-animated-tabs';
const DATA = ['Top Tab 1 Content', 'Extra Stuff for Top Tab 2', 'More stuff for Top Tab 3'];

export default class TabTop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentTab: 0
    }
  }

  handleTabChange = (value) => this.setState({ currentTab: value });

  render() {
    return (
	  <View style={styles.container}>
	    <RNAnimatedTabs
	      tabTitles={['Top Tab 1', 'Top Tab 2', 'Top Tab 3']}
	      onChangeTab={this.handleTabChange} />
	     <View style={[styles.container, styles.center]}>
	       <Text>
	         {DATA[this.state.currentTab]}
	       </Text>
	     </View>
     </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});