Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 30348

react-native-autocomplete-input Can only select first option in dropdown on android

$
0
0

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

})

Viewing all articles
Browse latest Browse all 30348

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>