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
It might happens to not used flatlist. I need really help to get this faster.I can explain every parts just ask. Thanks.