flex-direction row not working in React Native-CodePudding

I'm trying to create an Andy Warhol style image for an assignment. The row container isn't rendering the images in a row, the goal being to stack the 2 row containers in to a square formation.

Here's my code so far:

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style = {styles.rowContainer}>
                    <View style = {styles('blue').img}>
                        <View style = {styles('red').subImg}>
                        </View>
                    </View>
                     <View style = {styles('black').img}>
                        <View style = {styles('green').subImg}>
                        </View>
                    </View>
                </View>
                <View style = {styles.rowContainer}>
                     <View style = {styles('purple').img}>
                        <View style = {styles('yellow').subImg}>
                        </View>
                    </View>
                     <View style = {styles('orange').img}>
                        <View style = {styles('#11E1E4').subImg}>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = (inputColor) => StyleSheet.create({
    container: {
      flex : 1,
      flexDirection: "row",
    },
    rowContainer:{
        height: 100,
        width: 200,
        flexDirection: "row",
        
    },
    img: {
        height : 100,
        width: 100,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor : inputColor,
        
    },
    subImg: {
        height: 50,
        width: 50,
        backgroundColor : inputColor,
    },
 
});

I've fiddled around with the nesting and the size of the row containers. The example code given to me by my teacher works as expected. I have no clue what is going wrong. Really new to coding btw so please dumb any answer down

Example Code:

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                </View>
                <View style={styles.middleBox}>
                </View>
                <View style={styles.bottomBox}>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    topBox: {
        width: 75,
        height: 75,
        backgroundColor: 'lightblue',
    },
    middleBox: {
        width: 75,
        height: 75,
        backgroundColor: 'mediumblue',
    },
    bottomBox: {
        width: 75,
        height: 75,
        backgroundColor: 'darkblue',
    },
});

CodePudding user response：

You are not using flexbox. This is done by setting display: flex on the container. Therefore, set display: "flex" on the container.

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    },
    ...

Side note: When setting display: flex, the flex-direction (flexDirection) is row by default.

CodePudding user response：

If you use styles as a function then you need to call it when applying styles. Add () after styles.

 <View style={styles().container}>
    <View style = {styles().rowContainer}>

Using typescript can help to avoid such errors.