SHARE
TWEET

Untitled

a guest Oct 18th, 2019 95 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { ScrollView, StyleSheet, View, Text, PermissionsAndroid, FlatList, TouchableOpacity } from 'react-native';
  3. import Contacts from 'react-native-contacts';
  4. import { Card, SearchBar } from 'react-native-elements';
  5.  
  6.  
  7.  
  8. export default class App extends Component {
  9.  
  10.   state = {
  11.     contacts: [],
  12.     alphabet: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]
  13.  
  14.  
  15.  
  16.  
  17.  
  18.   }
  19.  
  20.   componentDidMount() {
  21.     if (Platform.OS === 'android') {
  22.       PermissionsAndroid.request(
  23.         PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
  24.         {
  25.           title: 'Contacts',
  26.           message: ' This app would like to see your contacts'
  27.         }
  28.       ).then(() => {
  29.         this.getList();
  30.       })
  31.     } else if (Platform.OS === 'ios') {
  32.       this.getList();
  33.     }
  34.   }
  35.  
  36.   getList = () => {
  37.     Contacts.getAll((err, contacts) => {
  38.       if (err === 'denied') {
  39.         console.log("cannot access");
  40.       } else {
  41.         this.setState({ contacts });
  42.         this.setState({ inMemoryContacts: contacts })
  43.         console.log(contacts)
  44.  
  45.       }
  46.     })
  47.   }
  48.  
  49.   renderItem = ({ item }) => (
  50.     <Card>
  51.       <View style={styles.itemContainer} >
  52.         <Text style={styles.contactName}>
  53.  
  54.           Name: {`${item.givenName} `} {item.familyName}
  55.         </Text>
  56.         {item.phoneNumbers.map(phone => (
  57.           <Text key={item.recordID} style={styles.phones}>{phone.label} : {phone.number}</Text>
  58.         ))}
  59.       </View>
  60.     </Card>
  61.   )
  62.  
  63.  
  64.   searchContacts = (value) => {
  65.     const filterContacts = this.state.inMemoryContacts.filter(
  66.       contact => {
  67.         let contactLowerCase = (contact.givenName + ' ' + contact.familyName).toLowerCase()
  68.         let searchTermLowerCase = value.toLowerCase()
  69.  
  70.         return contactLowerCase.indexOf(searchTermLowerCase) > -1
  71.       }
  72.     )
  73.     this.setState({ contacts: filterContacts })
  74.   }
  75.  
  76.   scrollToitem = (number) => {
  77.     randomIndex = number
  78.     this.flatListRef.scrollToIndex({ animated: true, index: "" + randomIndex, offset: 0 })
  79.   }
  80.  
  81.   render() {
  82.  
  83.  
  84.     return (
  85.  
  86.       <View style={styles.container}>
  87.  
  88.  
  89.         <View style={{ flexDirection: 'row' }}>
  90.           <SearchBar
  91.             placeholder="Type Here..."
  92.             onChangeText={(value) => this.searchContacts(value)}
  93.             value={null}
  94.           />
  95.  
  96.           <FlatList
  97.             ref={(ref) => { this.flatListRef = ref; }}
  98.             data={this.state.contacts.sort((a, b) => a.givenName.localeCompare(b.givenName))}
  99.             renderItem={this.renderItem}
  100.             //Setting the number of column
  101.             numColumns={1}
  102.             keyExtractor={(item, index) => index.toString()}
  103.  
  104.  
  105.           />
  106.           <View style={{ marginTop: 20, padding: 10 }}>
  107.             <FlatList
  108.  
  109.               data={this.state.alphabet}
  110.               renderItem={({ item }) => <TouchableOpacity onPress={(number) => {
  111.                 if (item === 'a') {
  112.                   number = 0
  113.                   this.scrollToitem(number)
  114.                 }
  115.                 if (item === 'e') {
  116.                   number = 2
  117.                   this.scrollToitem(number)
  118.                 }
  119.                 if (item === 'g') {
  120.                   number = 4
  121.                   this.scrollToitem(number)
  122.  
  123.                 }
  124.  
  125.                 if (item === 'd') {
  126.                   number = 1
  127.                   this.scrollToitem(number)
  128.  
  129.                 }
  130.  
  131.                 if (item === 'i') {
  132.                   number = 6
  133.                   this.scrollToitem(number)
  134.  
  135.                 }
  136.                 if (item === 'l') {
  137.                   number = 7
  138.                   this.scrollToitem(number)
  139.  
  140.                 }
  141.  
  142.                 if (item === 'm') {
  143.                   number = 8
  144.                   this.scrollToitem(number)
  145.  
  146.                 }
  147.  
  148.  
  149.                 if (item === 'n') {
  150.                   number = 10
  151.                   this.scrollToitem(number)
  152.  
  153.                 }
  154.  
  155.                 if (item === 'r') {
  156.                   number = 11
  157.                   this.scrollToitem(number)
  158.  
  159.                 }
  160.  
  161.                 if (item === 't') {
  162.                   number = 12
  163.                   this.scrollToitem(number)
  164.  
  165.                 }
  166.  
  167.  
  168.               }}><Text style={{ fontSize: 25 }}>{item}</Text></TouchableOpacity>}
  169.               keyExtractor={(item, index) => index.toString()}
  170.             />
  171.           </View>
  172.  
  173.  
  174.  
  175.         </View>
  176.       </View>
  177.  
  178.     )
  179.   }
  180. }
  181.  
  182.  
  183.  
  184. const styles = StyleSheet.create({
  185.   itemContainer: {
  186.     alignItems: 'center',
  187.     justifyContent: 'center',
  188.  
  189.   },
  190.  
  191.   contactName: {
  192.  
  193.   },
  194. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top