10 Best Layout Components For React & React Native (2022 Update)

Layout system made easy!

This is a hand-picked collection of the 10 best free layout components for React & React Native to create responsive, mobile-friendly grid, list, and card views on modern applications. Have fun!

Originally Published Nov 30 2017, updated Jan 12 2022

Table Of Contents:

Best Layout Components For React:

1. Draggable and Resizable Grid Layout For React

react-grid-layout

Demo Download

React-Grid-Layout is a draggable and resizable grid layout system with responsive breakpoints.


2. Pinterest Like Layout Components For React

Pinterest Like Layout Components For React

Demo Download

A React component for creating Pinterest like responsive, fluid grid layouts.


3. Animated Grid Layout Component For React – react-stonecutter

Animated Grid Layout Component For React

Demo Download

react-stonecutter is a Masonry-style animated grid layout component for React. Choose between CSS Transitions or React-Motion for animation.


4. Isometric Grid Layout and Animation For React

Isometric Grid Layout and Animation For React

Demo Download

Isometric grid layout and animation for presenting photos and projects. Inspired by Codrops Isometric Grids.


5. Resizable Layout For React

Resizable Layout For React

Demo Download

A resizable layout component for React which makes your layout resizable with a handle.

Best Layout Components For React Native:

1. Masonry Style Image Layout For React Native

Masonry Style Image Layout For React Native

Demo Download

An easy to use React Native component to render a Masonry-like layout for remote images.


2. Responsive Grid For React Native With RTL Layout Support

Responsive Grid For React Native With RTL Layout Support

Demo Download

This Responsive Grid (for React Native) corrects the mental model for Grid based layout in that it eliminates the decoherence that results from using both an absolute column count together with relative sizing (!) by letting the developer specify the width of each grid column as a percentage of screen size and then specify the width of a given column in their layout as a multiple of that percentage.


3. React Native Android TabLayout Component

React Native Android TabLayout Component

Demo Download

A React-Native wrapper for the standalone Android TabLayout component. It’s fully native and similar in use like the TabBarIOS component.

4. Platform-agnostic Drawer Layout For React Native

Platform-agnostic Drawer Layout For React Native

Demo Download

A platform-agnostic drawer layout. Pure JavaScript implementation on iOS and native implementation on Android.

5. Responsive Layouts And Grids For React

Responsive Layouts And Grids For React

Demo Download

A set of components and utilities that make building responsive RN user interfaces easy by bringing concepts used on the web.


More Resources:

There’re lots of layout JavaScript libraries out there and you can find more React & React Native resources about layout system on our Layout category.

To learn more about layout on modern web & mobile development, here are a few resources available online:

You Might Be Interested In:

Add Comment