React nattive multi select , cant select multiple values - react-native

Question

I've an api which is resolving into an array of objects, something like this
[
{flagUrl : 'http://....' , name : India , id : 7},
{flagUrl : 'http://....' , name : USA , id : 2},
{flagUrl : 'http://....' , name : Australia , id : 8},
....
]
and then Im using https://www.npmjs.com/package/react-native-select-multiple , this package to make a multi selectable list from above link.
What i want is , firstly I can display the list of country in which user can select lets say two countries ( i can control max select with the prop provided ) and then I want when user goes to next page, I can get what id user has selected in previous screen.
Currently i tried to display the same and its just the list of countries that i can show right now and then I cant get their ids. Here's what i tried so far
<SelectMultiple
items={this.state.countryList.map((x) => x.name)}
selectedItems={this.state.selectedCountries}
onSelectionsChange={this.onSelectionsChange}
maxSelect={2}
/>
where my countrylist has the above array and here are the functions that i've used
onSelectionsChange = (selectedCountries) => {
this.setState({ selectedCountries })
}
and selectedItems is just an empty array in my state.
So I just want to render a list of countries, user selects few of them and then i can send the country's selected ids to the next screen via this.props.navigate...
Let me know if you need additional information on this.
Thanks in advance :)

Answer 1

Your country list must be label and value like
<SelectMultiple
items={this.state.countryList.map((x) => ({ name: x.name, value:x.id })}
selectedItems={this.state.selectedCountries}
onSelectionsChange={this.onSelectionsChange}
maxSelect={2}
/>
the onSelectionsChange method should be the same
onSelectionsChange = (selectedCountries) => {
this.setState({ selectedCountries })
}
Then when you want to move to another screen then
moveToAnotherPage =() => {
const { selectedCountries } = this.state;
const { navigation } = this.props;
const ids = selectedCountries.map(item => item.value);
navigation.navigate('ScreenName', {ids});
}