React Native Flexbox - Not working, Items align under one column

I am looking to design a home page with 2-3 "images" per row but when I add a flexbox setting nothing really changes. The images are just aligning all in one column. What am I doing wrong?I have used this tutorial for reference: https://reactnative.dev/docs/flexbox?language=javascript

I have tried setting the flex direction and the flex number but it doesn't change anything. I have also tinkered with the css but still nothing.

import { StatusBar } from "expo-status-bar";import {  ImageBackground,  StyleSheet,  Text,  View,  Image,  SafeAreaView,  ScrollView,} from "react-native";export default function App() {  return (<ImageBackground      source={require("./assets/htmlbg.jpg")}      style={styles.background}><SafeAreaView style={styles.container}><View          style={[            styles.container,            {              // Try setting `flexDirection` to `"row"`.              flexDirection: "row",              justifyContent: "space-between",            },          ]}><ScrollView style={styles.scrollView}><View style={styles.container}><Text>LOGOTYPE HERE</Text><Image                source={require("./assets/Datacenter.jpg")}                style={{ flex: 1 }}              /><Image                source={require("./assets/Datacenter.jpg")}                style={{ flex: 2 }}              /><Image                source={require("./assets/Datacenter.jpg")}                style={{ flex: 3 }}              /><Image                source={require("./assets/Datacenter.jpg")}                style={{ flex: 4 }}              /><StatusBar style="auto" /></View></ScrollView></View></SafeAreaView></ImageBackground>  );}const styles = StyleSheet.create({  background: {    flex: 2,    resizeMode: "cover", // or 'stretch' or 'contain'  },  container: {    flex: 2,    padding: 40,  },});