React Native FlatList refuses to render content

August 1, 2022

I’ve read tens of threads on FlatList, and I can’t seem to get this to work. This is extremely basic so I must be missing something rudimentary. Why is this returning a blank screen?

import React from "react";
import { View, Text, FlatList } from "react-native";

export default function App() {
  const renderItem = ({ item }) => {
    console.log(item);
    return (
      <View>
        <Text>{item.title}</Text>
      </View>
    );
  };
  const keyExtractor = (item) => item.id;

  return (
    <View>
      <FlatList>
        data=
        {[
          { id: 1, title: "1" },
          { id: 2, title: "2" }
        ]}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      </FlatList>
    </View>
  );
}

https://codesandbox.io/s/quirky-chandrasekhar-jgjj28?file=/src/App.js

>Solution :

Your code has an error data, keyExtractor, renderItem are props for the FlatList you use them like a text/children

it must look like this:

import React from "react";
import { View, Text, FlatList } from "react-native";

export default function App() {
  const renderItem = ({ item }) => {
    console.log(item);
    return (
      <View>
        <Text>{item.title}</Text>
      </View>
    );
  };
  const keyExtractor = (item) => item.id;

  return (
    <View>
      <FlatList
        data=
        {[
          { id: 1, title: "1" },
          { id: 2, title: "2" }
        ]}
        renderItem={renderItem}
        keyExtractor={keyExtractor}>
      </FlatList>
    </View>
  );
}