title: How I can resolve this : Warning: Encountered two children with the same key, `%s`
body: <p>I am new to react-native and this is not me who program this app.</p>
  
  <p>Could someone help me to fix this error, I think  its the flatlist who cause this because it happen only I load the page or search something on the list. I know there is  a lot a question about this error but I don't find a solution for me.</p>
  
  <p><code>Warning: Encountered two children with the same key,</code>%s<code>. Keys should be unique so that components maintain their identity across updates.</code></p>
  
  <p>ContactScreen.js </p>
  
  <pre><code>import React from 'react';
  import { Button, View, FlatList, Alert, StyleSheet, KeyboardAvoidingView } from 'react-native';
  import { ListItem, SearchBar } from 'react-native-elements';
  import Ionicons from 'react-native-vector-icons/Ionicons';
  import { Contacts } from 'expo';
  import * as Api from '../rest/api';
  import theme from '../styles/theme.style';
  import { Contact, ContactType } from '../models/Contact';
  
  class ContactsScreen extends React.Component {
    static navigationOptions = ({ navigation }) =&gt; {
      return {
        headerTitle: "Contacts",
        headerRight: (
          &lt;Button
            onPress={() =&gt; navigation.popToTop()}
            title="Déconnexion"
          /&gt;
        ),
      }
    };
  
    constructor(props) {
      super(props);
  
      this.state = {
        contacts: [],
        search: '',
        isFetching: false,
        display_contacts: []
      }
    }
  
    async componentDidMount() {
      this.getContactsAsync();
    }
  
    async getContactsAsync() {
      const permission = await Expo.Permissions.askAsync(Expo.Permissions.CONTACTS);
      if (permission.status !== 'granted') { return; }
  
      const contacts = await Contacts.getContactsAsync({
          fields: [
            Contacts.PHONE_NUMBERS,
            Contacts.EMAILS,
            Contacts.IMAGE
          ],
          pageSize: 100,
          pageOffset: 0,
      });
  
  
      const listContacts = [];
      if (contacts.total &gt; 0) {
        for(var i in contacts.data) {
          let contact = contacts.data[i];
          let id = contact.id;
          let first_name = contact.firstName;
          let middle_name = contact.middleName;
          let last_name = contact.lastName;
          let email = "";
          if ("emails" in  contact &amp;&amp; contact.emails.length &gt; 0) {
            email = contact.emails[0].email;
          }
          let phone = "";
          if ("phoneNumbers" in contact &amp;&amp; contact.phoneNumbers.length &gt; 0) {
            phone = contact.phoneNumbers[0].number;
          }
          listContacts.push(new Contact(id, first_name, middle_name, last_name, email, phone, ContactType.UP));
        }
      }
  
      const soemanContacts = await Api.getContacts();
      if (soemanContacts.length &gt; 0) {
        for(var i in soemanContacts) {
          let contact = soemanContacts[i];
          let id = contact.contact_id.toString();
          let first_name = contact.contact_first_name
          let last_name = contact.contact_last_name;
          let email = contact.contact_email;
          let phone = contact.contact_phone.toString();
          listContacts.push(new Contact(id, first_name, "", last_name, email, phone, ContactType.DOWN));
        }
      }
  
      listContacts.sort((a, b) =&gt; a.name.localeCompare(b.name));
      this.setState({contacts: listContacts});
      this.setState({ isFetching: false });
      this.updateSearch(null);
    }
  
    async addContactAsync(c) {
      const contact = {
        [Contacts.Fields.FirstName]: c.firstName,
        [Contacts.Fields.LastName]: c.lastName,
        [Contacts.Fields.phoneNumbers]: [
          {
            'number': c.phone
          },
        ], 
        [Contacts.Fields.Emails]: [
          {
            'email': c.email
          }
        ]
      }
      const contactId = await Contacts.addContactAsync(contact);
    }
  
    onRefresh() {
      this.setState({ isFetching: true }, function() { this.getContactsAsync() });
    }
  
    updateSearch = search =&gt; {
      this.setState({ search });
      if(!search) {
        this.setState({display_contacts: this.state.contacts});
      }
      else {
  
        const res = this.state.contacts.filter(contact =&gt; contact.name.toLowerCase().includes(search.toLowerCase()));
        console.log(res);
        this.setState({display_contacts: res});
        console.log("contact display "+ this.state.display_contacts);
      }
    };
  
    toggleContact(contact) {
      switch(contact.type) {
        case ContactType.SYNC:
          break;
        case ContactType.DOWN:
          this.addContactAsync(contact);
          break;
        case ContactType.UP:
          Api.addContact(contact);
          break;
      }
      /*Alert.alert(
        'Synchronisé',
        contact.name + 'est déjà synchronisé'
      );*/
    }
  
    renderSeparator = () =&gt; (
      &lt;View style={{ height: 0.5, backgroundColor: 'grey', marginLeft: 0 }} /&gt;
    )
  
    render() {
      return (
        &lt;View style={{ flex: 1 }}&gt;
        &lt;KeyboardAvoidingView style={{ justifyContent: 'flex-end' }} behavior="padding" enabled&gt;
          &lt;SearchBar
            platform="default"
            lightTheme={true}
            containerStyle={styles.searchBar}
            inputStyle={styles.textInput}
            placeholder="Type Here..."
            onChangeText={this.updateSearch}
            value={this.state.search}
            clearIcon
          /&gt;
          &lt;FlatList
            data={this.state.display_contacts}
            onRefresh={() =&gt; this.onRefresh()}
            refreshing={this.state.isFetching}
            renderItem={this.renderItem}
            keyExtractor={contact =&gt; contact.id}
            ItemSeparatorComponent={this.renderSeparator}
            ListEmptyComponent={this.renderEmptyContainer()}
          /&gt;
        &lt;/KeyboardAvoidingView&gt;
        &lt;/View&gt;
      );
    }
  
    renderItem = (item) =&gt; {
      const contact = item.item;
      let icon_name = '';
      let icon_color = 'black';
      switch(contact.type) {
        case ContactType.SYNC:
          icon_name = 'ios-done-all';
          icon_color = 'green';
          break;
        case ContactType.DOWN:
          icon_name = 'ios-arrow-down';
          break;
        case ContactType.UP:
          icon_name = 'ios-arrow-up';
          break;
      }
      return (
        &lt;ListItem
          onPress={ () =&gt; this.toggleContact(contact) }
          roundAvatar
          title={contact.name}
          subtitle={contact.phone}
          //avatar={{ uri: item.avatar }}
          containerStyle={{ borderBottomWidth: 0 }}
          rightIcon={&lt;Ionicons name={icon_name} size={20} color={icon_color}/&gt;}
        /&gt;
      );
    }
  
    renderEmptyContainer() {
      return (
        &lt;View&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    searchBar: {
      backgroundColor: theme.PRIMARY_COLOR
    },
    textInput: {
      backgroundColor: theme.PRIMARY_COLOR,
      color: 'white'
    }
  });
  
  export default ContactsScreen;
  
  </code></pre>
  
  <p>I use react-native and expo for this application.</p>