react native - Flat list does not show

Question

I am trying to create something like a grid, and use as buttons , i am in wonder why the Flatlist does not show..

My code looks like this :

import React, { Component } from 'react';
import { Platform, StyleSheet,Text, View , Image, TextInput, TouchableOpacity, Alert, Linking, Dimensions, FlatList} from 'react-native';

const data  = [{key : 'SWIFT'}, {key: 'Transfers'}, {key: 'Bill Payments'}, {key : 'New Account'}];

export default class Home extends Component {
  
    constructor(props) {
    super(props);
    this.state = {
    };
  }

  renderItem = ({item, index}) =>{
    return(
        <View style ={styles.item}>
            <Text style = {styles.itemText} >{item.key}</Text>
        </View>
    );
  };

  render() {
    return (
      <View>
        <Text style={styles.welcomeText}> Welcome , XXXXXXXX!  - XXXXX  </Text>
        <Text style={styles.balanceText}> 470,000.00 </Text>
        <View
        style={{
            borderBottomColor: '#696b69',
            borderBottomWidth: 1,
         }}
        />
        <View>
            <FlatList
            data = {data}
            style = {styles.container}
            renderItem = {this.renderItem}
            />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    welcomeText :{
        margin : 10,
        fontSize : 13,
        fontFamily : 'Verdana',
        fontWeight : 'bold',
        flexDirection : 'row'
    },

    balanceText:{
        margin : 10,
        fontSize : 22,
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    accountNumText :{
        margin : 10,
        fontSize : 13,
        textAlign : 'right',
        fontFamily : 'Verdana',
        fontWeight : 'bold'
    },
    container:{
        flex :1,
        marginVertical :20
    },
    item : {
        backgroundColor : '#030303',
        alignItems: 'center',
        justifyContent : 'center',
        flex : 1,
        margin : 1,
        height : Dimensions.get('window').width / 3
      },
      
      itemText:{
        color: '#fff'
      }
});

Kindly assist, there seems to be something i am not getting correctly. It is supposed to get information from that const data and display inside the Flatlist, for some reason, Its not doing so.

question from:https://stackoverflow.com/questions/65647183/flat-list-does-not-show

Answer 1

Wotking Example: Expo Snack

Remove the style given to FlatList

<FlatList
    data={data}
    renderItem={this.renderItem}
/>