0
268
ViewsHow 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.
·
Juan Pablo Isaza
1 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
Answer question