react-native-contacts - npm Package Compare versions

Comparing version 5.0.2 to 5.0.3

CONTRIBUTING.md

@@ -9,3 +9,3 @@ # Contributing
 * write your feature
-* submit a feature test on https://github.com/morenoh149/react-native-contacts-test to test it's integration
+* add example usage to the example app https://github.com/rt2zz/react-native-contacts/tree/master/example
 * submit a pull request on this repo, and describe:
@@ -12,0 +12,0 @@ * a brief description

example/App.js

@@ -9,18 +9,26 @@ /**
 
-import React, {Component} from 'react';
-import {PermissionsAndroid, Platform, SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';
-import Contacts from 'react-native-contacts';
+import React, { Component } from "react";
+import {
+  PermissionsAndroid,
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  Image
+} from "react-native";
+import Contacts from "react-native-contacts";
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
+import ListItem from "./components/ListItem";
+import Avatar from "./components/Avatar";
+import SearchBar from "./components/SearchBar";
 
 type Props = {};
 export default class App extends Component<Props> {
-
   constructor(props) {
     super(props);
+
+    this.search = this.search.bind(this);
+
     this.state = {
@@ -32,12 +40,9 @@ contacts: []
   async componentWillMount() {
-    if (Platform.OS === 'android') {
-      PermissionsAndroid.request(
-        PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
-        {
-          'title': 'Contacts',
-          'message': 'This app would like to view your contacts.'
-        }
-      ).then(() => {
+    if (Platform.OS === "android") {
+      PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
+        title: "Contacts",
+        message: "This app would like to view your contacts."
+      }).then(() => {
         this.loadContacts();
-      })
+      });
     } else {
@@ -50,18 +55,75 @@ this.loadContacts();
     Contacts.getAll((err, contacts) => {
-      if (err === 'denied'){
-        console.warn('Permission to access contacts was denied');
+      if (err === "denied") {
+        console.warn("Permission to access contacts was denied");
       } else {
         this.setState({ contacts });
       }
-    })
+    });
   }
 
+  search(text) {
+    const phoneNumberRegex = /\b[\+]?[(]?[0-9]{2,6}[)]?[-\s\.]?[-\s\/\.0-9]{3,15}\b/m;
+    if (text === "" || text === null) {
+      this.loadContacts();
+    } else if (phoneNumberRegex.test(text)) {
+      Contacts.getContactsByPhoneNumber(text, (err, contacts) => {
+        this.setState({ contacts });
+      });
+    } else {
+      Contacts.getContactsMatchingString(text, (err, contacts) => {
+        this.setState({ contacts });
+      });
+    }
+  }
+
   render() {
     return (
       <SafeAreaView style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native Contacts!</Text>
-        <ScrollView style={{flex: 1}}>
-          <Text style={styles.instructions}>
-            {JSON.stringify(this.state.contacts, null, '\t')}
-          </Text>
+        <View
+          style={{
+            paddingLeft: 100,
+            paddingRight: 100,
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <Image
+            source={require("./logo.png")}
+            style={{
+              aspectRatio: 6,
+              resizeMode: "contain"
+            }}
+          />
+        </View>
+        <SearchBar onChangeText={this.search} />
+        <ScrollView style={{ flex: 1 }}>
+          {this.state.contacts.map(contact => {
+            return (
+              <ListItem
+                leftElement={
+                  <Avatar
+                    img={
+                      contact.hasThumbnail
+                        ? { uri: contact.thumbnailPath }
+                        : undefined
+                    }
+                    placeholder={getAvatarInitials(
+                      `${contact.givenName} ${contact.familyName}`
+                    )}
+                    width={40}
+                    height={40}
+                  />
+                }
+                key={contact.recordID}
+                title={`${contact.givenName} ${contact.familyName}`}
+                description={`${contact.company}`}
+                onPress={() => Contacts.openExistingContact(contact, () => {})}
+                onDelete={() =>
+                  Contacts.deleteContact(contact, () => {
+                    this.loadContacts();
+                  })
+                }
+              />
+            );
+          })}
         </ScrollView>
@@ -75,17 +137,19 @@ </SafeAreaView>
   container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'left',
-    color: '#333333',
-    marginBottom: 5,
-  },
+    flex: 1
+  }
 });
+
+const getAvatarInitials = textString => {
+  if (!textString) return "";
+
+  const text = textString.trim();
+
+  const textSplit = text.split(" ");
+
+  if (textSplit.length <= 1) return text.charAt(0);
+
+  const initials =
+    textSplit[0].charAt(0) + textSplit[textSplit.length - 1].charAt(0);
+
+  return initials;
+};

example/package.json

@@ -7,8 +7,11 @@ {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "jest"
+    "test": "jest",
+    "postinstall": "yarn react-native-jetifier"
   },
   "dependencies": {
+    "@jumpn/react-native-jetifier": "^0.1.4",
     "react": "16.8.3",
     "react-native": "0.59.5",
-    "react-native-contacts": "github:rt2zz/react-native-contacts"
+    "react-native-contacts": "https://github.com/rt2zz/react-native-contacts.git",
+    "react-native-gesture-handler": "^1.3.0"
   },
@@ -15,0 +18,0 @@ "devDependencies": {

example/README.md

@@ -1,2 +0,2 @@
-# react-native-device-info example project
+# react-native-contacts example project
 
@@ -3,0 +3,0 @@ ## Installation

index.d.ts

@@ -11,2 +11,3 @@ export function getAll(callback: (error: any, contacts: Contact[]) => void): void;
 export function getContactsMatchingString(str: string, callback: (error: any, contacts: Contact[]) => void): void;
+export function getContactsByPhoneNumber(phoneNumber: string, callback: (error: any, contacts: Contact[]) => void): void;
 export function checkPermission(callback: (error: any, result: 'authorized' | 'denied' | 'undefined') => void): void;
@@ -61,2 +62,2 @@ export function requestPermission(callback: (error: any, result: 'authorized' | 'denied' | 'undefined') => void): void;
     birthday: Birthday;
-}
+}

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "React Native Contacts (android & ios)",
@@ -10,0 +10,0 @@ "nativePackage": true,

README.md

@@ -1,2 +0,3 @@
-# React Native Contacts
+![react-native-contacts](https://github.com/rt2zz/react-native-contacts/raw/master/example/logo.png)
+
 To contribute read [CONTRIBUTING.md](CONTRIBUTING.md).
@@ -73,3 +74,20 @@
 
+#### Using CocoaPods (react-native 0.60 and above)
+Starting with 0.60, the above instructions stop working on iOS. Instead, you have to do the following:
+
+- Add the following line inside `ios/Podfile`
+
+```
+target 'app' do
+  ...
+  pod 'react-native-contacts', :path => '../node_modules/react-native-contacts' <-- add me
+  ...
+end
+```
+
+- Run `pod install` in folder `ios`
+
 ### Android
+For react native versions 0.60 and above you have to use Android X. Android X support was added to react-native-contacts in version 5.x+. If you are using rn 0.59 and below install rnc versions 4.x instead.
+
 1. In `android/settings.gradle`
@@ -83,3 +101,3 @@
 
-3. In `android/app/build.gradle`
+2. In `android/app/build.gradle`
 
@@ -94,3 +112,3 @@ ```gradle
 
-4. register module (in MainApplication.java)
+3. register module (in MainApplication.java)
 
@@ -152,2 +170,3 @@ ```java
  * `getContactsMatchingString` (string, callback) - where string is any string to match a name (first, middle, family) to
+ * `getContactsByPhoneNumber` (string, callback) - where string is a phone number to match to.
  * `checkPermission` (callback) - checks permission to access Contacts _ios only_
@@ -232,4 +251,3 @@ * `requestPermission` (callback) - request permission to access Contacts _ios only_
   }],
-  familyName: "Nietzsche",
-  givenName: "Friedrich",
+  displayName: "Friedrich Nietzsche"
 }
@@ -328,2 +346,8 @@
 
+## Example
+You can find an example app/showcase [here](https://github.com/rt2zz/react-native-contacts/tree/master/example)
+
+![react-native-contacts example](https://github.com/rt2zz/react-native-contacts/raw/master/example/react-native-contacts.gif)
+
+
 <h2 align="center">Maintainers</h2>
@@ -330,0 +354,0 @@

New alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8845821

increased by913.58%

Number of package files

83

increased by9.21%

Lines of code

11975

increased by4.27%

Number of lines in readme file

366

increased by7.02%

Worsened metrics

Number of high supply chain risk alerts

1

increased byInfinity%

No dependency changes