ReactNative FlatList not rendering

Question

I am new to ReactNative programming and .tsx files in general. I'm trying to display a basic FlatList and have copied the below code from the ReactNative docs here: (https://reactnative.dev/docs/flatlist). It's only slightly modified to fit into my ReactNative app which I am editing in Visual Studio code.

Does anyone know the correct way to display a FlatList? I've spent 2-3 days tinkering with this but I'm obviously missing some crucial ingredient. Beats me.

import * as React from "react";
import { useState, Component } from "react";
import EditScreenInfo from "../components/EditScreenInfo";
import { StyleSheet, Text, View, Dimensions, TouchableOpacity, Alert, FlatList, SafeAreaView, StatusBar } from "react-native";
// import PaymentScreen from "./PaymentScreen";
import { Driver } from "../models/Driver";

// tslint:disable-next-line:typedef
const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF"
  },
  container: {
    height: 750,
    width: 750,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1,
    height:750,
    width:750
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  title: {
    fontSize: 18
  }
});

// tslint:disable-next-line: typedef
const DATA = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
    title: "First Item",
  },
  {
    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
    title: "Second Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d72",
    title: "Third Item",
  },
];

// tslint:disable-next-line:typedef
const Item = ({ item, onPress, backgroundColor, textColor }: {
  item: any;
  onPress: any;
  backgroundColor: any;
  textColor: any;
}) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
    <Text style={[styles.title, textColor]}>{item.title}</Text>
  </TouchableOpacity>
);

export default class TabFourScreen extends Component {
  drivers: Driver[] = []; // fetch these from backend... for now you can STUB

  selectedId: any = useState(null);
  setSelectedId: any = useState(null);

  renderItem: any = ({ item }: {item: any}) => {
    // tslint:disable-next-line:typedef
    const backgroundColor = item.id === this.selectedId ? "#6e3b6e" : "#f9c2ff";
    // tslint:disable-next-line:typedef
    const color = item.id === this.selectedId ? "white" : "black";

    return (
      <Item
        item={item}
        onPress={() => this.setSelectedId(item.id)}
        backgroundColor={{ backgroundColor }}
        textColor={{ color }}
      />
    );
  }

  render = () => {
    return (
      <View style={styles.page}>
        <SafeAreaView style={styles.container}>
          <FlatList
            data={DATA}
            renderItem={this.renderItem}
            keyExtractor={(item) => item.id}
            extraData={this.selectedId}
          />
        </SafeAreaView>
      </View>
    );
  }

}

Answer 1

Try to Add

flex:1 

to the Container, like this

 container: {
    flex:1 ,
    height: 750,
    width: 750,
    backgroundColor: "tomato"
  },

Answer 2

don't use this.renderItem use only renderItem

Answer 3

First of all you can't use hooks like useState in a Class Component, you have to use Function Component: https://reactnative.dev/docs/getting-started#function-components-and-class-components.

Secondly, you have set width: 750 to your SafeAreaView's style, so the text doesn't appear on the screen you see but appears before.

Try this code:

import * as React from 'react';
import { useState, Component } from 'react';
import {
  StyleSheet, Text, View, Dimensions, TouchableOpacity, Alert, FlatList, SafeAreaView, StatusBar,
} from 'react-native';
// import PaymentScreen from "./PaymentScreen";

// tslint:disable-next-line:typedef
const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
  },
  container: {
    height: 750,
    width: '100%',
    backgroundColor: 'tomato',
  },
  map: {
    flex: 1,
    height: 750,
    width: 750,
  },
  item: {
    height: 44,
  },
  title: {
    fontSize: 25,
    color: 'white',
  },
});

// tslint:disable-next-line: typedef
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

// tslint:disable-next-line:typedef
const Item = ({
  item, onPress, backgroundColor, textColor,
}) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, backgroundColor]}>
    <Text style={[styles.title, textColor]}>{item.title}</Text>
  </TouchableOpacity>
);

const TabFourScreen = () => {
  const [selectedId, setSelectedId] = useState(null);

  const renderItem = ({ item }) => {
    // tslint:disable-next-line:typedef
    const backgroundColor = item.id === selectedId ? '#6e3b6e' : '#f9c2ff';
    // tslint:disable-next-line:typedef
    const color = item.id === selectedId ? 'white' : 'black';

    return (
      <Item
        item={item}
        key={item.id}
        onPress={() => setSelectedId(item.id)}
        backgroundColor={{ backgroundColor }}
        textColor={{ color }}
      />
    );
  };

  return (
    <View style={styles.page}>
      <SafeAreaView style={styles.container}>
        <FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
          extraData={selectedId}
        />
      </SafeAreaView>
    </View>
  );
};

export default TabFourScreen;

I removed typescript just to test, feel free to add it again.