Autocomplete suggestions are not displaying (Android)
edwinjue opened this issue · 38 comments
I tried running your Example.js on both a real device and an android emulator and the autocomplete window does not show up when I enter the letter 'P' in the input field. What I'm expecting is a dropdown that shows the 3 titles as per your animated gif. Is there a known issue with android or any reason why the example isn't working as expected?
I also tried adding a console.log to the 'onShowResult' event and it never outputs to Logcat (which makes me believe something isn't right)
Thanks in advance
I also have same issue. If you solved it, let me know. I waste many time for fixing this issue.
Thanks for reporting the issue! Android is such a PITA. Tried to run it in the emulator ether the app or the emulator os constantly crashing. As soon I have some more time I will investigate further.
Thanks @l-urence, I appreciate it. Until the fix is released, is there another branch or version you could point us to that works for Android?
@l-urence, it works! But the "Autocomplete" component must be enclosed in a "View" component with style={{zIndex:1}} as per solution to #21. Please keep us updated when the fix is released. Thanks again buddy
The problem with Android is that it doesn't support overflows (or at least not in RN). This is the reason why there is no suggestion list popping-up, because it is hidden by the parent view. Right now the best solution to go with Android is to use the v1.1.2 release until overflows are supported by RN for Android.
Thanks @l-urence. v1.1.2 works pretty well actually.
I'm afraid it's not possible to solve this using a single component.
The dropdown list needs to be neighbour to the TextInput in order to be able to overlap other content.
I don't think this will change in upcoming versions of RN.
Android has a very different rendering system than iOS.
If Autocomplete is sibling of other views it does not either:
<View style={{flexDirection:'row', borderBottomWidth: 1, borderBottomColor: 'rgb(197,195,201)', alignItems: 'center', position: 'relative', zIndex: 1,backgroundColor: '#fff'}}>
<View style={{flex: 1}}>
...
</View>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
data={((visitors.length === 1 && comp(query, visitors[0].name)) || this.state.clicked) ? [] : visitors}
defaultValue={query}
containerStyle={{borderWidth: 0, zIndex: 1}}
inputContainerStyle={{borderWidth: 0, margin: 0}}
onChangeText={text => {this.setState({ query: text, clicked: false }); console.log(visitors)}}
placeholder="Enter visitor name"
listStyle={{zIndex: 1, position: 'absolute'}}
style={{backgroundColor: 'transparent', fontSize: 14}}
renderItem={({ name }) => (
<TouchableOpacity style={{padding: 5}} onPress={() => this.selectQueryListItem(query, true, name)}>
<Text>
{name}
</Text>
</TouchableOpacity>
)}
/>
<TouchableOpacity
style={{backgroundColor: '#18AEC3', padding: 10}}
onPress={()=>...}
>
...
</TouchableOpacity>
</View>
Had to add zIndex to listStyle and containerStyle because other siblings would overlap it.
How about using -
https://gist.github.com/tioback/6af21db0685cd3b1de28b84981f31cca
as suggested here - facebook/react-native#6802
v3.0.0 will simplify the integration into Android.
I will close this issue for now, because this is not going to change until there is some kind of support for overflows in RN for Android.
I'm still facing issue making it work, I'd appreciate if anyone can spot where I'm going wrong, auto complete list is displaying inside the container view and not outside of it. Working as expected on iOS
This is my code:
<Autocomplete data={['data']}
defaultValue={[]}
hideResults={true}
placeholder={strings.search_countries}
listContainerStyle={{ width: '107.9%', zIndex: 99999999 }}
underlineColorAndroid='transparent'
containerStyle={{ width: '90%', borderWidth: 0, borderColor: 'transparent' }}
inputContainerStyle={{ paddingLeft: 5, borderWidth: 0, borderColor: 'transparent' }}
onChangeText={this.handleOnChange}
renderItem={
item => (/.Item Component./)
}
/>
<View style={[styles.contentContainer, { zIndex: 2 }]}>
<View style={[styles.cardRow, { zIndex: 2 }]}>
<View style={[styles.cardRow, { zIndex: 2 }]}>
~~~ AUTO COMPELTE IS RENDERED HERE ~~~~
</View>
</View>
</View>
Card Row style:
flexDirection: 'row',
height: 40,
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
width: '100%',
backgroundColor: '#FFFFFF',
shadowOpacity: 1,
shadowColor: '#cccccc',
shadowOffset: { width: 1, height: 1 },
elevation: 1
contentContainer Style:
contentContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignContent: 'center',
},
I added this line to the Autocomplete props, and it worked like a charm, hope this works for you too!
listStyle={{zIndex: 1, position: 'absolute'}}
It was my messed up view, fixed my views layout and now all is working, sorry for false alarm :)
I added this line to the Autocomplete props, and it worked like a charm, hope this works for you too!
listStyle={{zIndex: 1, position: 'absolute'}}
Not work for me ! Pls anyone help me
Is the absolute positioning for Android in docs and examples in this repo still relevant? I see that overflow support has been added since RN 0.57: facebook/react-native@b81c8b5
Not working if it is put inside a parent component and the parent component has a sibling below it, even if autocomplete input's parent has position: absolute and zIndex set. Please reopen issue.
I have tried every possible solution, suggested here. My Component is working fine on ios. But on android list is showing , i can't click. TouchableOpacity is not working. Instead the scroll is getting all the touch events, and other components. Any help would be much appreciated.
I have tried every possible solution, suggested here. My Component is working fine on ios. But on android list is showing , i can't click. TouchableOpacity is not working. Instead the scroll is getting all the touch events, and other components. Any help would be much appreciated.
Me too, any update on this? I'm still waiting for the final solution.
I have tried every possible solution, suggested here. My Component is working fine on ios. But on android list is showing , i can't click. TouchableOpacity is not working. Instead the scroll is getting all the touch events, and other components. Any help would be much appreciated.
Me too, any update on this? I'm still waiting for the final solution.
same here, android fixes makes the options not clickable.
Same here :(
same
same
Suggestions were not showing either.
Fixed it by adding renderTextInput prop to the autocomplete props
My example here :
renderTextInput={(text) => (
<TextInput
placeholder={'Code postal*'}
style={{
flex: 1,
padding: 0,
color: 'lightgray',
marginTop: 7,
marginBottom: 5,
paddingRight: 11,
backgroundColor: '#f1f0f3',
borderRadius: scale(25),
width: '100%',
height: scale(50)
}}
onChangeText={(text) => {
setZipChoosen(false);
setZipCodeQuery(text);
testZipCode(text);
}}
value={zipCodeQuery}
defaultValue={zipCodeQuery}
/>
)}
I hope it does the job for you too
I have tried every possible solution, suggested here. My Component is working fine on ios. But on android list is showing , i can't click. TouchableOpacity is not working. Instead the scroll is getting all the touch events, and other components. Any help would be much appreciated.
I also have the same problem, can some one reopen this issue
Just add 1 line and problem solved.
listStyle={{ position: 'relative' }}
### Before
After
Bump - @mrlaessig any updates on this issue? Adding above suggestions and still cant select a list item on Android
Bump - @mrlaessig any updates on this issue? Adding above suggestions and still cant select a list item on Android
the same
@mrlaessig @IvanTrutnev yes I managed to get it to work using different styles for iOS and android. For iOS follow normal guide and for android make sure your container has position relative and set an implicit height, then your inner container should have position absolute:
droidContainer: { position: 'relative', width: '100%', height: 120, }, droidView: { width: '100%', position: 'absolute', zIndex: 1, flex: 1, },
This workaround might fit for some. The approach is to grow the height of the parent view together with the result List. It behaves a little bit like an accordion then. I had the best behaviour, when giving the listContainerStyle and listStyle a fixed height. If you need to have the result list as a real overlay, it is not an option.
<View style={[hideResults ? {height: 90} : {height: 280}]}>
<Autocomplete
onShowResult={() => this.showResultCheck()}
onChangeText={text => this.changeValue(text)}
listContainerStyle={{ height: 200, ...}}
listStyle={{ height: 185, ...}}
...
>
showResultCheck (){
this.setState({hideResults : true})
}
changeValue(text){
this.setState({ hideResults: false });
if (this.findItem(text).length == 0){
this.setState({hideResults : true});
}
...
}
In this way the result List does not Interfere with any touchable element in the background.
This issue was opened in 2016 and it is now 2021 and the issue is still occurring. There needs to be a clear and concise fix. Like others have said, it appears that you can't click on an item on Android, whereas it works fine on iOS.
@rabidkitten I checked this with example and it works at least on an emulator.
@mrlaessig I had the latest and I used the android emulator as well and I couldn't click or tap on an item. The drop down was working, but I couldn't select an item by tapping or clicking. I just gave up on the component altogether.
@rabidkitten This could happen if they keyboard is still open. Try to pass keyboardShouldPersistTaps: 'always' on flatListProps. See example.
I added this line to the Autocomplete props, and it worked like a charm, hope this works for you too!
listStyle={{zIndex: 1, position: 'absolute'}}
Thanks, worked Perfectly