Autocomplete suggestions are not displaying (Android) #20

edwinjue · 2016-09-16T03:58:04Z

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

binzailani3136 · 2016-09-16T14:49:03Z

I also have same issue. If you solved it, let me know. I waste many time for fixing this issue.

mrlaessig · 2016-09-19T05:55:42Z

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.

edwinjue · 2016-09-19T15:11:35Z

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?

mrlaessig · 2016-09-19T15:30:13Z

@edwinjue Maybe try to install v1.1.2

edwinjue · 2016-09-19T17:31:29Z

@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

mrlaessig · 2016-09-20T06:52:20Z

@edwinjue good to now. I will try to fix this latest next weekend.

mrlaessig · 2016-09-25T13:09:21Z

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.

facebook/react-native#6802

edwinjue · 2016-09-25T21:08:30Z

Thanks @l-urence. v1.1.2 works pretty well actually.

fab1an · 2016-10-02T15:14:54Z

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.

mrlaessig · 2016-10-02T20:05:01Z

@fab1an just for Android? In iOS this works well.

fab1an · 2016-10-02T21:48:32Z

Android has a very different rendering system than iOS.

DiegoGallegos4 · 2016-12-05T19:51:32Z

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.

bozzmob · 2016-12-19T12:17:42Z

How about using -

https://gist.github.com/tioback/6af21db0685cd3b1de28b84981f31cca

as suggested here - facebook/react-native#6802

mrlaessig · 2017-01-31T09:03:47Z

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.

gitpushdev · 2018-03-06T14:30:10Z

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',
    },

Johnscorps · 2018-03-07T09:17:27Z

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

gitpushdev · 2018-03-07T13:10:21Z

It was my messed up view, fixed my views layout and now all is working, sorry for false alarm :)

vandiepbui · 2019-05-17T03:59:52Z

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

fungilation · 2019-09-05T21:36:15Z

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

sorinbogdan95 · 2019-10-28T11:16:26Z

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.

Hashir524 · 2019-12-02T11:30:47Z

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.

thanhluantl2304 · 2020-03-13T08:56:58Z

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.

sabres207 · 2020-04-01T01:08:37Z

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.

sachin3072004 · 2020-05-08T02:20:37Z

Same here :(

tayloraleach · 2020-05-14T21:00:53Z

same

mixa63rus · 2020-05-26T15:20:53Z

same

isidore18 · 2020-06-04T15:51:29Z

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

MythriJL · 2020-11-12T12:15:25Z

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

VivekVithlani · 2020-12-16T10:34:00Z

Just add 1 line and problem solved.
listStyle={{ position: 'relative' }}

### Before

After

msmfsd · 2021-02-11T02:52:20Z

Bump - @mrlaessig any updates on this issue? Adding above suggestions and still cant select a list item on Android

IvanTrutnev · 2021-02-24T13:24:16Z

Bump - @mrlaessig any updates on this issue? Adding above suggestions and still cant select a list item on Android

the same

msmfsd · 2021-02-26T22:47:26Z

@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, },

jakobwak · 2021-03-19T17:54:06Z

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.

rabidkitten · 2021-05-08T23:28:03Z

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.

mrlaessig · 2021-05-14T14:32:52Z

@rabidkitten I checked this with example and it works at least on an emulator.

rabidkitten · 2021-05-15T14:31:02Z

@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.

mrlaessig · 2021-05-16T12:44:07Z

@rabidkitten This could happen if they keyboard is still open. Try to pass keyboardShouldPersistTaps: 'always' on flatListProps. See example.

hlspablo · 2021-07-20T01:21:54Z

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

mrlaessig mentioned this issue Sep 19, 2016

How to float ontop of content beneath? #15

Closed

mrlaessig closed this as completed Jan 31, 2017

Aravindhan12 mentioned this issue Feb 24, 2018

Styling issue after adding the Autocomplete Input. #77

Closed

AndreiBacescu mentioned this issue Jan 5, 2021

AutoComplete dropdown list not selecting in android. #186

Closed

Autocomplete suggestions are not displaying (Android) #20

Autocomplete suggestions are not displaying (Android) #20

Comments

edwinjue commented Sep 16, 2016

binzailani3136 commented Sep 16, 2016

mrlaessig commented Sep 19, 2016

edwinjue commented Sep 19, 2016 • edited Loading

mrlaessig commented Sep 19, 2016

edwinjue commented Sep 19, 2016 • edited Loading

mrlaessig commented Sep 20, 2016

mrlaessig commented Sep 25, 2016 • edited Loading

edwinjue commented Sep 25, 2016 • edited Loading

fab1an commented Oct 2, 2016

mrlaessig commented Oct 2, 2016

fab1an commented Oct 2, 2016 • edited Loading

DiegoGallegos4 commented Dec 5, 2016 • edited Loading

bozzmob commented Dec 19, 2016

mrlaessig commented Jan 31, 2017

gitpushdev commented Mar 6, 2018 • edited Loading

Johnscorps commented Mar 7, 2018 • edited Loading

gitpushdev commented Mar 7, 2018

vandiepbui commented May 17, 2019

fungilation commented Sep 5, 2019

sorinbogdan95 commented Oct 28, 2019 • edited Loading

Hashir524 commented Dec 2, 2019

thanhluantl2304 commented Mar 13, 2020

sabres207 commented Apr 1, 2020

sachin3072004 commented May 8, 2020

tayloraleach commented May 14, 2020

mixa63rus commented May 26, 2020

isidore18 commented Jun 4, 2020 • edited Loading

MythriJL commented Nov 12, 2020

VivekVithlani commented Dec 16, 2020

After

msmfsd commented Feb 11, 2021

IvanTrutnev commented Feb 24, 2021

msmfsd commented Feb 26, 2021

jakobwak commented Mar 19, 2021 • edited Loading

rabidkitten commented May 8, 2021

mrlaessig commented May 14, 2021

rabidkitten commented May 15, 2021

mrlaessig commented May 16, 2021

hlspablo commented Jul 20, 2021

edwinjue commented Sep 19, 2016 •

edited

Loading

edwinjue commented Sep 19, 2016 •

edited

Loading

mrlaessig commented Sep 25, 2016 •

edited

Loading

edwinjue commented Sep 25, 2016 •

edited

Loading

fab1an commented Oct 2, 2016 •

edited

Loading

DiegoGallegos4 commented Dec 5, 2016 •

edited

Loading

gitpushdev commented Mar 6, 2018 •

edited

Loading

Johnscorps commented Mar 7, 2018 •

edited

Loading

sorinbogdan95 commented Oct 28, 2019 •

edited

Loading

isidore18 commented Jun 4, 2020 •

edited

Loading

jakobwak commented Mar 19, 2021 •

edited

Loading