filter.js

import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  FlatList
} from 'react-native'
import { graphql } from 'react-apollo'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { Header, Loading, Separator } from '../common'

import GET_STUDIO_MASTERS_QUERY from '../graphql/queries/master/getStudioMasters'
import MASTER_ADDED_SUBSCRIPTION from '../graphql/subscriptions/master/masterAdded'
import MASTER_UPDATED_SUBSCRIPTION from '../graphql/subscriptions/master/masterUpdated'
import MASTER_DELETED_SUBSCRIPTION from '../graphql/subscriptions/master/masterDeleted'

import SearchInput, { createFilter } from 'react-native-search-filter'
import items from './mails'

const KEYS_TO_FILTERS = ['user.name', 'profession']

class ExploreScreen extends Component<{}> {
  constructor(props) {
    super(props)
    this.state = {
      searchTerm: '',
      items
    }
  }

  searchUpdated(term) {
    this.setState({ searchTerm: term })
  }

  render() {
    const filteredEmails = this.props.data.getStudioMasters.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
    console.log('data', this.props.data.getStudioMasters)
    console.log('filteredEmails', filteredEmails)

    return (
      <View style={styles.container}>
        <SearchInput 
          onChangeText={(term) => { this.searchUpdated(term) }} 
          style={styles.searchInput}
          placeholder="Type a message to search"
        />
        <ScrollView>
          {filteredEmails.map(item => {
            return (
              <TouchableOpacity onPress={ () =>alert(item.user.name)} key={item._id} style={styles.itemItem}>
                <View>
                  <Text>{item.user.name}</Text>
                  <Text style={styles.itemSubject}>{item.profession}</Text>
                </View>
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'flex-start'
  },
  itemItem:{
    borderBottomWidth: 0.5,
    borderColor: 'rgba(0,0,0,0.3)',
    padding: 10
  },
  itemSubject: {
    color: 'rgba(0,0,0,0.5)'
  },
  searchInput:{
    padding: 10,
    borderColor: '#CCC',
    borderWidth: 1
  }
})

export default graphql(GET_STUDIO_MASTERS_QUERY)(ExploreScreen)