How do you arrange shapes in React Native?

I am attempting to arrange squares just like how they look in the image, but I can’t really figure out the whole flex and positioning stuff: squares

This is probably really simple but I just can’t figure it out.

Answer

Well, here is a quick and dirty version of your picture.

import React from "react"
import { StyleSheet, View } from "react-native"

export const Test = () => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={[styles.square]} />
        <View style={[styles.square]} />
        <View style={[styles.square, { backgroundColor: "yellow" }]} />
        <View style={[styles.square, { backgroundColor: "turquoise" }]} />
      </View>
      <View style={styles.row}>
        <View style={[styles.square, { backgroundColor: "red" }]} />
        <View style={[styles.square, { backgroundColor: "blue" }]} />
        <View style={[styles.square, { backgroundColor: "green" }]} />
        <View style={[styles.square, { backgroundColor: "violet" }]} />
        <View style={[styles.square, { backgroundColor: "yellow" }]} />
      </View>
      <View style={[styles.square, { backgroundColor: "lightgrey", height: 25, width: 300 }]} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
  },
  row: {
    flexDirection: "row",
  },
  square: {
    width: 60,
    height: 60,
  },
})

which yields to the following view.