VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

[moroshan]

Environment

System: OS: Windows 10 10.0.22000 CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz Memory: 2.34 GB / 15.87 GB Binaries: Node: 16.17.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD Watchman: 20220717.224402.0 - C:\ProgramData\chocolatey\bin\watchman.EXE SDKs: Android SDK: API Levels: 16, 19, 20, 21, 26, 28, 29, 30, 31, 32, 33 Build Tools: 26.0.3, 28.0.3, 29.0.0, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0 System Images: android-28 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86 Atom_64, android-31 | Google Play Intel x86 Atom_64, android-32 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64, android-33 | Google Play Intel x86 Atom_64 Android NDK: 22.1.7171670 Windows SDK: Not Found IDEs: Android Studio: AI-212.5712.43.2112.8609683 Visual Studio: Not Found Languages: Java: 11.0.16 - C:\Program Files\OpenJDK\openjdk-11.0.16_8\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 18.0.0 => 18.0.0 react-native: 0.69.5 => 0.69.5 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Platforms

This issue related to Android, because I tested on windows machine.

Versions

• Android: 10
• react-native-geolocation: latest
• react-native: 0.69.5
• react: 18.0.0

Description

Reproducible Demo

add

<ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ flexGrow: 1 }}>
  <GooglePlacesAutocomplete />

 <View>
     <TouchableWithoutFeedback onPress={() => {}}><Text>Some text</Text></TouchableWithoutFeedback>
 </View>
</ScrollView>

[moroshan]

The warning disappears when I add

<ScrollView horizontal>
  <GooglePlacesAutocomplete />
</ScrollView>

But I don't need this horizontal.

[rishiankush]

Any updates on this? it happens on IOS only for me

[saurabhsaneja]

This fixed my issue try adding keyboardShouldPersistTaps='always' or keyboardShouldPersistTaps='handled' to your <ScrollView />.

https://stackoverflow.com/questions/61518803/react-native-virtualizedlists-should-never-be-nested-inside-plain-scrollviews

[BugraGulay]

Any solution for this. I chose elements but console error not gone anywhere.

[saurabhsaneja]

Even i am getting the console error.. i think you can add logbox to not show certain warnings

[Rc85]

I don't understand why the author decided to use a virtualized list when the API only return like 5 results.

[jackwullems]

Even i am getting the console error.. i think you can add logbox to not show certain warnings

actually it's error not warning. there is no way to ignore errors in logbox.

[saurabhsaneja]

@jackwullems so what can be done about it?

[MahbbRah]

To overcome this issue and fixed the horizontal warning as well, we can simply do a nested View as follows to the code snippet.

[alexmngn]

This issue is supposed to be resolved with React Native 0.71

https://github.com/facebook/react-native/commit/62f83a9fad027ef0ed808f7e34973bb01cdf10e9

[jackwullems]

This issue is supposed to be resolved with React Native 0.71

facebook/react-native@62f83a9

disableScroll={trrue}

[Q8root]

keyboardShouldPersistTaps='always'

Adding "keyboardShouldPersistTaps='always'" fixed the onPress not being triggered issue i have in live ios build

[yewyewXD]

   contentContainerStyle={{flex: 1}}
   keyboardShouldPersistTaps="handled"
   horizontal={true}

Solved my issue with horizontal={true} on Android. The contentContainerStyle is for the search input with have full width after setting it to horizontal (strange but dropdown works vertically), the keyboardShouldPersistTaps="handled" is to make tapping on an address selection work.

[Seanmclem]

I mean, the error goes away with me, after these changes, but a list never populates below the input with results