Creating a FlatList Grid from props data - react-native

Question

Creating a screen that contains a FlatList grid of photos that I fetch from my rails API. Having trouble displaying the data - https://ibb.co/XkfSvxm. I wish for the images, regardless of how many there are, to be in a square format.
Currently, I can fetch and display the data in square photos except whenever there is 1 or 2 photos on a row. They fill the row rather than take the formatting from the formatItems method (which essentially pushes two empty items into the array forcing the data into a grid).
I've tried a bunch of things including returning the data straight from formatItems and plugging the method straight into the data of the flatlist, but then no data is loading. I also had it working well with a local SQL DB package.
How would I go around arranging so that I can format the data from props and display it correctly in the FlatList?
Here is the code:
class VaultScreen extends React.Component {
state = {
searchQuery: '',
refreshing: false,
setRefreshing: false
};
constructor(props) {
super(props);
this.state = {
items: {},
itemSelected: {}
};
this.props.fetchPosts()
}
componentDidMount() {
let itemData = this.props.posts
this.setState({
items: itemData,
});
// this.formatItems(itemData)
}
formatItems = () => {
const { items } = this.state
const newItems = []
const numberOfFullRows = Math.floor(items.length / 3);
// const numberOfFullRows = Math.floor(itemData.length / 3);
let numberOfElementsLastRow = 1
// items.length - (numberOfFullRows * 3);
while (numberOfElementsLastRow !== 3 && numberOfElementsLastRow !== 0) {
newItems.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
numberOfElementsLastRow++;
}
return this.setState({ items: newItems })
};
renderItem = ({ item, type }) => {
const { items } = this.state;
if (item.empty === true) {
return <View style={[styles.item, styles.itemInvisible]} />;
} else {
return (
<TouchableOpacity style={styles.item} onPressIn={() => this.setState({ itemSelected: item.id })} onPress={this.viewPhoto} key={item.id}>
<Image source={{ uri: item.image }} style={{ flex: 1, width: '100%', height: undefined }} />
</TouchableOpacity>
);
}
};
render() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
<FlatList
data={this.state.items}
renderItem={this.renderItem}
numColumns={3}
keyExtractor={(item, index) => index.toString()}
refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={() => this.onRefresh()} />}
/>
</SafeAreaView>
);
}
}
const mapStateToProps = state => ({
posts: state.vault.posts
})
const mapDispatchToProps = {
fetchPosts: () => fetchPosts(),
}
export default connect(mapStateToProps, mapDispatchToProps)(VaultScreen)

Answer 1

hi you can add minWidth and maxWidth styling to the parant View of the render method (in your case give style to TouchableOpacity ) value should be total_width / 3 (+-margin if you want to give) . and then add width:total_width to columnWrapperStyle of FlatList.
NOTE:
-- total_width = 100%
-- keeping minWidth and maxWidth values same will give you perfect view as per your expectation (In your case if total_width : 100% then minWidth and maxWidth values will be 30%)