flex-direction row not working in React Native - css

Question

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',
},
});

Answer 1

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.

Answer 2

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.