Is it possible to show the results list in a ScrollView?

[cfkenandy]

Thanks for this awesome component!
If I type something in the suggestion box and there a lot of results, the keyboard covers up the results. Is there a way to render the results list in a ScrollView or something like it? We would like to be able to scroll through the list and not have to type until the result renders above the keyboard without it covering it? Can I use onStartShouldSetResponder? I'm not sure how to use it.

[naomipol]

I've tried setting the suggestion list's height to the remaining space on top of keyboard. It helped reduce the list size and I also could see a scroll indicator inside, but not able to scroll.
Do you have any idea how to make this work?
I believe it has something to do with the onStartShouldSetResponder, but have no idea how to use it...

Thanks!

[avesgit]

yes im interestiong too

[naomipol]

I've figured it out, in case it helps someone...

First set a maxHeight and pass it through the listStyle prop. This will cause the result list to scroll, in case your autocomplete is not nested inside a ScrollView, like in my case.
In case it is, the list will not scroll according to this issue: facebook/react-native#1966 .

To fix it you need to do the following:

Add the following code as a prop to the parent View which wraps the ScrollView

onStartShouldSetResponderCapture={() => {
    this.setState({ enableScrollViewScroll: true });
}}

Add scrollEnabled={this.state.enableScrollViewScroll} prop to the ScrollView

Add the following prop to the Autocomplete

onStartShouldSetResponderCapture={() => {
     this.setState({ enableScrollViewScroll: false });

    // you should hold a ref to the autocomplete (in this case called 'autocomplete' 
    // in order to access the ListView's ref

     if (this.autocomplete.resultList.scrollProperties.offset === 0 && 
         this.state.enableScrollViewScroll === false) {
       this.setState({ enableScrollViewScroll: true });
     }
 }}

This works very well on IOS and Android both, scrolls the ListView if the touch is on List and else it scrolls the ScrollView.

[cfkenandy]

@naomipol , Your maxHeight solution worked great! Thank you so much! I didn't have my autocomplete nested in ScrollView .

[arminghm]

@naomipol When click on the TextInput for typing I face this issue:

Cannot read property "scrollProperties" of null

That's because the resulsList of autoComplete is null.
I added another condition to check that the resultList is not null:
if (this.refs.autoComplete.resultList !== null && this.refs.autoComplete.resultList.scrollProperties.offset === 0 && this.state.enableScrollViewScroll === false) { this.setState({enableScrollViewScroll: true}); }

but it only gets the scroll for the first time, after first scroll I can not have the scroll on the resultList and it scroll the parent scrollView.

Do you have any Idea about this?

[hirani89]

@cfkenandy Can you please share your code as you mention that you do not have to AutoComplete in a ScrollView. When I put my AutoComplete in a ScrollView, the list does not show.

Regards,

[ghost]

@naomipol can you please share your entire code as i am new to react native and not getting "refs" thing. Or my issue is posted here please have a look and provide me a fix. Thank you in advance.

[TonnelierFlorian]

@naomipol , Your maxHeight solution worked great on iOS but the list is still not scrollable on Android, do you have any idea about the reason ? Thanks !

[FAIZVEK]

How to put item name on input box and suggestion box hide ?

[paveltar]

@naomipol When click on the TextInput for typing I face this issue:

Cannot read property "scrollProperties" of null

That's because the resulsList of autoComplete is null.
I added another condition to check that the resultList is not null:
if (this.refs.autoComplete.resultList !== null && this.refs.autoComplete.resultList.scrollProperties.offset === 0 && this.state.enableScrollViewScroll === false) { this.setState({enableScrollViewScroll: true}); }

but it only gets the scroll for the first time, after first scroll I can not have the scroll on the resultList and it scroll the parent scrollView.

Do you have any Idea about this?

What's the solution for this problem now with resultList is an instance of FlatList which does not have scrollProperties?

[FauricioValencia]

Yeah, just need to add listStyle with the styles :{maxHeight:350} to <Autocomplete/>
something like this:
<Autocomplete listStyle={{maxHeight:350}} />

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.