Как загрузить контактную информацию в раскрывающемся списке множественного выбора в реагировать родной?

Question

Я создаю собственное приложение для загрузки контактов телефонной книги в мое приложение, используя эту библиотеку. Я правильно загрузил контакты в свое приложение. Теперь я хотел загрузить эти контактные данные в раскрывающемся списке. Я использовал response-native-множественный выбор, чтобы загрузить контакт, используя эту библиотеку. Но я не могу загрузить контакт в эту библиотеку.

Интерфейс, который мне нужен для загрузки контактных данных.

Это то, что я пробовал,

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  Image,
  TextInput,
  PermissionsAndroid,
  Platform,
  Modal,
  TouchableHighlight,
  Alert,
} from 'react-native';
import ContactsLib from 'react-native-contacts';
import {styles} from '../src/HomeTabs/ContactStyles';
import PropTypes from 'prop-types';

import {Header} from 'react-native-elements';

import MultiSelect from 'react-native-multiple-select';
//Import MultiSelect library

export class Tab2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contactList: [],
      selectedContact: [],
      text: '',
      isLoading: true,
      show: false,
      modalVisible: false,
    };
    this.arrayholder = [];
  }
  async componentDidMount() {
    if (Platform.OS === 'android') {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
          {
            title: 'App Contact Permission',
            message: 'This App needs access to your contacts ',

            buttonNegative: 'Cancel',
            buttonPositive: 'OK',
          },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          this.getListOfContacts();
          this.showconsole();
        } else {
          this.setState({isLoading: false});
          this.getOtherContacts();
        }
      } catch (err) {
        this.setState({isLoading: false});
      }
    } else {
      ContactsLib.checkPermission((err, permission) => {
        if (permission === 'denied') {
          this.setState({isLoading: false});
          this.getOtherContacts();
        } else {
          this.getListOfContacts();
        }
      });
    }
  }

  // Mics Method
  getOtherContacts = () => {
    const {otherContactList} = this.props;
    const arrFinal = [];
    if (otherContactList.length > 0) {
      otherContactList.map(listItem => {
        arrFinal.push(listItem);
      });
    }
    arrFinal.map((listItem, index) => {
      listItem.isSelected = false;
      listItem.id = index;
    });
    this.setState({contactList: arrFinal, isLoading: false});
    this.arrayholder = arrFinal;
  };
  getListOfContacts = () => {
    const {otherContactList} = this.props;
    const arrFinal = [];

    ContactsLib.getAll((err, contacts) => {
      if (err) {
        throw err;
      }
      contacts.map(listItem => {
        arrFinal.push({
          fullname: listItem.givenName + ' ' + listItem.familyName,
          phoneNumber:
            listItem.phoneNumbers.length > 0
              ? listItem.phoneNumbers[0].number
              : '',
          avatar: listItem.thumbnailPath,
        });
      });
      if (otherContactList.length > 0) {
        otherContactList.map(listItem => {
          arrFinal.push(listItem);
        });
      }
      arrFinal.map((listItem, index) => {
        listItem.isSelected = false;
        listItem.id = index;
      });
      this.setState({contactList: arrFinal, isLoading: false});
      this.arrayholder = arrFinal;
    });
  };

  getSelectedContacts = () => {
    const {selectedContact} = this.state;
    return selectedContact;
  };
  checkContact = item => {
    const {onContactSelected, onContactRemove} = this.props;
    let arrContact = this.state.contactList;
    let arrSelected = this.state.selectedContact;
    arrContact.map(listItem => {
      if (listItem.id === item.id) {
        listItem.isSelected = !item.isSelected;
      }
    });
    if (item.isSelected) {
      arrSelected.push(item);
      if (onContactSelected) {
        onContactSelected(item);
      }
    } else {
      if (onContactRemove) {
        onContactRemove(item);
      }
      arrSelected.splice(arrSelected.indexOf(item), 1);
    }

    this.setState({contactList: arrContact, selectedContact: arrSelected});
  };
  checkExist = item => {
    const {onContactRemove} = this.props;
    let arrContact = this.state.contactList;
    let arrSelected = this.state.selectedContact;
    arrContact.map(listItem => {
      if (listItem.id === item.id) {
        listItem.isSelected = false;
      }
    });
    if (onContactRemove) {
      onContactRemove(item);
    }
    arrSelected.splice(arrSelected.indexOf(item), 1);
    this.setState({contactList: arrContact, selectedContact: arrSelected});
  };

  SearchFilterFunction = text => {
    let newArr = [];
    this.arrayholder.map(function(item) {
      const itemData = item.fullname.toUpperCase();
      const textData = text.toUpperCase();
      if (itemData.indexOf(textData) > -1) {
        newArr.push(item);
      }
    });
    this.setState({
      contactList: newArr,
      text: text,
    });
  };

  //Render Method

  _renderItem = ({item}) => {
    const {viewCheckMarkStyle} = this.props;
    return (
      <TouchableOpacity onPress={() => this.checkContact(item)}>
        <View style={styles.viewContactList}>
          <Image
            source={
              item.avatar !== ''
                ? {uri: item.avatar}
                : require('../images/user.png')
            }
            style={styles.imgContactList}
          />
          <View style={styles.nameContainer}>
            <Text style={styles.txtContactList}>{item.fullname}</Text>
            <Text style={styles.txtPhoneNumber}>{item.phoneNumber}</Text>
          </View>
          {item.isSelected && (
            <Image
              source={require('../images/check-mark.png')}
              style={[styles.viewCheckMarkStyle, viewCheckMarkStyle]}
            />
          )}
        </View>
      </TouchableOpacity>
    );
  };

  state = {
    //We will store selected item in this
    selectedItems: [],
  };
  onSelectedItemsChange = selectedItems => {
    this.setState({selectedItems});
    //Set Selected Items
  };

  render() {
    const {selectedItems} = this.state;
    const {searchBgColor, searchPlaceholder, viewSepratorStyle} = this.props;
    return (
      <View style={styles.container}>
        <MultiSelect
          hideTags
          items={this.contactList}
          uniqueKey="id"
          ref={component => {
            this.multiSelect = component;
          }}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText="Select Contacts"
          searchInputPlaceholderText="Search Contacts..."
          onChangeInput={text => console.log(text)}
          tagRemoveIconColor="#ff0000"
          tagBorderColor="#48d22b"
          tagTextColor="#000"
          selectedItemTextColor="#48d22b"
          selectedItemIconColor="#48d22b"
          itemTextColor="#000"
          displayKey="name"
          searchInputStyle={{color: '#48d22b'}}
          submitButtonColor="#48d22b"
          submitButtonText="Submit"
        />
        <View>
          {this.multiSelect &&
            this.multiSelect.getSelectedItemsExt(selectedItems)}
        </View>

        {this.state.isLoading && (
          <View style={styles.loading}>
            <ActivityIndicator animating={true} size="large" color="gray" />
          </View>
        )}
      </View>
    );
  }
}
Tab2.propTypes = {
  otherContactList: PropTypes.array,
  viewCloseStyle: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.object,
  ]),
  viewCheckMarkStyle: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.object,
  ]),
  sepratorStyle: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.object,
  ]),
  viewSepratorStyle: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.object,
  ]),
  searchBgColor: PropTypes.string,
  searchPlaceholder: PropTypes.string,
  onContactSelected: PropTypes.func,
  onContactRemove: PropTypes.func,
};

Tab2.defaultProps = {
  otherContactList: [],
  viewCloseStyle: {},
  viewCheckMarkStyle: {},
  sepratorStyle: {},
  viewSepratorStyle: {},
  searchBgColor: 'rgb(202,201,207)',
  searchPlaceholder: 'Search...',
  onContactSelected: () => {},
  onContactRemove: () => {},
};

export default Tab2;

Answer 1

на вашем мультиселекте должны быть указаны контакты. Попробуйте убрать что-нибудь несущественное из вашего примера

...
render() {
  ...
  return (
    ...
    <MultiSelect
      items={this.state.contactList}
      ...
    />
    ...
  );
}