Invariant Violation: View config getter callback for component `div` must be a function (received `undefined`)

Question

i am getting error - Invariant Violation: View config getter callback for component div must be a function (received undefined). Make sure to start component names with a capital letter. in below code, can anyone help me to find the bug? All component are capital and rest are checked too.

import React from "react";
import { Pressable, StyleSheet, Text, TouchableOpacity } from "react-native";
import { FlatList } from "react-native-web";

export default function ListItem(props) {
  const onDelete = (goalId) => {
    props.setCourseGoal((currGoal) => {
      return currGoal.filter((goal) => goal.key !== goalId);
    });
  };

  return (
    <FlatList
      data={props.courseGoal}
      keyExtractor={(item, index) => item.key}
      renderItem={(itemData) => (
        <TouchableOpacity
          activeOpacity={0.2}
          style={styles.touchList}
        >
          <Text style={styles.listData}>{itemData.item.value}</Text>
          <Pressable style={styles.closeBtn} title="Click Me !" onPress={onDelete.bind(this, itemData.item.key)}>
            <Text>❌</Text>
          </Pressable>
        </TouchableOpacity>
      )}
    />
  );
}

const styles = StyleSheet.create({
  touchList: {
    flexDirection: "row",
    marginVertical: 5,
  },

  listData: {
    width: "90%",
    textAlign: "center",
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
    marginHorizontal: 5,
  },
  closeBtn: {
    color: "black",
    justifyContent: "space-around",
    padding: 10,
    borderRadius: 10,
    borderWidth: 1,
  },
});

Answer 1

Found the solution - its on line 3 , import { FlatList } from "react-native-web"; need to import react-native