0

I'm fetching the contacts data from user phone then mapping and creatings sorted and more minimal data(name,phone,recordId) In my case i got 475 contact on my phone. Selecting and listing this contacts are very slow

package

import Contacts from 'react-native-contacts';

  constructor(props) {
    super(props);
    this.state = {
 
      loaded: false,
      searchText: '',

      contacts: [],
      contactsTemp: [],
    };
    Contacts.iosEnableNotesUsage(false);
  }
  componentDidMount() {
    this.getContacts();
  }

The getContacts() function (andorid ios is diffrent)

getContacts() {
    if (Platform.OS == 'android') {
      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 => {
            contactss.push({
              nameSurname: contact.displayName,
              recordID: contact.recordID,
              phone: contact.phoneNumbers[0],
              isChecked: false,
            });
          });
          contactss.sort(function (a, b) {
            if (a.nameSurname.toLowerCase() < b.nameSurname.toLowerCase())
              return -1;
            if (a.nameSurname.toLowerCase() > b.nameSurname.toLowerCase())
              return 1;
            return 0;
          });

          this.setState(
            {contacts: contactss, contactsTemp: contactss, loaded: true},
            () => {
              console.log('Contatst', contacts);
            },
          );
        }),
      );
    } else {
      Contacts.getAllWithoutPhotos().then(contacts => {
        console.log('IOS  ', contacts);
        var contactss = [];
        contacts.map(contact => {
          contactss.push({
            nameSurname: contact.givenName,
            recordID: contact.recordID,
            phone: contact.phoneNumbers[0],
            isChecked: false,
          });
        });
        contactss.sort(function (a, b) {
          if (a.nameSurname.toLowerCase() < b.nameSurname.toLowerCase())
            return -1;
          if (a.nameSurname.toLowerCase() > b.nameSurname.toLowerCase())
            return 1;
          return 0;
        });

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

Render

<KeyboardAwareScrollView showsVerticalScrollIndicator={false}>
  <Box flex={1} mt={20}>
    <Box ml={10} mb={5}>
      <Text>Total: {this.state.contacts?.length} </Text>
    </Box>

    {this.state.contactsTemp?.map((cont, index) => {
      return (
        <TouchableOpacity
          onPress={() => {
            this.checkContact(cont);
          }}
        >
          <FriendsComponent
            isChecked={cont.isChecked}
            nameSurname={cont.nameSurname}
            key={index}
          />
        </TouchableOpacity>
      );
    })}
  </Box>
</KeyboardAwareScrollView>;

And the result

enter image description here It might happens to not used flatlist. I need really help to get this faster.I can explain every parts just ask. Thanks.

  • To read all contacts from the database in iOS is in general slow, but to use a ScrollView instead of a FlatList is also a bad idea as it has to render all rows at once while FlatList renders only the rows visible (+ a few) and recycles them. – Christian Sep 16 '21 at 06:30
  • Changing scrollview to flatlist will be more efficent ? – tes krmtstk4 Sep 16 '21 at 07:14
  • yes, depending on the number of contacts – Christian Sep 16 '21 at 13:42

0 Answers0