diff --git a/README.md b/README.md index b56d35c..bc6a039 100644 --- a/README.md +++ b/README.md @@ -14,14 +14,14 @@ React Native search component with filter function. Complete example available [here](/example). ```js -import React from 'react' -import { StyleSheet, Text, View, ScrollView } from 'react-native' -import SearchInput, { createFilter } from 'react-native-search-filter' -import emails from './mails' -const KEYS_TO_FILTERS = ['user.name', 'subject'] - -export default class App extends React.Component { - constructor(props) { +import React, { Component } from 'react'; +import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native'; +import SearchInput, { createFilter } from 'react-native-search-filter'; +import emails from './mails'; +const KEYS_TO_FILTERS = ['user.name', 'subject']; + +export default class App extends Component<{}> { + constructor(props) { super(props); this.state = { searchTerm: '' @@ -34,14 +34,20 @@ export default class App extends React.Component { const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS)) return ( <View style={styles.container}> - <SearchInput onChangeText={(term) => { this.searchUpdated(term) }} /> + <SearchInput + onChangeText={(term) => { this.searchUpdated(term) }} + style={styles.searchInput} + placeholder="Type a message to search" + /> <ScrollView> {filteredEmails.map(email => { return ( - <View key={email.id} style={styles.emailItem}> - <Text>{email.user.name}</Text> - <Text style={styles.emailSubject}>{email.subject}</Text> - </View> + <TouchableOpacity onPress={()=>alert(email.user.name)} key={email.id} style={styles.emailItem}> + <View> + <Text>{email.user.name}</Text> + <Text style={styles.emailSubject}>{email.subject}</Text> + </View> + </TouchableOpacity> ) })} </ScrollView> @@ -54,16 +60,20 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', - justifyContent: 'flex-start', - margin: 10, - marginTop: 50 + justifyContent: 'flex-start' }, emailItem:{ borderBottomWidth: 0.5, - borderColor: 'rgba(0,0,0,0.3)' + borderColor: 'rgba(0,0,0,0.3)', + padding: 10 }, emailSubject: { color: 'rgba(0,0,0,0.5)' + }, + searchInput:{ + padding: 10, + borderColor: '#CCC', + borderWidth: 1 } }); ```