React native contacts in list works really slow

Question

I'm trying to add a feature to my app which is add your contacts to your profile. I'm using a package for this but it works slow (in my case 470 contact record I got in my phone).

The package

import Contacts from 'react-native-contacts';

My code

componentDidMount() {
    this.getContacts();
  }


  getContacts() {

    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
      title: 'Contacts',
      message: 'This app would like to view your contacts.',
      buttonPositive: 'Please accept bare mortal',
    })
      .then(
        Contacts.getAllWithoutPhotos().then(contacts => {
          var contactss = [];
          contacts.map(contact => {

            /// I'm mapping it for  showing them in simple list with checkbox
            contactss.push({...contact, checked: false});
          });
          // then sorting for alphabetical order by displayName
          contactss.sort(function (a, b) {
            if (a.displayName.toLowerCase() < b.displayName.toLowerCase())
              return -1;
            if (a.displayName.toLowerCase() > b.displayName.toLowerCase())
              return 1;
            return 0;
          });

          this.setState(
            {contacts: contactss,  loaded: true},
            () => {
              console.log('contacts', this.state.contacts);
            },
          );
        }),
      )
      .then(contacts => {});
  }

That's all code. Is this normal or should I do what?

Thank you.

I'm just trying to handle with this data. Also I'm giving select option to user which account you want, like this.

//function to select contact 
checkContc(contc) {
    console.log('checkFriend', contc);
    let contactsTemp = this.state.contactsTemp.map(el =>
      el.recordID == contc.recordID
        ? {...el, checked: !el.checked}
        : {...el},
    );

    this.setState({contactsTemp}, () => {
      console.log('check frined stateD ', this.state);
    });
  }

// render in scrollview
<ScrollView>
{this.state.contactsTemp?.map((follower, index) => {
    return (
      <TouchableOpacity
        onPress={() => {
          this.checkFriend(follower);
        }}>
        <FriendsComponent
          checked={follower.checked}
          nameSurname={follower.displayName}
          key={index}
        />
      </TouchableOpacity>
    );
  })}
</ScrollView>

result

Well, so its just my phone is slow – tes krmtstk4 Jul 27 '21 at 07:47 — tes krmtstk4, Jul 27 '21 at 07:47
Anyone to teach me how can i get it faster – tes krmtstk4 Jul 27 '21 at 14:14 — tes krmtstk4, Jul 27 '21 at 14:14

score 0 · Answer 1 · answered Aug 04 '22 at 17:30

0

I made a research and it looks like it is that slow. I'm not sure if the only solution isn't the native one.

answered Aug 04 '22 at 17:30

Alice

61
1
8

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32411613) – Iva Aug 11 '22 at 07:44

React native contacts in list works really slow

1 Answers1