demo

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Animated, View, StyleSheet,Text,InteractionManager,ActivityIndicator} from 'react-native';
import { TabViewAnimated, TabBar } from 'react-native-tab-view';
import BasicListView from './BasicListView';
import AllPublicChat  from '../components/allPublicChat';
import _ from 'underscore';

import type { NavigationState } from 'react-native-tab-view/types';

type Route = {
  key: string,
  title: string,
};

type State = NavigationState<Route>;

class PublicChats extends PureComponent<void, *, State> {
  static title = 'Scroll views with lazy load';
  static backgroundColor = '#fff';
  static tintColor = '#222';
  static appbarElevation = 0;

  state: State = {
    index: 0,
    routes: [
      { key: '1', title: 'First' },
      { key: '2', title: 'Second' },
      { key: '3', title: 'Third' },
    ],
  };

  _first: Object;
  _second: Object;
  _third: Object;

  componentWillMount() {
      const routes = []
      const { sections } = this.props
      const { params } = this.props.navigation.state;
      const newIndex = _.findIndex(sections,{id:params.sectionId})
      sections.forEach((item,index) => {
          routes.push({
            title: item.title,
            key: index.toString(),
          });
      })
      this.setState({
        routes,
        index: parseInt(newIndex)
      });
  };

  _handleIndexChange = index => {
    this.setState({
      index,
    });
  };

  componentDidMount(){
      InteractionManager.runAfterInteractions(() => {
          this.setState({
              render:true
          });
    });
  }


  _handleTabItemPress = ({ route }) => {
    if (route !== this.state.routes[this.state.index]) {
      return;
    }
    switch (route.key) {
      case '1':
        if (this._first) {
          this._first.scrollTo({ y: 0 });
        }
        break;
      case '2':
        if (this._second) {
          this._second.scrollTo({ y: 0 });
        }
        break;
      case '3':
        if (this._third) {
          this._third.scrollTo({ y: 0 });
        }
        break;
    }
  };

  _renderLabel = props => ({ route, index }) => {
    const inputRange = props.navigationState.routes.map((x, i) => i);
    const outputRange = inputRange.map(
      inputIndex => (inputIndex === index ? '#857ad7' : '#222')
    );
    const color = props.position.interpolate({
      inputRange,
      outputRange,
    });
    return (
      <Animated.Text style={[styles.label, { color }]}>
        {route.title}
      </Animated.Text>
    );
  };

  _renderHeader = props => {
    return (
      <TabBar
        {...props}
        pressColor="#857ad7"
        onTabPress={this._handleTabItemPress}
        renderLabel={this._renderLabel(props)}
        indicatorStyle={styles.indicator}
        tabStyle={styles.tab}
        style={styles.tabbar}
        scrollEnabled={true}
      />
    );
  };

  _renderScene = ({ route }) => {
      const { sections } = this.props;
      console.log(route.key)
      if (Math.abs(this.state.index - this.state.routes.indexOf(route)) > 2) {
          return null;
      }
      return (
        <View style={{flex: 1}}>
            <AllPublicChat sectionId={sections[route.key].id}/>
        </View>
      );
  };


  render() {
     if(this.state.render){
         return (
           <TabViewAnimated
             style={[styles.container, this.props.style]}
             navigationState={this.state}
             renderScene={this._renderScene}
             renderHeader={this._renderHeader}
             onIndexChange={this._handleIndexChange}

           />
         );
     }else{
         return(
             <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                 <ActivityIndicator size='large'/>
             </View>
         )
     }

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  indicator: {
    backgroundColor: '#857ad7',
  },
  label: {
    fontSize: 13,
    fontWeight: 'bold',
    margin: 8,
  },
  tabbar: {
    backgroundColor: '#fff',
  },
  tab: {
    opacity: 1,
    width: 90,
  },
  page: {
    backgroundColor: '#f9f9f9',
  },
});

const mapStateToProps = (state) => {
    return {
        sections:_.values(state.sections.list),
    }
}

export default connect(mapStateToProps)(PublicChats)