Q:

Why is the data from Firebase not rendering in my FlatList (React Native)?

I'm a beginner in React Native and I'm trying to display my data from Google Firebase in a FlatList. There are no errors that pop up, but nothing is shown in my list. I know that the   componentDidMount() section works, as when I add a console.log inside it shows that offers has the correct objects inside. I'm not sure why it doesn't show up on the screen though...

import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, SafeAreaView, Platform, Image, FlatList, TouchableHighlight} from "react-native";
import { List, ListItem, Divider } from 'react-native-elements';
import Icon from "react-native-vector-icons/Ionicons";

import { db } from '../config';
let offersRef = db.ref('/offers');

class Home extends Component {

  state = {
    offers: [],
    currentUser: null
  };


  componentDidMount() {
    let mounted = true;
    if(mounted){
      offersRef.on('value', snapshot => {
        let data = snapshot.val();
        let offers = Object.values(data);
        this.setState({ offers });
      });
    }
    return () => mounted = false;
  }

  pressRow()
  {
    console.log(item)
  }


  renderItem(item){
    return(
      <TouchableHighlight onPress={() => {this.pressRow(item)}}>
          <Text>
            {item.name}
          </Text>
      </TouchableHighlight>
    )
  }

  render() {
    const { currentUser } = this.state
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <FlatList>
            data = {this.state.offers}
            renderItem = {({ data }) => (
              <TouchableHighlight onPress={() => {this.pressRow(data)}}>
              <Text>
                {data.name}
              </Text>
              </TouchableHighlight>
            ) }
          </FlatList>
      </SafeAreaView>
    ); 
  }
}
export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

My code is above, it would be very much appreciated if someone is able to help! Thank you...

A:

Hey please do the following changes in your render method:-
Replace "data" in renderItem with "item" and with in renderItem where ever accordingly.
<SafeAreaView style={{ flex: 1 }}>
        <FlatList
            data = {this.state.offers}
            renderItem = {({item} ) => (
              <TouchableHighlight onPress={() => {this.pressRow(item)}}>
              <Text>
                {item.name}
              </Text>
              </TouchableHighlight>
            ) }
          />
      </SafeAreaView>

