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 ng-view directive within AngularJS appears to be malfunctioning

I am facing an issue with my simple Angular app. I have two links that are supposed to change the URL and display the correct view within the same single page application. However, when I include the controllers' module in the main module, it stops wo ...

javascripthtmlangularjs

Is it accurate that JavascriptResult displays javascript on the page in a string format?

I am new to .NET MVC and have been experimenting with different return types in MVC. However, I am having trouble getting the JavaScriptResult to work. In my controller, I have the following code: public ActionResult DoSomething() { string s = ...

javascriptasp.net-mvcrazor

Fixing the issue with animated scrolling in React Native's Flatlist component

I attempted to customize the default refresh indicator for a Flatlist in React Native. My goal was to create something similar to Snapchat, Instagram, or the default iOS refresh indicator instead of the unattractive Android indicator. This is what I tried: ...

javascriptreactjsreact-nativereact-native-flatlist

I am unsure about implementing the life cycle in Svelte.js

Unknown Territory I am not well-versed in front-end development. Desire to Achieve I aim to utilize the lifecycle method with SvelteJS. Error Alert An error has occurred and the lifecycle method is inaccessible: ERROR in ./node_modules/svelte/index.m ...

javascriptnode.jsnpmyarnpkgsvelte

Having Trouble Finding Vue Component Definition Using Vite Alias in Import Path

When I click on the Component within the code snippet: import Component from '@/components/Component.vue'; I am unable to navigate to its definition when using vite alias. Seeking a potential solution. ...

javascriptvue.jsvisual-studio-codeimportvite

Unable to install vue-property-decorator

When attempting to set up Vue and TypeScript with class style using vue-property-decorator, I encountered a strange script after creating the project. I was anticipating a script like this: <script lang="ts"> import {Component, Vue} from & ...

javascripttypescriptvue.jsvuejs2

What is the reason for $http.get not requiring a return value?

I am currently developing an angular application and I have a controller that interacts with a service. The controller sends a URL to the service, which then makes a GET request to that URL and receives JSON data in return. Within this JSON data is a URI f ...

javascriptjsonangularjsangular-promise

Encountered a failure while loading modules in AngularJS

When I tried opening the index.html page using Chrome, I encountered an error stating that the correct modules could not be found. Uncaught SyntaxError: Unexpected token < angular.js:1 Uncaught SyntaxError: Unexpected token < controller.js:1 ...

javascripthtmlangularjs

Is there a constraint on JSON data?

Is there a limit to the amount of data that JSON with AJAX can handle in outgoing and returning parameters? I am trying to send and receive a file with 10,000 lines as a string from the server. How can I accomplish this task? Can a single parameter manage ...

phpjavascriptajaxjson

Using Jquery to extract URL parameters

Can anyone suggest a jQuery function I can use to fetch URL parameters? I've been utilizing the following function, which works well; however, it encounters issues when the URL doesn't have any parameters. I would like it to return an empty stri ...

javascriptjquery

Tips on saving checklist values as an array within an object using AngularJS

I need help with storing selected checklist items as an array in a separate object. I want to only store the names of the checklist items, but I am struggling to figure out how to achieve this. Below is the HTML code: <div ng-app="editorApp" ng-contro ...

javascriptarraysangularjs

Add items to a separate array only if the material UI checkbox is selected

Exploring the world of React, I decided to create a simple todo app using React JS and Material UI. With separate components for user input (TodoInput.js) and rendering individual todos with checkboxes (TodoCards.js), I aim to display the total number of c ...

javascriptreactjsmaterial-ui

Error: The value for $regex must be in the form of a string

Encountering a problem with an error in the Console: { [MongoError: $regex has to be a string] name: 'MongoError', message: '$regex has to be a string', waitedMS: 0, ok: 0, errmsg: '$regex has to be a string', code ...

javascripthtmlajaxnode.jsmongodb

Manipulating a DOM element in Angular 2 to alter its class attribute

I am a beginner in angular2. Here is my code: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'main', template: ` <div class="current"> </div> ` }) export class MainComponent impl ...

javascriptangulardom

Trigger callback function when user selects a date on the calendar using Material UI X Date Picker

I am currently utilizing the DateTimePicker component in material ui, version 5. I am looking for a way to intercept the callback triggered when a user clicks on a day in the calendar selector: https://i.stack.imgur.com/0Tlogm.png Although the DateTimePi ...

javascriptreactjsmaterial-ui

Is getElementById() returning null?

I'm currently working on a JavaScript program that takes an image URL and displays it on the page by creating an <img> tag. This way, I can easily add multiple images to the page. Here is my code: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlimagesrccreateelement

FInding the inner value of a Vuetify chip

I have a Vue application that utilizes Vuetify chips to display information. I'm trying to log the value inside a specific chip when it is clicked, but I keep getting an undefined error when trying to access the array where the information comes from. ...

javascripttypescriptvue.jsvuetify.js

Exploring ways to assign a value to an HTML element utilizing Jquery in combination with ASP.NET MVC 4 complex model information

Within an ASP.NET MVC 4 view, I am utilizing data from a Model to populate various HTML elements. The model is used in the view to showcase values like: <div>@Model.Category.Name</div> etc... However, there is a specific div tag <div id="D ...

javascriptjqueryasp.netasp.net-mvc

Using JavaScript and HTML to show the current month, date, and year on a webpage

I am looking to display not only the time, but also the month, date and year. My attempted solution involved creating variables for the month, day and year, and then using getElementById. Here is an example of what I tried: var d = date.getDay(); var mn ...

javascripthtmldate

Steps for assigning a URI as a variable based on the environment, whether it is in production or not

Seeking advice on deploying a MERN app onto Heroku. I have the mongodb URI declared in a config file locally, but on Heroku I am using process.env.mongoURI. How can I adjust my code to use the local config file when running locally and the Heroku config wh ...

javascriptmongodbexpressheroku