DraggableFlatList not rendering

Question

I am attempting to use DraggableFlatlist and nothing renders. I have tested this section of code with FlatList and it renders fine.

Test data:

    const textData = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      name: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      name: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      name: 'Third Item',
    },
  ];

Simple text to render:

  const textItem = ({ item, drag, isActive }) => (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
    }}
    >
      <Text>{item.name}</Text>
    </View>
  )

DraggableFlatList:

    return (
        <View
          style={[
            style,
            { backgroundColor: "white", padding: 25, borderRadius: 10 },
          ]}
        >
            <DraggableFlatList
               data={textData}
               renderItem={textItem}
               keyExtractor={(item) => item.id}
               style={{ flex: 1 }}
               onDragEnd={({ data }) => setData(data)}
            />
        </View>
    )

The versions are reasonably current:

react-native: "0.64.3" react-native-draggable-flatlist: "^3.0.4"

I am stumped on why DraggableFlatList will render nothing while FlatList will render the text, thoughts on what I am missing?

BTW, I did look at Draggable flatlist not rendering anything but there was no joy.

Answer 1

The solution was to add an additional prop, containerStyle={{ flex : 1 }} like this:

    return (
        <View
          style={[
            style,
            { backgroundColor: "white", padding: 25, borderRadius: 10 },
          ]}
        >
            <DraggableFlatList
               data={textData}
               renderItem={textItem}
               containerStyle={{ flex : 1 }}
               keyExtractor={(item) => item.id}
               style={{ flex: 1 }}
               onDragEnd={({ data }) => setData(data)}
            />
        </View>
    )