why is it showing me blank screen?

Issue

App.tsx

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  Pressable,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import Home from './screens/Home';
import Items from './data.json';

const totalHeight = Dimensions.get('window').height;

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <StatusBar />
      <View style={styles.container1}>
        <Home />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container1: {
    flex: 1,
  },
  
});

export default App;

Home.tsx

import {
  Dimensions,
  FlatList,
  Image,
  Pressable,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import React from 'react';
import Items from '../data.json';

const totalHeight = Dimensions.get('window').height;
const Home = () => {
  return (
    <View style={styles.container}>
      <FlatList
        contentContainerStyle={styles.itemsContainer}
        data={Items.items}
        numColumns={2}
        keyExtractor={(item, idx) => item + String(idx)}
        renderItem={({item}) => (
          <Pressable style={styles.itemContainer}>
            <Image style={styles.image} source={{uri: item.img}} />
            <Text style={styles.text}>{item.name}</Text>
          </Pressable>
        )}
      />
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
    height: totalHeight,
  },
  itemsContainer: {
    flex: 1,
    gap: 4,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  itemContainer: {
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#fff',
    width: 100,
    height: 100,
    borderRadius: 15,
    margin: 30,
  },
  image: {
    height: 50,
    width: 50,
  },
  text: {
    color: 'black',
    fontSize: 20,
  },
});

if I call the Home component without Scroll view it renders the data but with a virtualization error but if i remove Scroll view it just show blank screen

I removed the view from main components to see if there any conflict it has with flat list but still it doesn't work

please find mw a solution I'm a newbie in react native

Solution

I did tried the code you provided, itemsContainer: { flex: 1, gap: 4, ...}

In here just remove flex: 1,

    itemsContainer: {
        gap: 4,
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: 'maroon',
      },

(Quick fix... cannot explain this behavior of react native)

Answered By - talhamaqsood890