Unable to scroll on Android

[kristianskogberg]

Hi, I found this addon a few days ago and I've been using it in my project, but for some reason the suggestions list is not scrollable for me when using android (works fine for ios though). I've tried a lot of things that have worked for others but so far none of them has worked for me. Is there a fix for this? Thanks in advance.

[onmotion]

Hi! Please try look to the proper layout example https://github.com/onmotion/react-native-autocomplete-dropdown/blob/main/example/App.js
Also suggestion - try temporary set different background colors to underlaying layers maybe some layers not filling the space

[kristianskogberg]

Thanks for the quick reply, I looked at the example and applied it to my code but I got a problem. When I wrap my autocomplete component inside a ScrollView it disappears from my screen after the components below it are rendered (it's located at the top of my homescreen above other components). I don't want to make the whole homescreen component scrollable (just the suggestion box), how would I go about this?

[onmotion]

I think you have to set the height of the parent dynamically, otherwise it's impossible because it's like platform renderer works. So it's not related to the lib or RN itself.

[Arthur-Noh]

Hello friend.
I faced the same issus. but i have solved it now.
In my case, zIndex was the problem.

When I saw this library 'troubleshooting', i just made my component that set fixed zIndex(like... z-index: 5).
That was working only iPhone, not android(same problem, no scrolling dropdown).
Check if the zIndex is fixed.

ex)
before
<View style={{ zIndex: 1 }}>

after (only setting in ios)
<View style={[ Platform.select({ ios: { zIndex: 1 } }) ]}>

[MagicMirouff]

Hi
I had the same issue.

Fixed by changing the scrollview library:

import {ScrollView} from 'react-native-gesture-handler';
 ScrollViewComponent={ScrollView}

[anstapol]

Same happened to me, tried zIndex no luck...

[sangayt1997]

same happen to me as well. Any workaround for this issue???

[hardikcc]

I am also facing same issue, tried zIndex, changing scrollview library as well. Nothing works. Any suggestions?

[anstapol]

Guys from what I saw and tried I came to the conclusion that it's unfixable.
You cannot have dynamic absolute scrollable list on react native.
The only way is to have ScrollView or FlatList alike elements in the middle of your "body".
If you need it to me isolated just create a modal with an input and suggestions.

[Arthur-Noh]

How did you write the code?
I'm trying to reproduce the error, so I can't reproduce it all of a sudden.
Is there a code that can reproduce the error?

This is my code. There are no error in this code.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { AutocompleteDropdown, TAutocompleteDropdownItem } from 'react-native-autocomplete-dropdown';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const TestPage = () => {

    const [ value, setValue ] = useState<string>('');

    const OPTIONS = [
        { id: 'apple', title: 'apple' },
        { id: 'banana', title: 'banana' },
        { id: 'cherry', title: 'cherry' },
        { id: 'dragon', title: 'dragon' },
        { id: 'eggplant', title: 'eggplant' },
        { id: 'fig', title: 'fig' },
        { id: 'grape', title: 'grape' },
        { id: 'hazelnut', title: 'hazelnut' },
        { id: 'iceberg', title: 'iceberg' },
        { id: 'java', title: 'java' },
    ];

    return (
        <View>
            <KeyboardAwareScrollView>
                <Text>Test page</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>{`selected item : ${value}`}</Text>
                <Text>.</Text>

                <AutocompleteDropdown
                    dataSet={OPTIONS}
                    onSelectItem={(item: TAutocompleteDropdownItem) => {
                        if (item === null || item.id === null) {
                            return;
                        }
                        setValue(item.id);
                    }}
                />

                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
                <Text>.</Text>
            </KeyboardAwareScrollView>
        </View>
    );
};

export default TestPage;

[onmotion]

I think you'll see the error if you try to wrap the dropdown to non-flex View. The problem is Android doesn't support true overflow, so you need to stretch your outer view first

[enisze]

I have the same issue. On iOS it works, but on android it does not.
So is there no fix for this?

[saheem128]

@kristianskogberg
Replacing import of FlatList from react-native by react-native-gesture-handler should handle this. I have created a fork of this package and re-published here: rn-auto-dropdown, for lazy people like me.
The solution isn't ideal so I don't see a point of creating a PR.

NB: Watch out for react-native-gesture-handler version diff.

[jagataess]

I am also facing the same issue. Tried every possible solution but nothing worked.
I think there's no fix for this but would appreciate if anyone gives a working solution.

[ChetanPatelSS]

I am also facing the same issue.
I think there's no fix for this but would appreciate if anyone gives a working solution.