Skip to content

Instantly share code, notes, and snippets.

@DenisDov
Last active September 13, 2024 07:46
Show Gist options
  • Save DenisDov/cc988cb2af3355e334411739c68eda4f to your computer and use it in GitHub Desktop.
Save DenisDov/cc988cb2af3355e334411739c68eda4f to your computer and use it in GitHub Desktop.
React native 3 columns grid, change width to '50%' to get two columns
<View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
<Square backgroundColor="red" />
<Square backgroundColor="pink" />
<Square backgroundColor="orange" />
<Square backgroundColor="green" />
<Square backgroundColor="blue" />
</View>
const Square = ({ backgroundColor }) => {
return (
<View
style={{
height: "100%",
backgroundColor,
width: "33.333333%",
aspectRatio: 1,
}}>
<Text>{backgroundColor}</Text>
</View>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment