On my android phone, I can only select the first choice in the autocomplete list. It works as expected on my iPhone. The list filters as I type but no matter what the first option is after filtering, I can only select the first option in the list. I tried adding a "console.log" to the touchables in the list to see if the other options are registering the touch event and they aren't. Without giving away too much of my code it is as follows:
<ScrollView contentContainerStyle={[formStyles.container]} scrollEventThrottle={64} keyboardDismissMode="on-drag" onScroll={() => { if(!this.state.hideResults){this.setState({hideResults:true})}}}>
<KeyboardAvoidingView behavior={"padding"}>
<View style={AddViewInviteeStyles.inviteeInputMainView}>
<Text style={AddViewInviteeStyles.inviteeInputInstructionText}>{this.state.contactsRetrieved ? retrievedContactText : noRetrievedContactText}</Text>
<View style={[AddViewInviteeStyles.inviteeInputAutocompleteView]}>
<AutoComplete style={[AddViewInviteeStyles.inviteeInputAutocomplete, this.state.invalidContact ? {backgroundColor : '#dd4f42'} : {}]}
data={this.state.contacts}
value={typeof this.state.invitee === "string" ? this.state.invitee : this.state.invitee.name}
containerStyle={[textStyles.container, {width: textStyles.textboxes.width}]}
placeholder={"Invite someone"}
placeholderTextColor={textStyles.datePickerTextStyle.color}
ref={(ref) => this.inviteeControl = ref}
hideResults={this.state.hideResults}
inputContainerStyle={[textStyles.container, {width: '100%', borderWidth: 0}]}
onChangeText={(text) => {
this.setState({ invitee: text });
if(this.state.invalidContact){
this.validateContact();
}
this.filterContacts(text);
}}
renderItem={({ item, i }) => (
<TouchableOpacity onPress={() => {this.setState({ invitee: item, hideResults:true, invalidContact: false })}} style={[{width: "100%"}, i > 0 ? {marginTop: 10} : {}]}>
<Text numberOfLines={1} ellipsizeMode={"tail"} style={{fontSize: responsiveFontSize(2)}}>{item.name}</Text>
</TouchableOpacity>
)}
listStyle={[{width: '100%', position: 'relative'}]}
keyExtractor={(item, i) => {return i +""}}
listContainerStyle={[textStyles.container, {width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%', ''))), position:'absolute', left: 0, top: textStyles.textboxes.height, justifyContent: 'center', alignItems: 'center', zIndex:300}]}
autoFocus={true}
blurOnSubmit={false}
underlineColorAndroid='transparent'
/>
<TouchableOpacity activeOpacity={1} style={[{width: this.state.addNewInvitee ? '10%':'20%', ...Util.filterObject(textStyles.textboxes, ["width", "minWidth"])}, !this.state.addNewInvitee? textStyles.lastTextBoxInFirstRow : {}, !this.state.addNewInvitee? textStyles.lastTextBoxInLastRow : {}, this.state.invalidContact ? {backgroundColor : '#dd4f42'} : {}]} onPress={this.addInvitee.bind(this)}>
{!this.state.invalidContact ? <Text style={[{fontSize: this.state.addNewInvitee ? responsiveFontSize(3) : responsiveFontSize(4), alignContent: 'center', justifyContent: 'center', textAlign:'center', textAlignVertical: 'center', marginTop: this.state.addNewInvitee? 11: 5}, this.state.addNewInvitee ? {marginRight: 2} : {}]}><Emoji name={"heavy_plus_sign"} /></Text> : null}
</TouchableOpacity>
{this.state.addNewInvitee ? addNewInviteeCancelBtn : null}
</View>
{this.state.invalidContact ? invalidInviteeText : null}
</View>
</KeyboardAvoidingView>
</ScrollView>
const AddViewInviteeStyles = StyleSheet.create({
inviteeInputMainView: {
alignItems: 'center',
marginTop: 40,
marginBottom: 20
},
inviteeInputInstructionText: {
...textStyles.requiredNotice,
...textStyles.notifyTextStyle,
fontSize: responsiveFontSize(2),
...Platform.select({
android:{
width: responsiveWidth(90)
}
})
},
inviteeInputAutocompleteView:{
...textStyles.container,
flexDirection: 'row',
...Platform.select({
android: {
width: responsiveWidth(parseInt(textStyles.textboxes.width.replace('%' , ''))),
},
ios:{
width: textStyles.textboxes.width
}
})
},
inviteeInputAutocomplete: {
...textStyles.textboxes,
...textStyles.firstTextBoxInFirstRow,
...textStyles.firstTextBoxInLastRow,
width: '100%'
}
});
const formStyles = StyleSheet.create({
container: {
...appStyles.container,
flexGrow: 1,
width: '100%',
}
});
const appStyles = StyleSheet.create({
container: {
backgroundColor: '#e9dec2',
}
});
const textStyles = StyleSheet.create({
container: {
alignItems: 'center',
},
textboxes: {
color: '#3c3b5f',
backgroundColor: '#F0F8FF',
width: '80%',
paddingLeft: 5,
paddingRight: 2,
minHeight: 35,
height: 50,
borderBottomColor: '#fbdd07',
borderBottomWidth: 1,
},
requiredNotice: {
color: 'grey',
fontSize: 13,
marginTop: 70,
},
firstTextBox: {
marginTop: 70,
borderTopLeftRadius: 8,
borderTopRightRadius: 8
},
firstTextBoxInFirstRow: {
borderTopLeftRadius: 8,
},
lastTextBoxInFirstRow: {
borderTopRightRadius: 8,
},
firstTextBoxWithNotice: {
borderTopLeftRadius: 8,
borderTopRightRadius: 8
},
textBoxInRow: {
borderRightWidth: 1,
borderBottomColor: '#fbdd07',
//borderRightColor: '#fbdd07'
},
notifyTextStyle: {
marginTop: '7%',
fontSize: responsiveFontSize(4),
fontWeight: "300"
}
})