How to call a variable with data in React Native

Question

Sometghing really basic but I didn't understant. Once I get the contacts how can I use them to populate the Flatlist? I always get Can't find variable: contacts

import * as Contacts from "expo-contacts";

const ContactsScreen = props => {
  useEffect(() => {
    (async () => {
      const { status } = await Contacts.requestPermissionsAsync();
      if (status === "granted") {
        const { data } = await Contacts.getContactsAsync({
          fields: [Contacts.Fields.Emails]
        });

        if (data.length > 0) {
          const contact = data[0];
          console.log(contact);
        }
      }
    })();
  }, []);


  return (
    <View >
      <Text>Contacts Module</Text>
      <FlatList
        data={contact}
        keyExtractor={contact.id}
        renderItem={({ item }) => (
      <ContactItem
        firstName={item.firstName}
      />
    </View>
  );
};

export default ContactsScreen;

I think it's really simple, I just don't understand

I think that might be because of the scope of the variable , it could be that RN doenst know it exists because it only lives inside the function. I guess you could set up a State and then assign the values from contact to the state and in ur flatlist call data ={ this.state.contact}. — yesIamFaded
– yesIamFaded, Commented Mar 23, 2020 at 13:08
cool im gonna post the same as an answer and i would appreciate it if you can accept it :) gl in further coding. — yesIamFaded
– yesIamFaded, Commented Mar 23, 2020 at 13:22

aytek · Accepted Answer · 2020-03-23 13:21:26Z

1

You need to keep your contacts in the component's state. So every time you change your state, your component will render itself and you will see the updated data. Change your code with the following. Don't forget to import useState.

import * as Contacts from "expo-contacts";

const ContactsScreen = props => {
  const [myContacts, setMyContacts] = useState([]);

  useEffect(() => {
    (async () => {
      const { status } = await Contacts.requestPermissionsAsync();
      if (status === "granted") {
        const { data } = await Contacts.getContactsAsync({
          fields: [Contacts.Fields.Emails]
        });

        if (data.length > 0) {
          setMyContacts(data);
        }
      }
    })();
  }, []);


  return (
    <View >
      <Text>Contacts Module</Text>
      <FlatList
        data={myContacts}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <Text>{item.firstName}</Text>
        )}
      />
    </View>
  );
};

export default ContactsScreen;

answered Mar 23, 2020 at 13:21

aytek

1,95224 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Marco Disco Over a year ago

my problem now is that I see the array but flatlist doesn't render anything. any idea?

yesIamFaded · Accepted Answer · 2020-03-23 13:22:37Z

1

Answer from my comment:

I think that might be because of the scope of the variable , it could be that RN doenst know it exists because it only lives inside the function. I guess you could set up a State and then assign the values from contact to the state and in ur flatlist call data ={ this.state.contact}.

or by using hooks like you do :

if (data.length > 0) {
          setContact(data);
        }

and call it in flatlist:

data={myContact} // if named so in state declaration

answered Mar 23, 2020 at 13:22

yesIamFaded

2,0683 gold badges29 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to call a variable with data in React Native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related