Как разместить блоки в ряд react native?

Question

[andrei_pro]

Всем привет. Не получается разместить блоки в ряд с переносом.

Задача такая: вывести на странице по 4 квадрата (чтобы на всех девайсах было одинаково) в ряд с переносом если не влазит.

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

[Dmitry Alekseev]

Можно задать для каждого квадрата width: '25%'

Answer 2

[SerzN1]

`margin` по горизонтали лишний, в итоге лучше все считать в `%` и в сумме 100 в ряд - это вроде очевидно