Skip to content

Error when placing FlatList inside dialog #86

@sandeepsengupta

Description

@sandeepsengupta

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;
Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions