How to place blocks in a row in react native?

Question

React

Hello. Unable to place blocks in a row with wrapping.
The task is this: display 4 squares on the page (so that it is the same on all devices) in a row with a transfer if it doesn’t fit.

album: {
        marginLeft: 8,
        marginRight: 8,
        paddingVertical: 8,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        flexWrap: 'wrap',
    },
    photo: {
        alignItems: 'center',
        justifyContent: 'center',
        width: Layout.window.width / 5,
        height: Layout.window.width / 5,
        marginVertical: 2,
        marginHorizontal: 2,
        borderColor: '#e5e5e5',
        borderWidth: Platform.OS === 'android' ? 1 : StyleSheet.hairlineWidth,
    },

<View style={styles.album}>
                            {album.photos.map((photo) => (
                                    <TouchableWithoutFeedback
                                        resizeMode={'contain'}
                                        key={p}>
                                            <View style={styles.photo}>
                                                <RegularText style={styles.photoText}>{photo.name}</RegularText>
                                            </View>
                                    </TouchableWithoutFeedback>
                            ))}
                    </View>

Answer 1

You can set for each square width: '25%'

Answer 2

`margin` horizontally is superfluous, in the end it is better to count everything in `%` and in total 100 in a row - this is kind of obvious