React Native number of components in one row - reactjs

Question

I treat it like an exercise. There are 28 components. I want to have maximum 4 rows of components, where in each row there is maximum 7 components and minimum 1 depending on screen size (28 rows then). Could you help me how to accomplish this? I know I can use flex-wrap: wrap style but I want to have maximum 7 components in a row. Help me please with this as Im new to React Native and Flexbox.
<View style={styles.container}>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'red'}}></View>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'green'}}></View>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'yellow'}}></View>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'brown'}}></View>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'blue'}}></View>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'red'}}></View>
<View style={{ flex: 1, margin: 2, height: 40, backgroundColor: 'green'}}></View>
.
.
.
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
});

Answer 1

This problem can't be solved in bootstrap way (column, row stuff etc). Flexbox lacks the capability to make specific number of components appear in a row depending upon screen size.
You need to use ListView such that ListView renders 7 components in a row. ListView's renderRow function iterates over an array and displays content of each index of that array in a row. So, at each index you need to define json containing 7 attributes and return all these attributes in the form of an array to make them appear in a row.
In my project, I had to show 3 or less images in a row (as displayed in Media section of attached image) so I used the above mentioned approach to achieve this. Please find below my code. This might help you.
constructor() {
// data saved in state
this.state = {
mediaFiles: [{image: "image link"},
{image: "image link"},
{image: "image link"},
{image: "image link"},
{image: "image link"},
{image: "image link"},
{image: "image link"},
{image: "image link"},
],
dataSource: ds.cloneWithRows([])
}
}
componentDidMount() {
var temp = [];
//to ensure three images appear in a row
for (var index = 0; index < this.state.mediaFiles.length; index = index + 3) {
temp.push({
image1: this.state.mediaFiles[index].image,
image2: (index + 1) < this.state.mediaFiles.length ? this.state.mediaFiles[index + 1].image : null,
image3: (index + 2) < this.state.mediaFiles.length ? this.state.mediaFiles[index + 2].image : null
});
}
this.setState({
dataSource: this.state.dataSource
.cloneWithRows(temp)
});
}
renderMediaThumbnails(rowData) {
var mediaThumbnails = [],
key = 0;
for (var attribute in rowData) {
if (rowData[attribute]) {
mediaThumbnails.push(
<View key={key++} style={Styles.imageWrapper}>
<Image style={Styles.media} source={{uri: rowData[attribute]}} />
</View>)
}
}
return mediaThumbnails
}
renderRow(rowData) {
return (
<View style={Styles.mediaWrapper}>
{this.renderMediaThumbnails(rowData)}
</View>
);
}
render() {
return (
<View style={Styles.statusAndMedia}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)} />
</View>
);
}
Following are the styles:
mediaWrapper: {
flex: 1,
flexDirection: "row",
justifyContent: "space-around",
marginVertical: 3,
},
imageWrapper: {
borderWidth: 2,
borderColor: "#AE8B8C"
},
media: {
height: 50,
width: 85,
resizeMode: "stretch"
}

Answer 2

Ok I think I found the solution. I set a width of a parent View to the with of screen or to the 294 (width of 7 elements + margins) if the screen size is larger. Maybe hardcoding it to 294 would be enough but Im not able to check it on small screen now.
var width = Dimensions.get('window').width;
class Schedule extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'red'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'green'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'yellow'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'brown'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'blue'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'red'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'green'}}></View>
<View style={{ margin: 1, width: 40, height: 40, backgroundColor: 'red'}}></View>
</View>
)
}
};
export default Schedule;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
width: width > 294 ? 294 : width
},
});

Answer 3

ListView is deprecated now , you can use SectionList or FlatList instead.