How to create the attached UI(grid with different squares) in react native?

Sevenize
August 10, 2022
153 views
0 votes
2 Answers

Here’s the UI I want to create:

How do I create the above UI in react native and have it scale on all devices? I tried using flexbox but I couldn’t get the boxes to be squares. The code below is using fixed width and height in which I was thinking I could scale them in proportion to the flex container they’re in but I don’t know how that would be implemented and I haven’t found anything similar so far.

return (
    <View>
      <View style={styles.cardContainer}>
        <View style={styles.leftSection}></View>
        <View style={styles.rightSection}>
          <View style={styles.section}>
            <View style={styles.smallSquare}></View>

            <View style={styles.smallSquare}></View>

            <View style={styles.smallSquare}></View>
          </View>
          <View style={styles.section}>
            <View style={styles.smallSquare}></View>

            <View style={styles.smallSquare}></View>

            <View style={styles.smallSquare}></View>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  cardContainer: {
    height: 152,
    flexDirection: "row",
    borderRadius: 26,
    marginTop: 8,
    padding: 5,
    backgroundColor: "lightgrey",
    justifyContent: "space-between",
  },

  leftSection: {
    flex: 3,
    backgroundColor: "teal",
    borderRadius: 23,
  },

  rightSection: {
    flex: 5,
    marginHorizontal: 10,
  },

  largeSquare: {
    width: "100%",
    height: "100%",
    borderRadius: 23,
  },
  section: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },

  smallSquare: {
    backgroundColor: "teal",
    borderRadius: 14,
    width: 62,
    height: 62,
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>

Answers

Chosen as BEST ANSWER

Not the perfect solution I was hoping to find but it's a start. Maybe someone can build on it.

import { StatusBar } from "expo-status-bar";

import {
  StyleSheet,
  View,
  Text,
  Image,
  Pressable,
  FlatList,
  Dimensions,
} from "react-native";

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

export default function HomeScreen() {
  return (
    <View style={styles.homeScreen}>
      <View style={styles.cardOuter}>
        <View style={styles.cardContainer}>
          <View style={styles.leftSection}>
            <View style={styles.bigThumbnail}></View>
          </View>
          <View style={styles.rightSection}>
            <View style={styles.section}>
              <View style={styles.smallThumbnail}></View>
              <View style={styles.smallThumbnail}></View>
              <View style={styles.smallThumbnail}></View>
            </View>
            <View style={styles.section}>
              <View style={styles.smallThumbnail}></View>
              <View style={styles.smallThumbnail}></View>
              <View style={styles.smallThumbnail}></View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  homeScreen: {
    backgroundColor: "black",
    flex: 1,
    paddingHorizontal: 10,
  },
  cardOuter: {
    paddingVertical: 4,
    backgroundColor: "#eee",
    borderRadius: 26,
  },
  cardContainer: {
    height: windowHeight / 5.4,
    flexDirection: "row",
    borderRadius: 26,
    paddingHorizontal: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  leftSection: {
    marginRight: 0,
  },
  rightSection: {
    flex: 5,
  },
  bigThumbnail: {
    backgroundColor: "teal",
    borderRadius: 26,
    width: windowWidth / 3,
    height: "96%",
  },
  smallThumbnail: {
    backgroundColor: "teal",
    borderRadius: 14,
    width: windowWidth / 6,
    height: windowWidth / 6,
  },
  section: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingLeft: 10,
    marginVertical: 0,
  },
});

(Edit)

I just made the code for you. Just copy and play with it.

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

const DATA = [1, 2, 3, 4, 5, 6];

const renderItem = ({ item }) => {
  return <View style={styles.item}></View>;
};
function App() {
  return (
    <View style={styles.app}>
      <View style={styles.letConatiner} />
      <View style={{ flex: 2.5 }}>
        <FlatList
          data={DATA}
          renderItem={renderItem}
          keyExtractor={(item) => item}
          numColumns={3}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    backgroundColor: "lightgrey",
    padding: 10
  },
  letConatiner: {
    height: "62%",
    flex: 1,
    backgroundColor: "teal",
    borderRadius: 15,
    marginTop: 10
  },
  item: {
    flex: 1,
    padding: 50,
    backgroundColor: "green",
    margin: 10,
    borderRadius: 15,
    height: "50%"
  }
});

export default App;

Please signup or login to give your own answer.

Click here to cancel reply.