The Most Popular React Native Layout Components
1.React Native Animation Layout
Custom & Ready to GO partially customizable Animation Layouts for React Native.
Demo: https://www.freakycoder.com/
2.React Native Layout Animation Provider
A React Native for synchronizing your LayoutAnimations.
React Native LayoutAnimations can be tricky. Depending on your application state, you may find multiple child components competing for the next call to configureNext(), which has adverse effects on the animated result; resulting animations can be choppy, since your application has to work through multiple competing animations.
The LayoutAnimationProvider exported by this library can be used to de-dup multiple competing attempts to execute the next layout animation; at its root, you define one animationConfig to transition all nested children who have registered themselves using withLayoutAnimation.
To execute an animation, a child consumer simply makes a call to the injected setStateWithAnimation mixin, which is appended to the class prototype when wrapped with withLayoutAnimation. Finally, instead of using setState to trigger a layout animation, just replace the call with setStateWithAnimation.
3.React Native Easy Grid View
A React Native component for grid view. Compatible with both iOS and Android.
4.React Native Col
Quick & concise react-native Flexbox positioning
The idea is to keep JSX as clean & concise as possible, while also providing some nice semantic.
5.React Native Masonry List
An easy and simple to use React Native component to render a custom high performant masonry layout for images. It uses a smart algorithm to sort the images evenly as possible according to the index position or fill in as soon as the image is fetched. Includes support for both iOS and Android. Free and made possible along with costly maintenance and updates by Lue Hang (the author).
Check out the docs for a complete documentation.
- Dynamic images, columns, spacing and container width.
- Smart algorithm for eveningly laying out images.
- Pull to Refresh.
- Scroll loading.
- Can be use with deeply rooted data and many fieldnames. source, source.uri, uri, URI, url or URL.
- Support for rendering all local and remote images with no missing images.
- Support for dynamic device rotation.
- Easily and highly customizable.
- Support both iOS and Android.
Demo: https://luehangs.site/lue_hang/projects/react-native-masonry-list
6.React Native Navigation Drawer layout
React Native: react-native-navigation-drawer-layout.
7.React Native Image Layout
An easy and simple to use React Native component to render a custom masonry layout for remote images and displayed on a custom interactive image viewer. Includes animations and support for both iOS and Android.
8.React Native Thumbnail grid
9.React Native Masonry Brick list
Staggered Or Masonary List View For React Native Written in pure js
10.React Native Easy Grid
This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.
View on GitHub
11.React Native Masonry
An easy to use, pure JS react-native component to render a masonry~ish layout for remote images.
react-native-masonry is built with the following features and functionalities baked in
- Dynamic Column Rendering
- Progressive Item Loading
- Device Rotation
- On-press Handlers
- Custom Headers & Captions
- Optimized to Rendering Large List
- Support for Third-Party Image components
- Automatic Sizing Based on Available Space
12.Material Chip View
React Native: Material Chip View
Material Chips represent complex entities in small blocks, such as a contact. A chip may contain entities such as a photo, text, rules, an icon, or a contact.
13.React Native Device Screen Switcher
Testing your React Native UI layouts on different screen sizes can be quite time-consumning.
This library aims to make this much easier by allowing the run-time switching of the main app viewport to match the sizes of different devices.
This library requires React Native 0.43.0 or above. For versions older versions of React Native (from 0.34.0 up), use the 0.0.4 release.
14.React Native Shimmer Placeholder
Placeholder for both IOS and Android
15.Bringing the Web’s Responsive Design to React Native
React Native Library for Responsive and Universal Apps
16.React Native Layout
Semantic JSX layout components for react-native
This library contains multiple easy-to-use react-native layout components which brings more semantic into your JSX code.
17.react-native-grid-component
Easy to use grid component for your react-native project. Supports iOS and Android.
18.Autoresponsive React Native
A Magical Layout Library For React
Auto responsive grid layout library for ReactNative.
#react-native #programming
