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>
    );
  }

}

```