Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Suggestion list presented behind other elements in the screen

See original GitHub issue

import React, { Component } from ‘react’; import { Text, StyleSheet, View, TouchableOpacity, Platform } from ‘react-native’;

import Autocomplete from ‘react-native-autocomplete-input’;

class NewScreen extends Component {

constructor(props) { this.state = { contacts: [‘Andres’, ‘Antonio’, ‘Armando’, ‘Alberto’, ‘Roberto’], query: ‘’, }; }

findContact(query) { if (query === ‘’) { return []; } const { contacts } = this.state; const regex = new RegExp(${query.trim()}, ‘i’); const conts = contacts.filter(contact => contact.search(regex) >= 0); console.log(‘CONTACTOS’, contacts); return conts; }

render() { const { query, selected } = this.state; const contacts = this.findContact(query);

return (

        <View>
          <Text>Search for Contact</Text>
          <View>
            <Autocomplete
              autoCapitalize="none"
              autoCorrect={false}
              containerStyle={Platform.OS === 'android' ? 
                   styles.androidAutocompleteContainer : styles.iosAutocompleteContainer}
              inputContainerStyle={styles.input}
              listContainerStyle={styles.listContainer}
              listStyle={styles.list}
              data={contacts}
              defaultValue={selected || query}
              onChangeText={text => this.setState({ query: text })}
              placeholder="Enter contact name"
              renderItem={item => (
                <TouchableOpacity
                  onPress={
                    () => {
                      this.setState({
                        query: '',
                        selected: item
                      });
                    }
                  }
                >
                  <Text>{item}</Text>
                </TouchableOpacity>
              )}
            />
          </View>

//random text that is also in the screen <Text>Search for Contact</Text> <Text>Name of the contact selected{‘\n’}{‘\n’}</Text> <Text> Please type the message to be send to the selected contact {‘\n’}{‘\n’}</Text> <Text> space to add first message to be send {‘\n’}{‘\n’}</Text> <Text> button to send or cancel the message {‘\n’}{‘\n’}</Text> </View> ); } }

const styles = StyleSheet.create({ androidAutocompleteContainer: { flex: 1, left: 0, position: ‘absolute’, right: 0, top: 0, zIndex: 1, width: 200, margin: 10, backgroundColor: ‘white’, borderColor: ‘red’, borderWidth: 2 }, iosAutocompleteContainer: { width: 200, margin: 10, backgroundColor: ‘white’, borderColor: ‘red’, borderWidth: 2 }, //tried different color to see if any background would cover the text list: { backgroundColor: ‘red’, }, listContainer: { backgroundColor: ‘green’, }, input: { backgroundColor: ‘blue’, } });

export default NewScreen;