Updated README

mjsolidarios · Oct 25, 2017 · b9cd266 · b9cd266
1 parent 134edfc
commit b9cd266
Showing 1 changed file with 27 additions and 17 deletions.
diff --git 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
   }
 });
 ```