-
-
Notifications
You must be signed in to change notification settings - Fork 57
Description
Placing a FlatList inside a dialog causes an error:
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.
This is probably a result of the internal dummy ScrollView inside Dialog.tsx.
One workaround might be to make the internal dummy ScrollView horizontal instead of vertical, but then placing a horizontal FlatList inside the dialog would probably not work.
Another possibility might be to use a dummy VirtualizedList or FlatList instead of a dummy ScrollView, but then certain required props (like renderItem) would have to be specified too.
Just wanted to get your thoughts on this and see if adding list support is something you can easily do. Thank you so much!
Reproducible example
import {useState} from 'react';
import {Button, FlatList, Text, View} from 'react-native';
import {ConfirmDialog} from 'react-native-simple-dialogs';
function App() {
const [dialogVisible, setDialogVisible] = useState(false);
return (
<>
<ConfirmDialog
title="Dialog"
visible={dialogVisible}
onTouchOutside={() => setDialogVisible(false)}
negativeButton={{title: "Cancel", onPress: () => setDialogVisible(false)}}
positiveButton={{title: "OK", onPress: () => setDialogVisible(false)}}>
<FlatList
data={["List item 1", "List item 2", "List item 3"]}
renderItem={({item, index, separators}) => (
<Text>{item}</Text>
)} />
</ConfirmDialog>
<View style={{marginTop: 100, alignSelf: "center"}}>
<Button title="Open dialog" onPress={() => setDialogVisible(true)} />
</View>
</>
);
}
export default App;
Environment details
react-native 0.84.0
react-native-simple-dialogs 3.0.1
Tested in Android 16 (API 36.1) and iOS 26.2