My code

gistfile1.txt

-------------- REDUCER -----------------------
import { RESPONSE_ADMIN_ATTACHED_FACILITIES, ERROR, RESET_DATA } from '../actions/pickFacility';

const initialState = {
  isLoading: true,
  msg: null,
  attachedFacilities: [],
};

export default (state = initialState, action) => {
  switch (action.type) {
    case RESPONSE_ADMIN_ATTACHED_FACILITIES:
      return {
        ...state,
        attachedFacilities: action.attachedFacilities,
        msg: false,
        isLoading: false,
      };
    case RESET_DATA:
      return {
        ...state,
        isLoading: true,

        msg: false,
      };
    case ERROR:
      return {
        ...state,
        msg: true,
        attachedFacilities: [],
        isLoading: false,
      };

    default: {
      return state;
    }
  }
};
-------------- ACTION -----------------------

export const RESPONSE_ADMIN_ATTACHED_FACILITIES = 'RESPONSE_ADMIN_ATTACHED_FACILITIES';
export const ERROR = 'ERROR';
export const REQUEST_ATTACHED_FACILITIES = 'REQUEST_ATTACHED_FACILITIES';
export const RESET_DATA = 'RESET_DATA';

export const responseAdminAttachedFacilities = data => ({
  type: RESPONSE_ADMIN_ATTACHED_FACILITIES,
  attachedFacilities: data.attachedFacilities,
});

export const errorFetchFacilties = () => ({
  type: ERROR,
});

export const requestAttachedFacilities = () => ({
  type: REQUEST_ATTACHED_FACILITIES,
});

export const resetData = () => ({
  type: RESET_DATA,
});

-------------- SAGA -----------------------
import { call, put, select, take, fork, all, takeLatest, takeEvery } from 'redux-saga/effects';
import axios from 'axios';
import querystring from 'query-string';
import Config from 'react-native-config';

import {
  REQUEST_ATTACHED_FACILITIES,
  responseAdminAttachedFacilities,
  errorFetchFacilties,
  RESET_DATA,
} from '../../../actions/pickFacility';

import endpoints from '../../endpoints/endpoints';

const fetchData = url => axios.get(url);

function* requestAdminAttachedFacility() {
  const token = yield select(state => state.login.token);
  let URL = Config.BASE_URL + endpoints.ATTACHED_FACITIES;
  URL += `${token}/format/json`;
  try {
    put({ type: RESET_DATA });
    const response = yield call(fetchData, URL);
    console.log('after the  response ');
    const result = yield response;
    if (result.data.data !== undefined) {
      yield put(responseAdminAttachedFacilities({
        attachedFacilities: result.data.data,
      }));
    } else {
      yield put(errorFetchFacilties());
    }

    // console.log(data);
  } catch (error) {
    console.log('i am here');
    yield put(errorFetchFacilties());
  }
}

export default function* pickFacilitySaga() {
  yield takeLatest(REQUEST_ATTACHED_FACILITIES, requestAdminAttachedFacility);
}


-------------------- COMPONENT ------------------
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, View, FlatList } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { List, ListItem, SearchBar } from 'react-native-elements';
import { Container, Content, Text, Button, Label } from 'native-base';
import Spinner from 'react-native-loading-spinner-overlay';

import { requestAttachedFacilities } from '../actions/pickFacility';

class PickFacility extends Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    title: 'Home',
    drawerIcon: () => <Icon name="ios-home" />,
  };
  static propTypes = {
    navigation: PropTypes.object,
    dispatch: PropTypes.func,
    PickFacility: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: true,
    };
  }
  componentDidMount() {
    console.log('Component did mount');
    this.props.dispatch(requestAttachedFacilities());
    this.SettingState();
  }

  SettingState = () => {
    this.setState({
      data: this.props.PickFacility.attachedFacilities,
    });
  };
  handleRetry = () => {
    this.props.dispatch(requestAttachedFacilities());
    // requestAttachedEntitiesStarted
  };
  compo;
  renderHeader = () => <SearchBar placeholder="Search Facility" lightTheme round />;
  renderSeparator = () => (
    <View
      style={{
        height: 1,
        width: '86%',
        backgroundColor: '#CED0CE',
        marginLeft: '14%',
      }}
    />
  );
  render() {
    if (this.props.PickFacility.attachedFacilities.length > 0) {
      return (
        <Container style={styles.container}>
          <Content>
            <Spinner
              visible={this.props.PickFacility.isLoading}
              textContent="Loading"
              textStyle={{ color: '#FFF' }}
            />
            <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
              <FlatList
                data={this.props.PickFacility}
                ItemSeparatorComponent={this.renderSeparator}
                ListHeaderComponent={this.renderHeader}
                renderItem={({ item }) => (
                  <ListItem title={`${item.name}`} containerStyle={{ borderBottomWidth: 0 }} />
                )}
                keyExtractor={item => item.id}
              />
            </List>
          </Content>
        </Container>
      );
    }

    return (
      <Container style={styles.container}>
        <Content>
          <Spinner
            visible={this.props.PickFacility.isLoading}
            textContent="Loading"
            textStyle={{ color: '#FFF' }}
          />
          <View
            style={{
              flex: 1,
              alignSelf: 'center',

              marginTop: '50%',
            }}
          >
            <Icon name="exclamation-triangle" color="#C0C0C0" size={30} style={styles.iconStyle} />
            <Label style={styles.securetext}>Network Connectivity Error</Label>
            <Button style={styles.button} onPress={this.handleRetry}>
              <Label style={styles.buttonLabel}>RETRY</Label>
            </Button>
          </View>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // backgroundColor: 'yellow',
  },
  boxContainer: {
    flex: 1, // 1:3
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'stretch',
  },
  boxZero: {
    flex: 1, // 3:6
    // backgroundColor: '#EF4F43',
    marginTop: '20%',
  },
  boxOne: {
    flex: 2, // 3:6,
    // backgroundColor: '#888888',
  },
  boxTwo: {
    flex: 1, // 1:6
    // backgroundColor: '#F17F42',
  },
  boxThree: {
    flex: 1, // 2:6
    alignItems: 'center',
    // backgroundColor: '#CE6D39',
    marginBottom: '10%',
  },
  header: {
    backgroundColor: '#769654',
  },
  button: {
    alignSelf: 'center',
    margin: '5%',
    padding: '10%',
    backgroundColor: '#769654',
  },
  text: {
    alignSelf: 'center',
  },
  securetext: {
    alignSelf: 'center',
    fontSize: 20,
    color: '#C0C0C0',
  },
  copyrightText: {
    alignSelf: 'center',
    fontSize: 10,
  },
  buttonLabel: {
    color: '#FFF',
  },
  versionrelease: {
    fontSize: 10,
    alignSelf: 'center',
  },
  iconStyle: {
    alignSelf: 'center',
  },
});
const mapStateToProps = state => ({ PickFacility: state.pickFacility });
export default connect(mapStateToProps)(PickFacility);