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

}

Did you try giving your `FlatList` a `style` prop? In your case, I think `style={{flex:1}}` would do — Ron B., Oct 31 '21 at 20:33

score 1 · Answer 1 · answered Nov 01 '21 at 09:04

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.

score 0 · Answer 2 · edited Aug 17 '22 at 11:19

0

don't use this.renderItem use only renderItem

edited Aug 17 '22 at 11:19

Saeed Zhiany

2,051
9
30
41

answered Aug 17 '22 at 07:09

Rajan rek

322
2
8

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Saeed Zhiany Aug 17 '22 at 11:19

ReactNative FlatList not rendering

2 Answers2