JustifyContent: «центр» в сетке React

Question

EDIT: похоже, что замена на

и отказ от StyleSheet.create и простое выполнение:

const container = {
  display: "grid",
  ...
};

решает проблему. Если бы кто-нибудь мог объяснить, почему justifyItems не работает с , это было бы полезно!

END OF EDIT ====================== ================================

У меня есть сетка с прямоугольниками, и я хочу централизовать содержание. Многие css руководства по стилю просто рекомендуют использовать justify-items: "center", однако, похоже, здесь это не работает.

Вот примерный пример, который я тестировал.

function GridPage() {
    return (
        <View style={styles.container}>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
            <View style={styles.item}></View>
        </View>
    );
}
  
export default GridPage;
  
const styles = StyleSheet.create({
    container: {
        display: "grid",
        height: 250,
        gridTemplateColumns: "1fr 1fr 1fr",
        gridTemplateRows: "auto",
        justifyItems: "center",
        alignItems: "center",
        backgroundColor: "red",
        borderColor: "green",
        borderWidth: 10,
    },
    item: {
        width: 100,
        height: 100,
        backgroundColor: "blue",
    },
});

Если вы все же запустите этот код, синие прямоугольники все равно будут наклонены влево, что указывает на то, что justifyItems: "center" игнорируется.

Синие ящики не централизованы

Однако тот же самый код работает, когда я конвертирую его в html и css. Что происходит и как я могу это решить?