gusgard / React Native Grid List
Licence: apache-2.0
🌁 Grid list component implemented with FlatList
Stars: ✭ 74
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Grid List
flex-box-grid
Responsive, mobile first Flexbox Grid
Stars: ✭ 39 (-47.3%)
Mutual labels: grid, grid-layout
grid-layout
grid-layout is a layout engine which implements grid, can use in canvas/node-canvas
Stars: ✭ 43 (-41.89%)
Mutual labels: grid, grid-layout
gridbugs-ru
Перевод списка багов в CSS Grid Layout, курируемого Рейчел Эндрю
Stars: ✭ 27 (-63.51%)
Mutual labels: grid, grid-layout
React Gridlist
A virtual-scrolling GridList component based on CSS Grids
Stars: ✭ 394 (+432.43%)
Mutual labels: grid, grid-layout
grid-container
A grid for the future, CSS Grid Layout + Web Components (Custom Elements v1 + Shadow DOM v1)
Stars: ✭ 51 (-31.08%)
Mutual labels: grid, grid-layout
DPVideoMerger-Swift
Multiple videos merge in one video with manage scale & aspect ratio and also merge videos to grid matrix layout for Swift.
Stars: ✭ 49 (-33.78%)
Mutual labels: grid, grid-layout
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (+120.27%)
Mutual labels: grid, grid-layout
Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+5228.38%)
Mutual labels: grid, grid-layout
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (+352.7%)
Mutual labels: grid, grid-layout
Magic Grid
A simple, lightweight Javascript library for dynamic grid layouts.
Stars: ✭ 2,827 (+3720.27%)
Mutual labels: grid, grid-layout
Vue Grid Layout
A draggable and resizable grid layout, for Vue.js.
Stars: ✭ 5,170 (+6886.49%)
Mutual labels: grid, grid-layout
Grd
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
Stars: ✭ 2,210 (+2886.49%)
Mutual labels: grid, grid-layout
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (-12.16%)
Mutual labels: grid, grid-layout
Reactsimpleflexgrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 181 (+144.59%)
Mutual labels: grid, grid-layout
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-74.32%)
Mutual labels: grid, grid-layout
Popo
PoPo is the grid layout tool, the best choice for runtime layout.
Stars: ✭ 130 (+75.68%)
Mutual labels: grid, grid-layout
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (+112.16%)
Mutual labels: grid, grid-layout
ReactSimpleFlexGrid
A way to quickly add a Grid Layout to your React app 🚀
Stars: ✭ 185 (+150%)
Mutual labels: grid, grid-layout
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+5750%)
Mutual labels: grid, grid-layout
🌁 Grid list component
Installation
yarn add react-native-grid-list
or
npm install react-native-grid-list --save
Example
Expo
Code
import React, { PureComponent } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import GridList from 'react-native-grid-list';
const items = [
{ thumbnail: { uri: 'https://lorempixel.com/200/200/animals' } },
{ thumbnail: { uri: 'https://lorempixel.com/200/200/city' } },
{ thumbnail: { uri: 'https://lorempixel.com/200/200/nature' } },
{ thumbnail: { uri: 'https://lorempixel.com/200/200/cats' } },
];
export default class App extends PureComponent {
renderItem = ({ item, index }) => (
<Image style={styles.image} source={item.thumbnail} />
);
render() {
return (
<View style={styles.container}>
<GridList
showSeparator
data={items}
numColumns={3}
renderItem={this.renderItem}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
image: {
width: '100%',
height: '100%',
borderRadius: 10,
},
});
Check the code here
You can use all the props from FlatList: http://facebook.github.io/react-native/docs/flatlist.html
Props
Prop | Default | Type | Description |
---|---|---|---|
children | - | node |
Children elements |
data | not required if children is used | array |
Data to use in renderItem |
renderItem | not required if children is used | func |
Function that render each item of the grid |
numColumns | 3 | number |
Number of elements in a row |
itemStyle | {} | ViewPropTypes |
Style for the wrapper of item |
Separator | |||
showSeparator | false | bool |
Show a separator between items |
separatorBorderWidth | 0 | number |
Set separator width |
separatorBorderColor | 'white' | string |
Set separator color |
Animation | |||
showAnimation | false | bool |
Show an animation when load item |
animationInitialBackgroundColor | 'white' | string |
Set initial backgroundColor for animation |
animationDuration | 500 | number |
Duration of the animation |
Author
Gustavo Gard
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].