Closed Muirik closed 3 years ago
I am running into an issue, similar to what was referenced here: https://github.com/mrlaessig/react-native-autocomplete-input/issues/169, where, in Android, I am not able to select list items that overlap another view. I can see them displaying overtop the other view, but they are not selectable. Only the menu items appearing over the parent view are actually selectable. From research, I also see people ran into this with react-native-dropdown-picker: https://github.com/hossein-zare/react-native-dropdown-picker/issues/40.
react-native-dropdown-picker
Is there a resolution or workaround for this?
const renderAutoCompleteNameSection = () => { return ( <View style={styles.forms.fieldContainer} keyboardShouldPersistTaps='always'> <Text style={styles.forms.fieldLabel}>Full Name</Text> <View style={{ width: '100%', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start', position: 'absolute', padding: 10, zIndex: 99, }}> <Autocomplete autoCapitalize={"words"} keyboardShouldPersistTaps='always' autoCorrect={false} containerStyle={ styles.forms.autocompleteContainer } data={getDataList()} defaultValue={this.props.visit.verification.name.value ? this.props.visit.verification.name.value : query} inputContainerStyle={{ left: 100, borderWidth: 0 }} listContainerStyle={ styles.forms.listContainerStyle } onChangeText={(value) => { this.setState({ storedValueAssigned: false }); chillax('visitUpdateTextField-SigneeName', () => { let visit = clone(this.props.visit); visit.verification = { ...visit.verification, name: { value: value, lastUpdate: Date.serverTime() }, } this.props.updateVisit(visit); this.updateNamesArr(value); }); this.setState({ query: value, assignedStoredValue: false }); }} placeholder="name" flatListProps={{ keyboardShouldPersistTaps: 'always', keyExtractor: (name) => name.name, renderItem: ({ item: { name } }) => ( <TouchableOpacity onPress={() => this.setState({ query: name, storedValueAssigned: true }, () => { chillax('visitUpdateTextField-SigneeName', () => { let visit = clone(this.props.visit); visit.verification = { ...visit.verification, name: { value: this.state.query, lastUpdate: Date.serverTime() }, } this.props.updateVisit(visit); this.setState(this.state); }); })}> <Text style={{ padding: 5 }}>{name}</Text> </TouchableOpacity> ) }} /> </View> </View> ) }
Styling looks like this:
import Colors from "./Colors"; const styles = { sectionContainer: { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', marginBottom: 10, }, sectionLabel: { fontSize: 17, color: Colors.text, textAlign: 'center', }, fieldContainer: { width: '100%', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start', padding: 20, borderBottomColor: Colors.borderLight, borderBottomWidth: 1, }, autocompleteContainer: { flex: 1, left: 150, position: 'relative', zIndex: 4, right: 0, alignSelf: 'center', justifyContent: 'flex-end', }, listContainerStyle: { right: 10, zIndex: 200, position: 'relative', elevation: Platform.OS === 'android' ? 50 : 0, }, fieldLabel: { alignSelf: 'center', fontSize: 15, fontWeight: 'bold', paddingRight: 5, color: Colors.text, width: '40%', }, field: { flex: 1, flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-end', textAlign: 'right', maxHeight: 200, fontSize: 15, color: Colors.text, borderWidth: 0, }, fieldOverlay: { position: 'absolute', height:'100%', width: '100%', opacity: .5, zIndex: 1, }, switch: { width: 50, }, submitButton: { flexDirection: 'row', justifyContent: 'center', }, }; styles.textArea = { ...styles.field, width: '100%', textAlign: 'left', } export default styles;
how to fix it?
I am running into an issue, similar to what was referenced here: https://github.com/mrlaessig/react-native-autocomplete-input/issues/169, where, in Android, I am not able to select list items that overlap another view. I can see them displaying overtop the other view, but they are not selectable. Only the menu items appearing over the parent view are actually selectable. From research, I also see people ran into this with
react-native-dropdown-picker
: https://github.com/hossein-zare/react-native-dropdown-picker/issues/40.Is there a resolution or workaround for this?
Styling looks like this: