Masonry Layout In React Native

-

Suppose we are developing an image gallery where we want to display the portrait and landscape images so we need to build a masonry layout i.e the layout present in the Pinterest application. This article will help you for creating such a layout.


This will be the final output:-



1- Create a react native app with react native CLI or with Expo.
2- Create an array of elements in App.js file (You can use any file) 

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

const items = [
  {
    id: 1,
    aspectratio: 150 / 200,
    color: "#ffcdd2",
  },
  {
    id: 2,
    aspectratio: 1,
    color: "#bbdefb",
  },
  {
    id: 3,
    aspectratio: 120 / 100,
    color: "#c8e6c9",
  },
  {
    id: 4,
    aspectratio: 200 / 150,
    color: "#ffccbc",
  },
  {
    id: 5,
    aspectratio: 375 / 400,
    color: "#d1c4e9",
  },
  {
    id: 6,
    aspectratio: 500 / 400,
    color: "#bbdefb",
  },
  {
    id: 7,
    aspectratio: 1040 / 500,
    color: "#ffcdd2",
  },
  {
    id: 8,
    aspectratio: 2 / 1,
    color: "#bbdefb",
  },
  {
    id: 9,
    aspectratio: 1,
    color: "#c8e6c9",
  },
  {
    id: 10,
    aspectratio: 375 / 400,
    color: "#ffccbc",
  },
  {
    id: 11,
    aspectratio: 1,
    color: "#d1c4e9",
  },
];

const App = () => {
  const width = Dimensions.get("window").width / 2;
  return (
    <View style={styles.body}>
      <Text style={styles.text}>Masonry View</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  body: {
    padding: 10,
    alignItems: "center",
  },
  text: {
    color: "black",
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 20,
    marginBottom: 20,
  },
});



    The above code has an array of items that contain the items to display in the view, each item has id, aspect ratio, and color. Then we should create a simple View with Text and also applied minimal styling.


3- Create a ScrollView

  • Create a parent View inside with style flex-direction as a row.

4- Create two Views inside parent View (because we need to display the items in two columns)

5- Inside each child View, map the array items and display the items like a card ( Card component will be created later)

6- In order to display in two columns, the array items need to be filtered in such a way that even indexed items are displayed in the first child View and odd indexed items are displayed in the second child View before mapping.


 <ScrollView>
          <View style={{flexDirection:'row'}}>
        <View style={{marginRight:5}}>
          {items
            .filter((_, i) => i % 2 === 0)
            .map(item => (
              <Card key={item.id} width={width} aspectratio={item.aspectratio} color={item.color} />
            ))}
        </View>
        <View style={{marginLeft:5}} >
          {items
            .filter((_, i) => i % 2 !== 0)
            .map(item => (
              <Card key={item.id} width={width} aspectratio={item.aspectratio} color={item.color} />
            ))}
        </View>
      </View>
      </ScrollView>




7- Create the Card component


import React from "react";

import { View } from "react-native";

const Card = ({ width, color, aspectratio }) => {
  return (
    <View
      style={{
        backgroundColor: color,
        width: width,
        height: width * aspectratio,
        marginBottom: 10,
        borderRadius: 10,
      }}
    />
  );
};

export default Card;


        Here we defined a functional component with the props color, aspect ratio, and width. The width will be half of the screen width (given in the first code snippet).
After applying the required styles to the View, we will get the output Card.




Comments

Post a Comment

Popular posts from this blog

LeetCode 350: Intersection of Two Arrays II

-
Question:-  Given two integer arrays nums1 and nums2, return an array of their intersection. Each element in the result must appear as many times as it shows in both arrays and you may return the result in any order. Example 1: Input: nums1 = [4,9,5], nums2 = [9,4,9,8,4] Output: [4,9] Explanation: [9,4] is also accepted. Example 2: Input: nums1 = [1,2,2,1], nums2 = [2,2] Output: [2,2] Solution:- class Solution {     public int [] intersect ( int [] nums1 , int [] nums2 ) {         int length1 = nums1 . length ;           int length2 = nums2 . length ;         int [] ans = new int [ length1 * length2 ];         int i = 0 , j = 0 , k = 0 ;         Arrays . sort ( nums1 );         Arrays . sort ( nums2 );         while ( i < length1 && j < length2 ){             if ( nums1 [ i ...
Read more

LeetCode 35: Search Insert Position

-
 Question Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order. You must write an algorithm with  O(log n)  runtime complexity.   Example 1: Input: nums = [1,3,5,6], target = 5 Output: 2 Example 2: Input: nums = [1,3,5,6], target = 2 Output: 1 Example 3: Input: nums = [1,3,5,6], target = 7 Output: 4   Solution 1- Javascript /** * @param {number[]} nums * @param {number} target * @return {number} */ var searchInsert = function ( nums , target ) { let left = 0 ; let right = nums . length ; while ( left < right ) { const middle = Math . floor (( left + right ) / 2 ); if ( nums [ middle ] < target ) { left = middle + 1 ; } else { right = middle ; } } return left ; };
Read more

LeetCode 217: Contains Duplicate

-
  Question Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct. Example 1: Input: nums = [1,2,3,1] Output: true Example 2: Input: nums = [1,2,3,4] Output: false Example 3: Input: nums = [1,1,1,3,3,4,3,2,4,2] Output: true Solutions 1) Go func containsDuplicate ( nums [] int ) bool {     dict := make ( map [ int ] int )     for _ , num := range nums {         dict [ num ]= dict [ num ]+ 1         if ( dict [ num ]> 1 ){             return true ;         }             }     return false } 2) Javascript function containsDuplicate ( nums ) {   const temp = new Set ( nums );   return !( nums . length === temp . size ); }
Read more