Autocomplete suggestions are not displaying (Android)

[edwinjue]

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]

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

[mrlaessig]

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]

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]

@edwinjue Maybe try to install v1.1.2

[edwinjue]

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

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

[mrlaessig]

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]

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

[fab1an]

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]

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

[fab1an]

Android has a very different rendering system than iOS.

[DiegoGallegos4]

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]

How about using -

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

as suggested here - facebook/react-native#6802

[mrlaessig]

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.