EventPage

import React, { Component } from "react";
import { View, Text, SwipeableFlatlist, ActivityIndicator, TouchableHighligt, Alert } from "react-native";
import { Header, Left, Button, Body, Icon, Title, Right } from 'native-base';
import { List, ListItem } from 'react-native-elements';

class EventPage extends Component  {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const { page, seed } = this.state;
    const url = 'http://192.168.1.11/db/api/index.php/getEvent?seed=${seed}&page=${page}&results=5';
    this.setState({ loading: true });
    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: page === 1 ? res.results : [...this.state.data, ...res.results],
          error: res.error || null,
          loading: false,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

    handleRefresh = () => {
    this.setState(
      {
        page: 1,
        seed: this.state.seed + 1,
        refreshing: true
      },
      () => {
        this.makeRemoteRequest();
      }
    );
  };

    handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1
      },
      () => {
        this.makeRemoteRequest();
      }
    );
  };


    renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };

  renderHeader = () => {
    return (
      <Header >
        <Left>
          <Button transparent onPress={() => this.props.navigation.goBack()}>
            <Icon name="arrow-back" />
            </Button>
          </Left>
          <Body>
            <Title>Event</Title>
          </Body>
          <Right />
            <Button transparent onPress={() => this.props.navigation.navigate("EventAdd")}>
              <Icon name="ios-add-circle" />
            </Button>
        </Header>
      );
    };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };


  render() {
    const { navigate } = this.props.navigation;
    return (
      <View
      containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0, backgroundColor: '#fff' }} >
      <SwipeableFlatlist
      bounceFirstRowOnMount
      MaxSwipeDistance={160}
      renderQuickActions={this._renderQuickActions.bind(this)}
        data={this.state.data}
        renderItem={({ item }) => (
          <ListItems
            onPress={() => navigate('EventDetail', '${item.event_id}')}
            roundAvatar
            title={item.event_name}
            subtitle={item.event_desc}
            avatar={{ uri: 'data:image/png;base64,'+item.imageB64 }}
            containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}
          />
        )}
        keyExtractor={item => item.event_id}
        ItemSeparatorComponent={this.renderSeparator}
        ListHeaderComponent={this.renderHeader}
        ListFooterComponent={this.renderFooter}
        refreshing={this.state.refreshing}
        onRefresh={this.handleRefresh}
      />
      </View>
    );
  }
}

export default EventPage;