I have added react-native-searchable-dropdown in my app which is working fine on android but on IOS it’s not working. I am not able to click on it or nothing pops up like keyboard. Also, I can’t see any errors.
On android simulator, everything is working fine.
<SearchableDropdown
onTextChange={async (text) => {
console.log("text is", text);
await this.loadSearchData(text);
if (text) {
this.setState({
search: true,
});
} else {
this.setState({
search: false,
});
}
}}
check={(text) => {
if (text == true && !this.state.search) {
this.setState({
search: true,
});
}
}}
//On text change listner on the searchable input
onItemSelect={(item) => {
console.log("selected", item.name);
let skills = this.state.skills;
if (!skills.find((skill) => skill == item.name)) {
skills.push(item.name);
}
console.log("Selected skills are", skills);
this.setState({
skills: skills,
});
}}
//onItemSelect called after the selection from the dropdown
containerStyle={{ padding: 0 }}
//suggestion container style
textInputStyle={{
//inserted text style
width: wp("82%"),
padding: 8,
// marginTop: hp('1.67%'),
borderColor: this.state.search ? "#fff" : "#fff",
backgroundColor: this.state.search
? "#fff"
: "#fff",
borderRadius: 6,
}}
itemStyle={{
//single dropdown item style
padding: 10,
//marginTop: 2,
backgroundColor: this.state.search
? "#fff"
: "#FAF9F8",
// borderColor: '#bbb',
// borderWidth: 1,
width: "100%",
}}
itemTextStyle={{
//single dropdown item's text style
color: "#222",
}}
itemsContainerStyle={{
//items container style you can pass maxHeight
//to restrict the items dropdown hieght
opacity: 1,
zIndex: 999,
position: "absolute",
width: wp("91.7%"),
marginTop: hp("7%"),
//height: 100,
// maxHeight: '60%',
borderRadius: 6,
borderWidth: 1,
borderColor: "#BFBEBE",
backgroundColor: "white",
}}
listProps={{
nestedScrollEnabled: true,
}}
items={this.state.skillData}
//mapping of item array
//default selected item index
placeholder={"e.g., Node.js, Python, React..."}
placeholderTextColor={"#BFBEBE"}
//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
/>
I don’t know why it is not working on my ios simulator. How can I solve this issue?