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