What is the best way to design a grid with various squares in React Native?

Here's the design I aim to achieve:

I am looking to implement the above layout in react native and ensure it is responsive on all screen sizes. I attempted using flexbox but couldn't figure out how to make the boxes square shaped. The code provided sets fixed width and height values for the elements, but I want them to scale proportionally within the flex container. I haven't found a solution to this yet.

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>
javascriptreact-nativereact-native-stylesheet

Answer №1

Here is the code I created for you to use. Feel free to copy and experiment 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.container} />
      <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
  },
  container: {
    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;

Answer №2

Although not the ideal solution I was aiming for, it serves as a starting point. Perhaps someone can enhance it further.

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,
  },
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

javascriptjqueryhtmlcss

Switching measurement unit to jQuery when retrieving image weight

After coming across a solution on this question, I am looking to determine the weight of an image from a file input. The solution I found displays the result in MiB (Mebibyte) unit. Is there a way to show the image weight using the same code, but in a diff ...

javascriptphpjqueryimage-processing

Having trouble getting the jQuery autocomplete feature to function properly?

On my page, there is a button labeled "Add a Skill." Clicking on this button should trigger the display of an input box where you can enter your skill, another input box for your skill level, and a horizontal slider to select the skill level. In my databa ...

phpjavascriptjquerymysqlautocomplete

The file browser fails to open following an AJAX request in the Firefox browser

I am encountering an issue where the programmatic click on a file input does not open the file browser in Firefox after a successful AJAX call, although it works perfectly in Chrome. The problem persists on version 82.0.3 (64-bit) of Mozilla Firefox for Ub ...

javascriptreactjsajaxfirefox

Steps for calling a function in index.js using Node.js

I am just starting to learn about NodeJS and I have a question that might seem basic to some, but I would really appreciate some assistance here. Here is the content of my index.js file:- 'use-strict'; const { myauth } = require('./src/au ...

javascriptnode.jsnpmecmascript-6

An External Force is Disrupting My Jquery

Something seems off because everything was working perfectly fine until the FallingLeavesChristmas.min.js file stopped activating on this specific page. I initially thought it was an issue with the JavaScript itself, but that doesn't seem to be the ca ...

javascriptjqueryhtmlcss

A function is unable to update a global variable

I have been working on a form that allows users to set the hour, with JavaScript validation in place to ensure there is input in the form. Initially, the global variable "userInputHours" is set to 0. Within the function "validation()", when the user meets ...

javascriptajaxvalidation

What is the best way to invoke my Python function within my JavaScript file?

I am facing an issue with using my Python function in JavaScript. Although the actual code I am working on is more complex, I have simplified it to demonstrate the problem below: main.mjs dbutils.notebook.run("./aPythonFile.py", 5, {"parame ...

javascriptpythondbutils

Error 403 occurs after submitting the form

Recently, I encountered a 403 error when attempting to submit the form on this page. Interestingly, when I directly accessed the new page by typing the URL into my browser, it loaded without any issues. The PHP code in the initial page looks like this: & ...

javascriptphphtmlforms

Troubleshooting JavaScript Object allocation problem

As someone who is not an expert in JavaScript, I have a question that may seem silly. Let's say I have the following snippet of HTML: <div> <script type="text/javascript"> var variable_2 = new SomeObject(); </script ...

javascripthtmlajaxperformance

How can we develop a NodeJS function that returns a query result using a callback method?

I'm currently working on verifying the proper operation of a database using mocha/chai in NodeJS. I am looking for a solution to run a SQL query and then validate its execution. The issue I'm facing is that when I reach the assertion, the result ...

javascriptmysqlnode.jsmocha.jschai

What is the best way to set up Flow type checking for functions passed as props in a React and Redux application?

In my app, I've been passing Redux action creators as props and want to improve type checking. Using the generic Function type has limitations, so I tried using the existential operator (*) in my Props type with no success in getting Flow to infer the ...

javascriptreactjstypesreduxflowtype

Transferring elements from one array to multiple arrays

I have been working with the basics of JavaScript arrays and here is my code snippet: let arr = ['students', 'exams', [{'sub1':80, 'sub2':60},{'grade_sub1':'A', 'grade_sub2':'B&apos ...

javascriptarraysjson

Personalize the error message for throwing an exception in JavaScript

I've been working on customizing error messages for exceptions thrown in JavaScript. Despite my best efforts, I have not been successful so far. I'm currently attempting the following code snippet but it's not functioning as expected: f ...

javascriptjqueryexception

Limit the option to check or uncheck all on the current page only

I am facing an issue with a select all checkbox that interacts with checkboxes in a paginated table. The problem arises when I check the select all box, as it selects all records instead of just those on the current page. For example, if there are 200 reco ...

javascriptjquery

The system does not acknowledge "ENVIRONMENT" as a command that can be executed either internally or externally, or as a batch file that can be

While running my Next.js application, I encountered the following error in a script: "scripts": { "dev: "ENVIRONMENT=env/.env.development next dev", "check": "npm run format && npm run eslint", "e ...

javascriptreactjsjsonnext.jsenvironment-variables

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

Is there a method in AngularJS to compel TypeScript to generate functions instead of variables with IIFE during the compilation process with gulp-uglify?

My AngularJS controller looks like this: ArticleController.prototype = Object.create(BaseController.prototype); /* @ngInject */ function ArticleController (CommunicationService){ //Some code unrelated to the issue } I minified it using gulp: retur ...

javascriptangularjstypescriptprototypeminify

The specified file for import cannot be located or is unable to be read: node_modules/bootstrap/scss/functions

I am currently using core UI version 2.1.1 along with react. Upon attempting to execute npm start, I encountered the following error: (/Users/umairsaleem/Desktop/abc/abc/node_modules/css-loader??ref--6-oneOf-5-1!/Users/umairsaleem/Desktop/abc/abc/node_mo ...

javascriptreactjscore-ui

Using single page anchor tags in Next.js to toggle content visibility

The Issue Currently working on a project using Next.js and facing a challenge: needing to hide or replace content based on the selected category without reloading the page or navigating to another route. Furthermore, ensuring that when the page is reloade ...

javascriptcssreactjsnext.js