tabview

JavaScript

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { TabViewAnimated, TabBarTop } from 'react-native-tab-view';
import PolicyListTabContainer from './PolicyListTabContainer';

//@todo add auto bind
  export default class TabViewExample extends Component {
    state = {
      index: 0,
      routes: [
        { key: '1', title: 'Active',url:"https://www.coverhero.com.au/api/index.json" },
        { key: '2', title: 'Inactive',url:"https://www.coverhero.com.au/api/index.json" },
        { key: '3', title: 'Pending',url:"https://www.coverhero.com.au/api/index.json" },
      ],
    };

    handleChangeTab = (index) => {
      this.setState({ index })
    }

    renderHeader = props => (
      <TabBarTop
        {...props}
        indicatorStyle={styles.indicator}
        style={styles.tabbar}
        tabWidth={10}
        renderLabel={this.renderLabel}
      />
    )

    renderLabel = ({ route, index }) => (
      <Text
        accessible
        accessibilityLabel={`headerTab_${index}`}
        style={[styles.label]}>
        {route.title.toUpperCase()}
      </Text>
    )

    renderScene = ({ route }) => {
      switch (route.key) {
      case '1':
        return <PolicyListTabContainer isActive={this.isTabActive(route)} fetchUrl={route.url} />;
      case '2':
        return <PolicyListTabContainer isActive={this.isTabActive(route)}  fetchUrl={route.url} />;
      case '3':
        return <PolicyListTabContainer isActive={this.isTabActive(route)}  fetchUrl={route.url} />;
      default:
        return null;
      }
    };

    isTabActive(route)
    {

      //tab index is 0 based
      return parseInt(route.key) == (this.state.index+1);
    }

    render() {
      return (
        <View style={styles.container}>
          <View style={styles.statusbar} />
          <TabViewAnimated
            style={styles.tabsContainer}
            navigationState={this.state}
            renderScene={this.renderScene}
    ...