Only can select the first option in the dropdown on android.

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"
}

}) `

[wstock]

Using TouchableOpacity from RNGH fixed for me

import { TouchableOpacity } from “react-native-gesture-handler”;

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.