This one was already discussed, but from I was able to see there is still no available solution for the issue. I have read all the documents regarding the matter. The error I am getting is: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead" In the official documents on the plugin, it is suggested application of <ScrollView keyboardShouldPersistTaps={'handled'}>. However, this does not fix the issue. How can I display it inside the Scroll view? Below is my code Thanks
import React from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
export const GooglePlacesInput = () => {
return (
<GooglePlacesAutocomplete
placeholder='Search'
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: 'my Key',
language: 'en',
}}
/>
);
};
And I want to display it inside the scroll view
export const IznajmiScreen = () => (
<>
<IznajmiListContainer>
<ScrollView keyboardShouldPersistTaps={'handled'} >
<TextInput style={styles.input} placeholder="Naslov" />
<MyDatePickerStart/>
<MyDatePickerEnd/>
<GooglePlacesInput/>
</ScrollView>
</IznajmiListContainer>
</>
)
I found the solution but first do not add this,
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.']);
to your code. You are simply shutting up your application from warning you about errors.
Simply add "horizontal={true}" to any ScrollView wrapping your component like this.
<ScrollView
horizontal={true}
nestedScrollEnabled={true}
keyboardShouldPersistTaps='handled'
contentContainerStyle={{ flexGrow: 1 }}
>
<GooglePlacesAutocomplete/>
</ScrollView>
Happy coding from Nigeria :).