title: React Native Searchable Dropdown: Text remains Invisible
body: <p>I am using <a href="https://github.com/zubairpaizer/react-native-searchable-dropdown" rel="nofollow noreferrer">react-native-searchable-dropdown</a> to search a list of data and select them. This is the <a href="https://snack.expo.io/SkpOHlOGU" rel="nofollow noreferrer">working example</a> that I am following.</p>
  
  <blockquote>
    <p>However, when I use a different API URL, I am facing the following
    problems: </p>
    
    <ol>
    <li>The item itself remains invisible</li>
    <li>Trying to search the item shows error</li>
    </ol>
    
    <p><a href="https://snack.expo.io/Bkx7ox!MI" rel="nofollow noreferrer">This is my code with different API URL</a>. On another one of my project, using <code>setSort</code> property helped solved the searching issue but in this example, it's showing error.</p>
  </blockquote>
  
  <p>It would be really helpful if anyone with previous experience regarding this issue can help solve it. Thank you.</p>
  
  <p><strong>Here's the code snippet from my code:</strong></p>
  
  <pre><code>    componentDidMount() {
          fetch('https://facebook.github.io/react-native/movies.json')
            .then(response =&gt; response.json())
            .then(responseJson =&gt; {
              //Successful response from the API Call
              this.setState({
                serverData: [...this.state.serverData, ...responseJson.movies],
                //adding the new data in Data Source of the SearchableDropdown
              });
            })
            .catch(error =&gt; {
              console.error(error);
            });
        }
        render() {
          return (
            &lt;View style={{ flex: 1, marginTop: 30 }}&gt;
              &lt;Text style={{ marginLeft: 10 }}&gt;
                Searchable Dropdown from Dynamic Array from Server
              &lt;/Text&gt;
              &lt;SearchableDropdown
                setSort={(item, searchedText)=&gt; item.title.toLowerCase().startsWith(searchedText.toLowerCase())}
                onTextChange={text =&gt; console.log(text)}
                //On text change listner on the searchable input
                onItemSelect={item =&gt; alert(JSON.stringify(item))}
                //onItemSelect called after the selection from the dropdown
                containerStyle={{ padding: 5 }}
                //suggestion container style
                textInputStyle={{
                  //inserted text style
                  padding: 12,
                  borderWidth: 1,
                  borderColor: '#ccc',
                  backgroundColor: '#FAF7F6',
                }}
                itemStyle={{
                  //single dropdown item style
                  padding: 10,
                  marginTop: 2,
                  backgroundColor: '#FAF9F8',
                  borderColor: '#bbb',
                  borderWidth: 1,
                }}
                itemTextStyle={{
                  //single dropdown item's text style
                  color: '#222',
                }}
                itemsContainerStyle={{
                  //items container style you can pass maxHeight
                  //to restrict the items dropdown hieght
                  maxHeight: '50%',
                }}
                items={this.state.serverData}
                //mapping of item array
                defaultIndex={2}
                //default selected item index
                placeholder="placeholder"
                //place holder for the search input
                resetValue={false}
                //reset textInput Value with true and false state
                underlineColorAndroid="transparent"
                //To remove the underline from the android input
              /&gt;
            &lt;/View&gt;
          );
        }
  </code></pre>