React-native-contacts: TypeError: undefined is not an object (evaluating e.phoneNumber[0].number)

[balwinders]

my code are:

 render() {
      return (

      <View style={styles.MainContainer}>
            {
            <FlatList
               style={styles.contactsCs}
               data={this.state.contacts}
               keyExtractor={ (contact) => contact.identifier }
               renderItem={ ({item}) => (

                 <View style={styles.contactCs}>
                   <Text style={styles.nameCs}>
                    {key=item.key}
                    {first_name=item.givenName +" "}
                    {last_name=item.familyName +"\n"}
                    {number=item.phoneNumbers[0].number;}

                   </Text>
                 </View>
               ) }
             />
            }
            <View style={ styles.buttonCs }>

              <Button title="Get Contacts" onPress={ () => this._getContacts() } />
            </View>
         </View>
    );
  }

Please help, I 'll shown the name and phone number in list. It display name fine but error in number.
Somebody explain how it work.
Thanks in advance.

[morenoh149]

there must not be a number in e.phoneNumber array. Please share the contact object you are receiving.

[Sanjeet1]

I also get this array.

{ thumbnailPath: '',
  company: '',
  recordID: 'E94CD15C-7964-4A9B-8AC4-10D7CFB791FD',
  jobTitle: '',
  emailAddresses: [],
  phoneNumbers: [ { label: 'home', number: '555-610-6679' } ],
  hasThumbnail: false,
  birthday: { day: 15, month: 5, year: 1998 },
  givenName: 'David',
  postalAddresses: 
   [ { state: 'CA',
       city: 'Tiburon',
       postCode: '94920',
       label: 'home',
       region: 'CA',
       country: 'USA',
       street: '1747 Steuart Street' } ],
  middleName: '',
  familyName: 'Taylor' }

[Ahmed-Imam]

I have the same issue, and i think it is due to some contacts don't have the number property, so how can we overcome this issue ?

[morenoh149]

fix the logic and submit a PR @Ahmed-Imam

[Ahmed-Imam]

I solved my issue as follow:

 showContacts = ({item})=>{
//Checking if the phoneNumber property is undefined 
       if(item.phoneNumber[0] === undefined){
       }else{
        return(
            <View>
                <Text>{item.familyName+item.phoneNumber[0].number }</Text>
            </View> )
        }}

<FlatList data={this.state.contacts} renderItem={this.showContacts} keyExtractor={item => item.id} />

[morenoh149]

are you sure the contact field is phoneNumber and not phoneNumbers? (note the plural s)

As documented in https://github.com/rt2zz/react-native-contacts#example-contact-record

[morenoh149]

use contact.phoneNumbers

you can also guard in js like if (contact.phoneNumbers && contact.phoneNumbers[0]) { won't throw an error.

[ikbal-nayem]

thank you gays @morenoh149 and @Ahmed-Imam ! your discussion solves my problem...

[binyamindavid]

@ikbal-nayem i think there is a typo, you just called them GAYS. Why?

[Ashish-Upadhyay892]

I solved my issue as follow:

 showContacts = ({item})=>{
//Checking if the phoneNumber property is undefined 
       if(item.phoneNumber[0] === undefined){
       }else{
        return(
            <View>
                <Text>{item.familyName+item.phoneNumber[0].number }</Text>
            </View> )
        }}

<FlatList
         data={this.state.contacts}
         renderItem={this.showContacts}
         keyExtractor={item => item.id}
 />

Thanks Man For this