react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •        238

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

https://github.com/brh55/react-native-masonry#readme

Dependencies:

data.task : ^3.1.1
lodash.differenceby : ^4.8.0
lodash.isequal : ^4.5.0
opencollective : ^1.0.3
prop-types : ^15.5.8
react-native-injectable-component : ^0.1.2

Tags
Implementation
License
Platform

   




Related Projects

react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

mauerwerk - ⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions

  •    Javascript

These two would work outside the Grids context if you wanted to use them elsewhere. mauerwerk depends on react-spring and react-measure.

angulargrid - Pinterest like responsive masonry grid system for angular

  •    Javascript

agular-grid-id and angular-grid-options deprecated, use ag-id and ag-options instead.

waterfall.js - Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?

  •    Javascript

This question has a good point. Yes, there are CSS ways to solve this, using flexbox or columns technic, but this doesn't work well when you don't know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where the structure doesn't matter: Waterfall will work. ⚠️ The latest stable is waterfall-1.0.2 (which is used in the website), newest versions are suffering issues from a major rewrite.

masonry - :love_hotel: Cascading grid layout library

  •    HTML

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. See masonry.desandro.com for complete docs and demos.


salvattore - A jQuery Masonry alternative with CSS-driven configuration.

  •    Javascript

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry. To find out more and see it in action, please visit our website.

react-masonry-component - A React.js component for using @desandro's Masonry

  •    Javascript

if you wish to have IE8 support, v2 with React 0.14 is the highest version available. To use the component just require the module.

Masonry - Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax

  •    Objective-C

Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API. Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.

driveway - pure CSS masonry layouts

  •    HTML

driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus. You may have come here from the blog post I wrote about pure CSS masonry layouts. If that's the case and you want the exact code I used in that post(with vendor prefixing), you'll be best served looking in the dist folder for driveway.blog.css and driveway.blog.min.css. Alternatively, use bower to pull in the repo.

bricklayer - Lightweight and independent Pinterest-like cascading grid layout library

  •    TypeScript

This plugin works seamlessly with, Safari, Firefox, Chrome and all other modern browsers.

masonry - Layout elements in a grid, like a mason fitting stones in a wall

  •    Javascript

Layout elements in a grid, like a mason fitting stones in a wall

minigrid - 📏 Minimal 2kb zero dependency cascading grid layout

  •    Javascript

Minigrid is a minimal 2kb zero dependency cascading grid layout. Website & Documentation: http://alves.im/minigrid.

react-native-photo-browser - Local and remote media gallery with captions, selections and grid view support for react native

  •    Javascript

A full screen image gallery with captions, selections and grid view support for react-native. Layout and API design are inspired by great MWPhotoBrowser library. The component has both iOS and Android support.

angular-deckgrid - A lightweight masonry-like grid for AngularJS.

  •    Javascript

A lightweight masonry-like grid for AngularJS. Include angular-deckgrid in your HTML.

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •    Javascript

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

react-native-easy-grid - Easy React Native Layout & Grid for the Dumb

  •    Javascript

This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.

FlexLib - FlexLib is a framework for creating native iOS applications using xml file, similar to Android and

  •    Objective-C

FlexLib is an Objective-C layout framework for iOS. It's based on flexbox model which is standard for web layout. So the layout capability is powerful and easy to use. With FlexLib, you can write iOS UI much faster than before, and there are better adaptability.

Shuffle - Categorize, sort, and filter a responsive grid of items

  •    Javascript

Categorize, sort, and filter a responsive grid of items. This project was inspired by Isotope and Packery.

react-native-super-grid - Responsive Grid View for React Native

  •    Javascript

Responsive Grid View for React Native. This component renders a Grid View that adapts itself to various screen resolutions.

react-native-web - React Native for Web

  •    Javascript

"React Native for Web" brings the platform-agnostic Components and APIs of React Native to the Web. High-quality user interfaces: React Native for Web makes it easy to create fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.