Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-grid-list with all npm packages installed. Try it out:

var reactNativeGridList = require("react-native-grid-list")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-grid-list v1.1.0

React native grid list component

:foggy: Grid list component

platforms npm npm travis license

Demo

Installation

yarn add react-native-grid-list

or

npm install react-native-grid-list --save

Example

Expo

Example

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

PropDefaultTypeDescription
children-nodeChildren elements
datanot required if children is usedarrayData to use in renderItem
renderItemnot required if children is usedfuncFunction that render each item of the grid
numColumns3numberNumber of elements in a row
itemStyle{}ViewPropTypesStyle for the wrapper of item
Separator
showSeparatorfalseboolShow a separator between items
separatorBorderWidth0numberSet separator width
separatorBorderColor'white'stringSet separator color
Animation
showAnimationfalseboolShow an animation when load item
animationInitialBackgroundColor'white'stringSet initial backgroundColor for animation
animationDuration500numberDuration of the animation

Author

Gustavo Gard

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free