React Native Searchable Dropdown: Text Remains Invisible

I am using react-native-searchable-dropdown to search a list of data and select them. This is the working example that I am following. However, when I use a different API URL, I a

Solution 1:

This workaround requires the module to be modified. The setSort function allows you to correct errors for the search. However, you cannot see the name in the search list. By default, the value of the key in the name must be 'name'.

The reason can be found where the list is returned.

index.js in react-native-searchable-dropdown

renderItems = (item, index) => {
....
            <View style={{ flex: 0.9, flexDirection: 'row', alignItems: 'flex-start' }}>
              <Text>{ item.name }</Text>  <== The value of the list key is name.
            </View>
....

If you want to solve the problem right now, the key value of the API must be changed

{"title":"The Basics - Networking","description":"Your app fetched this from a remote endpoint!","movies":[{"id":"1","name":"Star Wars","releaseYear":"1977"},{"id":"2","name":"Back to the Future","releaseYear":"1985"},{"id":"3","name":"The Matrix","releaseYear":"1999"},{"id":"4","name":"Inception","releaseYear":"2010"},{"id":"5","name":"Interstellar","releaseYear":"2014"}]}

You can also convert your search by adding a movie genre.

{"title":"The Basics - Networking","description":"Your app fetched this from a remote endpoint!","movies":[{"id":"1","genre":"Fantasy","name":"Star Wars","releaseYear":"1977"},{"id":"2","genre":"Fantasy","name":"Back to the Future","releaseYear":"1985"},{"id":"3","genre":"Action","name":"The Matrix","releaseYear":"1999"},{"id":"4","genre":"Future","name":"Inception","releaseYear":"2010"},{"id":"5","genre":"Future","name":"Interstellar","releaseYear":"2014"}]}

And You can use setSort function

setSort={(item, searchedText)=> item.genre.toLowerCase().startsWith(searchedText.toLowerCase())}