ComB.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { StyleSheet, View, FlatList, TextInput, TouchableHighlight } from 'react-native';
import { Container, Content, Text, Button, Label, Item, Input, Icon } from 'native-base';
import { IntellicentricsThumbnail } from '../components/Logo';
import { resetData } from '../actions/searchReps';

class RepsList extends React.PureComponent {
  static navigationOptions = {
    title: 'REP List',

    gesturesEnabled: false,
    headerStyle: { backgroundColor: '#769654' },
    headerTintColor: 'white',
    headerLeft: (
      <Button
        transparent
        onPress={() => {
          console.log(this.props.dispatch);
          this.props.navigation.goBack();
        }}
      >
        <Icon name="ios-arrow-back" color="#FFF" />
      </Button>
    ),
    headerRight: <IntellicentricsThumbnail />,
  };

  static propTypes = {
    navigation: PropTypes.object,
    repsFound: PropTypes.array,
    dispatch: PropTypes.func,
  };

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

  getItemLayout = (data, index) => ({ length: 50, offset: 50 * index, index });

  resetTheData = () => {
    this.props.dispatch(resetData());
  };
  fliterList = (e) => {
    const text = e.toLowerCase();
    const reps = this.props.repsFound;

    const filteredName = reps.filter(item => item.user_fullname.toLowerCase().match(text));

    if (!text || text === '') {
      this.setState({
        data: this.props.repsFound,
      });
    } else if (!Array.isArray(filteredName) && !filteredName.length) {
      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 Reps by Name"
    />
  );
  listItemClick = (data) => {
    alert('rep details');
    console.log(data);
  };

  listView = () => (
    <FlatList
      style={{ flex: 1 }}
      data={this.state.noData ? this.state.data : this.props.repsFound}
      keyExtractor={item => item.user_id}
      getItemLayout={this.getItemLayout}
      ItemSeparatorComponent={this.renderSeparator}
      renderItem={({ item }) => (
        <TouchableHighlight
          onPress={() => this.listItemClick(item)}
          style={{ backgroundColor: 'red' }}
        >
          <View style={styles.faltListView}>
            <Text style={styles.namelisttext}>{item.user_fullname}</Text>
            <Text style={styles.listtext}>{item.company_name}</Text>
            <Text style={styles.listtext}>{item.user_id}</Text>
          </View>
        </TouchableHighlight>
      )}
    />
  );

  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() {
    return (
      <Container style={styles.container}>
        {this.headerWithSearchText()}
        <Content>{this.listView()}</Content>
      </Container>
    );
  }
}

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,
  },
  namelisttext: {
    fontSize: 15,
  },
  faltListView: {
    backgroundColor: '#FFF',
    padding: 10,

    height: 60,
  },
  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 => ({
  repsFound: state.searchReps.repsFound,
});
export default connect(mapStateToProps)(RepsList);