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

UI that I need help creating

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. Any help at all would be greatly appreciated.

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>


Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)