react-native-community/react-native-tab-view error

recentes.screen.js

/* @flow */

import React, { Component } from 'react';
import {
  ActivityIndicator,
  Image,
  ScrollView, Picker,
  StyleSheet,
  Text,
  StatusBar,
  TouchableOpacity, ListView, Dimensions,
  View, TextInput, ToastAndroid,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { TabViewAnimated, TabBar } from 'react-native-tab-view';


import TarjaCard from '../components/tarjacard.component';

import PlatinumCard from '../components/platinum.component';


import Router from '../router';

const normalW = Dimensions.get('window').width;
const width = Dimensions.get('window').width/2-10;

export default class Recentes extends Component {

  static route = {
    navigationBar: {
      elevation: 0,
      backgroundColor: '#fff',
      tintColor: '#000',
      renderTitle: function(){
        return (
          <View style={{flex: 1, alignItems:'center', justifyContent:'center'}}>
            <Image
            style={{flex: 0, width: 81, marginLeft: -40, height: 33, resizeMode: 'stretch', }}
            source={require('../images/logo.png')}></Image>
          </View>
        )
      }
    }
  }
  constructor(props, ki){
      super(props, ki);


      this.router = {
        index: 0,
        routes: [
          { key: '1', title: 'Feed' },
          { key: '2', title: 'CATEGORIAS' },
        ]
      }

      this.url = "http://144.217.161.117:4000/api/oferta/";


       this.state  = {
            carregando: true,
            carregandoLoading: false,
            demandLoad: false,
            posts:  new ListView.DataSource({    rowHasChanged: (row1, row2) => row1.id !== row2.id }),


            pageNumber: 1,


            searchQuery: '',

            qtdade: 0,
            diaFilter: 'todos',
            precoFilter: '0',
            distFilter: '20000',


            index: 1,
            routes: [
              { key: '1', title: 'First' },
              { key: '2', title: 'Second' },
            ],
            loaded: true


      }

      this.showNews = this.showNews.bind(this);
      this.categories = this.categories.bind(this);
      this.pushToCategory = this.pushToCategory.bind(this);
      this._renderPost = this._renderPost.bind(this);
      this._renderFooter = this._renderFooter.bind(this);
      this._forwardPage = this._forwardPage.bind(this);
      this._backwardPage = this._backwardPage.bind(this);

      this._renderScene = this._renderScene.bind(this);
      this._renderHeader = this._renderHeader.bind(this);
      this._handleChangeTab = this._handleChangeTab.bind(this);
      this.searchQuery = this.searchQuery.bind(this);
      this.searchPage = this.searchPage.bind(this);
  }

  categories(){
    this.props.navigation.performAction(({ tabs, stacks }) => {
      tabs('main').jumpToTab('categories');
    });
  }

  showNews(data){
    this.props.navigation.getNavigator('initial').push(Router.getRoute('news', data));
  }

  pushToCategory(url){
    this.props.navigator.push(Router.getRoute('lista', {
      url,
      diaFilter: this.state.diaFilter,
      precoFilter: this.state.precoFilter,
      distFilter: this.state.distFilter ,
      initialPosition: this.props.route.params.initialPosition  
  }))
  }

   componentWillMount(){
      this.loadPosts();
   }

    async loadPosts(){

     await this.setState({
        carregando:true,
        carregandoLoading: true,
        posts: this.state.posts.cloneWithRows([]),
        qtdade: 0
     });

     fetch(this.url+this.state.pageNumber+`/${this.state.diaFilter}/${this.state.precoFilter}/${this.state.distFilter}/${this.props.route.params.initialPosition.latitude}/${this.props.route.params.initialPosition.longitude}`)
     .then( res  => res.json() )
     .then( data => {


        this.setState({
          carregandoLoading: false,
          posts: this.state.posts.cloneWithRows(data),
          qtdade: data.length,
          carregando: false });

     })

   }

   _backwardPage(){
     this.setState({pageNumber: --this.state.pageNumber});
     this.loadPosts();
   }

   _forwardPage(){
     this.setState({pageNumber: ++this.state.pageNumber});
     this.loadPosts();
   }

   _onRefresh(){
       this.setState({ count: 0 });
       ToastAndroid.show('As notícias foram atualizadas', ToastAndroid.SHORT);
       this.loadPosts();
   }

   _renderPost(post){ return <TarjaCard outerAction={this.showNews} input={post}></TarjaCard> }

   _renderFooter(){
     return (
          <View style={{flex: 0, marginVertical: 26, flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
              { this.state.qtdade >14 ? (
                   <TouchableOpacity onPress={this._backwardPage} >
              <View >
                    <Icon color="plus-circle" name="chevron-circle-left" size={43}></Icon>

              </View>
              </TouchableOpacity>

              ): null }

               <TouchableOpacity
                style={{marginLeft: 40}}
                  onPress={this._forwardPage}

                >
              <View >
                  <Icon color="tomato" name="chevron-circle-right" size={43}></Icon>
              </View>
              </TouchableOpacity>

          </View>
     )
   }

   _renderHeader(props) {
      return <TabBar
        style={{backgroundColor:'#000'}}
        {...props} />;
    }

  _handleChangeTab(index){
      this.setState({ index });
    }


  _renderScene({route}){
     switch(route.key){
       case '1':
         return (
           <ScrollView>
             <View style={{backgroundColor:'#f8f8f8',
                flexDirection:'row', flex: 0}}>
               <Picker
                 style={{flex: 0, width: normalW/3-30}}
                selectedValue={this.state.diaFilter}
                onValueChange={(diaFilter) => {
                  this.setState({diaFilter});
                  this.loadPosts();
                }}>
                <Picker.Item label="Hoje" value="hoje" />
                <Picker.Item label="Todos" value="todos" />
              </Picker>
               <Picker
                 style={{flex: 0, width: normalW/3+30}}
                selectedValue={this.state.precoFilter}
                onValueChange={(precoFilter) => {
                  this.setState({precoFilter});
                  this.loadPosts();
                }}>
                <Picker.Item label="Qualquer preço" value="0" />
                <Picker.Item label="Do menor para maior" value="1" />
                <Picker.Item label="Do maior preço para menor" value="-1" />
              </Picker>
               <Picker
                 style={{flex: 0, width: normalW/3}}
                selectedValue={this.state.distFilter}
                onValueChange={(distFilter) => {
                  this.setState({distFilter});
                  this.loadPosts();
                }}>
                <Picker.Item label="Até 5KM" value="5000" />
                <Picker.Item label="Até 20KM" value="20000" />
                <Picker.Item label="Até 40KM" value="40000" />
                <Picker.Item label="Até 60KM" value="60000" />
                <Picker.Item label="Até 80KM" value="80000" />
                <Picker.Item label="Até 120KM" value="120000" />
              </Picker>

            </View>
            {
              this.state.qtdade == 0 ? (
                <Text style={{alignSelf:'center', marginTop: 30,
                   fontWeight:'bold', fontSize: 23,
                   color: '#e8e8e8'}}>Nenhuma oferta encontrada</Text>
              ):(
                <ListView
                  enableEmptySections={true}
                 removeClippedSubviews={false}
                 dataSource={this.state.posts}
                 renderRow={this._renderPost}
                 renderFooter={this._renderFooter} >

                  </ListView>
              )
            }
         </ScrollView>
           )
       case '2':
          return (
            <ScrollView style={{flex: 1}}>
            <View style={{flex: 1, flexDirection:'row', flexWrap:'wrap'}}>

              <PlatinumCard  outerAction={this.pushToCategory}  icon="basket" title="Supermercados" slug="supermercados" width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="broom" title="Móveis e decoração" slug="moveis"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="gas-station" title="Combustíveis" slug="combustiveis"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="food" title="Alimentação" slug="alimentos"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="responsive" title="Eletrônicos" slug="eletronicos"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="format-paint" title="Construção" slug="construcao"  width={width}></PlatinumCard>
              <PlatinumCard outerAction={this.pushToCategory}   icon="laptop" title="Informática" slug="informatica"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="paw" title="Cuidados Pet" slug="cuidados_pet"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="emoticon-cool" title="Beleza E Estética" slug="beleza_estetica"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="human" title="Moda Masculina" slug="moda_masculina"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="human-female" title="Moda Feminina" slug="moda_feminina"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="human-child" title="Moda Infantil" slug="moda_infantil"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="human" title="Calçados Masculinos" slug="calcados_masculino"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="human-female" title="Calçados Femininos" slug="calcados_feminino"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="baby-buggy" title="Calçados Infantis" slug="calcados_infantis"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="dumbbell" title="Esporte, Fitness E Lazer" slug="esportes"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="store-24-hour" title="Conveniências" slug="conveniencias"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="gift" title="Artigos festas" slug="artigos"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="keg" title="Perfumes" slug="perfumes"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="diamond" title="Relógios e Jóias" slug="relogios"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="home-variant" title="Casa e decoração" slug="casa"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="power-plug" title="Eletrodomésticos" slug="eletro"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="microphone-variant" title="Locação para eventos" slug="eventos"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="hospital" title="Farmácias e drogarias" slug="farmacia"  width={width}></PlatinumCard>
              <PlatinumCard  outerAction={this.pushToCategory}  icon="beach" title="Hospedagem e turismo" slug="hospedagem"  width={width}></PlatinumCard>
          </View>
            </ScrollView>
          )
       default:
          return (<View><Text>teste</Text></View>)
     }
   }

   searchQuery(searchQuery){
     this.setState({searchQuery: searchQuery})
   }

   searchPage(){
     if (this.state.searchQuery == '')
        alert("Preencha algum dado para pesquisar")
     else if (this.state.searchQuery.length <= 3)
        alert("O texto deve ter mais que 3 caracteres")
     else{
       this.props.navigator.push('lista', {
         url: 'http://144.217.161.117:4000/api/oferta/search/'+this.state.searchQuery,
         diaFilter: this.state.diaFilter,
         precoFilter: this.state.precoFilter,
         distFilter: this.state.distFilter
       })}
   }

   onSelect(data) {
      alert(data);
    }
   render() {

    if (this.state.carregando){
      return(
           <View style={{flex: 1, backgroundColor:'#FFF', alignItems:'center', justifyContent:'center'}}>
            <StatusBar
              backgroundColor="#FFC300"
              barStyle="light-content"
            ></StatusBar>
            <ActivityIndicator style={{flex: 0}}
            size='large' color="#ccc">
            </ActivityIndicator>
          </View>
      )
    }else{
    return (
      <View style={{flex: 1, flexDirection:'column'}}>
         <StatusBar
              backgroundColor="#FFC300"
              barStyle="light-content"
            ></StatusBar>

            <View style={{flex: 0, flexDirection:'row', justifyContent:'space-between', paddingVertical: 20, backgroundColor: '#FFC300'}}>
                <TextInput style={{
                  flex: 1, backgroundColor: 'white',
                  marginLeft: 15, padding: 5,
                  fontSize: 12, borderRadius: 2,
                  paddingLeft: 20,
                  }}
                  underlineColorAndroid="transparent"
                  placeholder='Busque uma oferta'
                  placeholderTextColor='rgba(0,0,0,.38)'
                  onChangeText={this.searchQuery}
                  ></TextInput>
                <TouchableOpacity
                  onPress={this.searchPage}
                  style={{flex:0, paddingHorizontal: 10,
                    marginHorizontal: 10, borderWidth: 1, borderColor:'#FFF',
                     alignItems:'center', justifyContent:'center',
                     borderRadius: 4}}>
                  <View>
                    <Icon name="search" color={'#FFF'} size={20}></Icon>
                  </View>
                </TouchableOpacity>



            </View>



                 <TabViewAnimated
                 swipeEnabled={false}
                  style={styles.container}
                  navigationState={this.state}
                  renderScene={this._renderScene}
                  renderHeader={this._renderHeader}
                  onRequestChangeTab={this._handleChangeTab}
                />



           </View>
       )
    }


 } /* fim do render */


}



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