Look for headerWithSearchText,fliterList() and render method

component.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, View, FlatList, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Container, Content, Text, Button, Label, Header, Item, Input } from 'native-base';
import Spinner from 'react-native-loading-spinner-overlay';

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

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

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      noData: false,
    };
  }
  componentDidMount() {
    this.props.dispatch(requestAttachedFacilities());
  }

  getItemLayout = (data, index) => ({ length: 50, offset: 50 * index, index });
  listItemClick = (e) => {
    console.log(e);
  };
  handleRetry = () => {
    this.props.dispatch(requestAttachedFacilities());
  };

  fliterList = (e) => {
    const text = e.toLowerCase();
    const trucks = this.state.data;

    const filteredName = trucks.filter(item => item.name.toLowerCase().match(text));

    if (!text || text === '') {
      this.setState({
        data: this.props.PickFacility.attachedFacilities,
      });
    } else if (!Array.isArray(filteredName) && !filteredName.length) {
      // set no data flag to true so as to render flatlist conditionally
      this.setState({
        noData: true,
      });
    } else if (Array.isArray(filteredName)) {
      this.setState({
        noData: true,
        data: filteredName,
      });
    }
  };

  headerWithSearchText = () => (
    <TextInput
      style={styles.TextInputStyleClass}
      onChangeText={text => this.fliterList(text)}
      value={this.state.text}
      underlineColorAndroid="transparent"
      placeholder="Search Facility"
    />
  );
  headerWithSearch = () => (
    <Header searchBar rounded style={styles.headerStyle}>
      <Item style={styles.SearchItem}>
        <Icon name="search" />
        <Input placeholder="Search Facility" onChangeText={this.fliterList} />
      </Item>
    </Header>
  );
  spinnerView = () => <Spinner visible textContent="Loading" textStyle={{ color: '#FFF' }} />;

  listView = () => (
    <FlatList
      style={{ flex: 1 }}
      data={this.state.noData ? this.state.data : this.props.PickFacility.attachedFacilities}
      keyExtractor={item => item.id}
      getItemLayout={this.getItemLayout}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.headerWithSearchText}
      renderItem={({ item }) => (
        <View style={styles.faltListView}>
          <Text style={styles.listtext}>{item.name}</Text>
        </View>
      )}
    />
  );

  networkErrorView = () => (
    <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>
  );

  renderHeader = () => (
    <View searchBar rounded style={styles.headerStyle}>
      <Item style={{ flex: 1 }}>
        <Icon name="search" />
        <Input placeholder="Search" onChangeText={this.fliterList} />
      </Item>
    </View>
  );

  renderSeparator = () => (
    <View
      style={{
        height: 1,
        width: '100%',
        backgroundColor: '#CED0CE',
      }}
    />
  );
  render() {
    if (this.props.PickFacility.attachedFacilities.length > 0) {
      return (
        <Container style={styles.container}>
          <Content>{this.listView()}</Content>
        </Container>
      );
    } else if (this.props.PickFacility.msg) {
      return (
        <Container style={styles.container}>
          <Content>
            {this.spinnerView()}
            {this.networkErrorView()}
          </Content>
        </Container>
      );
    }
    return null;
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
    margin: 5,
    backgroundColor: '#FFF',
  },

  header: {
    backgroundColor: '#769654',
  },
  button: {
    alignSelf: 'center',
    margin: '5%',
    padding: '10%',
    backgroundColor: '#769654',
  },
  text: {
    alignSelf: 'center',
  },
  securetext: {
    alignSelf: 'center',
    fontSize: 20,
    color: '#C0C0C0',
  },

  buttonLabel: {
    color: '#FFF',
  },

  iconStyle: {
    alignSelf: 'center',
  },

  listtext: {
    fontSize: 12,
  },
  faltListView: {
    backgroundColor: '#FFF',
    padding: 10,

    height: 38,
  },
  headerStyle: {
    marginRight: 10,
    marginLeft: 10,
    display: 'flex',
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#FFF',
  },
  SearchItem: {
    borderRadius: 10,
    backgroundColor: 'white',
    height: '80%',
    paddingLeft: 15,
    marginBottom: 10,
  },

  TextInputStyleClass: {
    textAlign: 'center',
    height: 40,
    borderWidth: 1,
    borderColor: '#009688',
    borderRadius: 7,
    backgroundColor: '#FFFFFF',
  },
});
const mapStateToProps = state => ({ PickFacility: state.pickFacility });
export default connect(mapStateToProps)(PickFacility);