byteburgers / react-native-autocomplete-input

Pure javascript autocomplete input for react-native
https://byteburgers.com/autocomplete
MIT License
818 stars 255 forks source link

On renderItem, impossible to click on TouchableOpacity #201

Closed taeyongkim95 closed 3 years ago

taeyongkim95 commented 3 years ago

I have a TouchableOpacity rendering inside the renderItem. However I cannot get it to register a click or touch no matter what I do with different zIndex styling or absolute positioning on all the different style Props that are listed on the github home. Any ideas? Here is my code:

` return (

setShowList(true)} onBlur={() => setShowList(false)} value={searchQuery} onChangeText={(text)=>fetchData(text)} placeholder={placeholder} style={styles.input} inputContainerStyle={styles.inputContainer} renderItem={({item}) => ( { console.log("yo"); setSearchQuery(item); }} style={styles.itemText} > {item.title} )} /> ) `
taeyongkim95 commented 3 years ago

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#3eb489', justifyContent:'center', alignItems:'center' }, inputAndButton: { zIndex:7000, flexDirection: 'row', position:'absolute' }, inputContainer: { borderWidth: 0, alignSelf: 'center' }, input: { borderRadius:8, padding:10, backgroundColor: 'white', borderWidth:0, flex:5, fontFamily: 'OpenSans_400Regular', zIndex:6000 }, itemText: { zIndex:7000, position:'absolute' }, button: { flex:1, padding:10, borderRadius:8, backgroundColor:'#1B4E3B', marginLeft:10 } });

This is my stylesheet. note: I don't know why I can't get the github comment to format itself to make it more readable. I apologize in advance

tpanagos commented 3 years ago

@taeyongkim95 did you find a work-around? i have the same problem.

taeyongkim95 commented 3 years ago

@taeyongkim95 did you find a work-around? i have the same problem.

Nope. I think I ended up using FlatList right below a regular Input element

elvesw commented 3 years ago

I have the same problem, so I added the flatListProps

flatListProps={{ keyExtractor: (_, index) =>key${index}, renderItem: ({ item }) => ( <Text onPress={() => selectName(item)}>{item}</Text> ), }}

Unable to remove renderItem, does not work and is required I left the code below, useless at the time

if remove Erro: Property 'renderItem' is missing in type index.d.ts(83, 5): 'renderItem' is declared here.

`renderItem={({ item }) => ( <TouchableOpacity onPress={() => selectName(item)}>

{item}
    </TouchableOpacity>

)}`

waiting for bug fix