phil-r / react-native-grid-component

:black_square_button: React native grid component

🔲 react-native-grid-component

Easy to use grid component for your react-native project. Supports iOS and Android.

Based on react-native framework by Facebook.

Installation

npm install react-native-grid-component

or

yarn add react-native-grid-component

Examples

• Simple
• Sections

Demo

Usage

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import Grid from 'react-native-grid-component';

class Simple extends Component {
  _renderItem = (data, i) => (
    <View style={[{ backgroundColor: data }, styles.item]} key={i} />
  );

  _renderPlaceholder = i => <View style={styles.item} key={i} />;

  render() {
    return (
      <Grid
        style={styles.list}
        renderItem={this._renderItem}
        renderPlaceholder={this._renderPlaceholder}
        data={['black', 'white', 'red', 'green', 'blue']}
        numColumns={2}
      />
    );
  }
}

const styles = StyleSheet.create({
  item: {
    flex: 1,
    height: 160,
    margin: 1
  },
  list: {
    flex: 1
  }
});

Full interactive example

Props

Name	propType	description
data required	Array	Array that will be used to render items
renderItem required	func (data: any, i: number) => React$Element	function that accepts data and returns React Element that will be rendered for each data item
renderPlaceholder optional	func (i: number) => React$Element	function that returns placeholder React Elements that ere rendered to fill the space at the end of the grid
numColumns optional	number	number of elements per one row
keyExtractor optional	func (item: object, index: number) => string	see docs
sections optional	bool	switches internal implementation to SectionList

Also see FlatList props or SectionList props(if you set sections to true)

See also

• React Native Looped Carousel
• React Native Buyscreen

ISC License (ISC)

Copyright (c) 2016-2019, Phil Rukin <mailto:[email protected]>

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

react-native-grid-component's Issues

onPress Functionality

onPress functionally isn't working inside the grid! is this just for me or is something missing is here?

Extra row in the end

To reproduce i used your own example snack.
When the number of elements is divisible by number of elements, the component renders an extra row of placeholders in the end.

For example if there are 2 columns and 8 items, instead of 4 rows it will render 5 rows, the last row being filled with 2 placeholder elements.

very useful, just wanna say thank you

building this.

Moving to FlatList?

As we all know ListView is deprecated and has poorer performance than FlatList (source).
Do you have any plans to rewrite this using FlatList?

How can I go alternating the items by row?

How can I go alternating 1 item and the next row 2 item? Can you modify itemsPerRow?

Add example with sectioned list view

Add example for refresh control

Grid dont call renderItem when state change

I have data Array:

this.state = {social :  [ {name : 'facebook', status : false },{name : 'twitter', status : true },{name : 'linkedin', status : true }]
}

When i update array with setState() and i update status of some Item nothing rendred !

Unknown named module: react-native-grid-component

I initially tried adding this to my project and running it and got the Unknown named module error.. then I cloned the repo and tried running the example app and got the same error. What can I do to fix this?

onScroll event handler

Hi @phil-r !
Is it possible to do something like this:

          onScroll={Animated.event([
            { nativeEvent: { contentOffset: { y: this.state.scrollY } } },
          ])}

???

or it isn't supported unless you make some changes to expose the onScroll event.

Thanks!

Add documentation on sectioned listview

currently it's missing

How to add a click event？

List Width overflows the device screen width. (Horizontal)

The list makes a horizontal scroll in iPhone. How to fit the list to the device width?

how to use placeholder?

Element type is invalid

I used your example on android but got error.
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

What could be the reason?

import React, { Component } from 'react';
import {
StyleSheet,
View,
} from 'react-native';

import Grid from 'react-native-grid-component';

export default class TimeScreen extends Component{

constructor(props) {
super(props);

this.state = {
  data: generateRandomColorsArray(21),
};

}

_renderItem = (data, i) =>
<View style={[{ backgroundColor: data }, styles.item]} key={i} />

render() {
return (
<Grid
style={styles.list}
renderItem={this._renderItem}
data={this.state.data}
itemsPerRow={2}
itemHasChanged={(d1, d2) => d1 !== d2}
onEndReached={() =>
this.setState({ data: [...this.state.data, ...generateRandomColorsArray(21)] })}
/>
);
}
}

const styles = StyleSheet.create({
item: {
flex: 1,
height: 160,
margin: 1,
},
list: {
flex: 1,
},
});

// Helper functions
// thanks materialuicolors.co
const colors = [
'#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
'#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722', '#795548', '#9E9E9E', '#607D8B',
];

function generateRandomColorsArray(length) {
return Array.from(Array(length)).map(() => colors[Math.floor(Math.random() * colors.length)]);
}

Separators between items

Hello, thank you for your work!
How did you do the separators around each item in your gif examples? Are those just borders of the items?

Warning: Failed prop type: Invalid prop `refreshControl` of type `function` supplied to `ListView`, expected a single ReactElement.

I use rn 0.42, encounter a problem with Warning: Failed prop type: Invalid prop refreshControlof typefunctionsupplied toListView, expected a single ReactElement.

toggling the items per row doesn't work as excepted

when I set the state I expect the items per row to reflect what I chose, what actually happens is I have to click the buttons numerous times and it doesn't match up.

`import React, { Component } from 'react';
import {
Image,
View,
Text,
Button,
ScrollView,
StyleSheet,
} from 'react-native';
import Collection from 'react-native-grid-component';
import { Col, Grid } from 'react-native-easy-grid';
import Icon from 'react-native-vector-icons/FontAwesome';

class Home extends Component {
constructor() {
super();
this.state = {
itemsPerRow: 2,
};
}

static navigationOptions = ({ navigation }) => {
	return {
		headerTitle: (
			<View style={{ alignItems: 'center' }}>
				<Text style={{ color: 'white' }}>All Jeeps</Text>
				<Text style={{ color: 'white' }}>Viewing 75 Products</Text>
			</View>
		),
	};
};

_renderItem = (data, i) =>
	<View
		style={[
			{
				backgroundColor: '#E8E8D0',
			},
			styles.item,
		]}
		key={i}>
		<View />
		<Image
			style={{ width: 178, height: 200 }}
			source={{
				uri: data.image,
			}}
		/>
		<View
			style={{
				position: 'absolute',
				bottom: 0,
				left: 0,
				right: 0,
				padding: 10,
				backgroundColor: 'white',
			}}>
			<Text style={{ color: 'grey' }}>Jeep</Text>
			<Text style={{ color: '#A34C39' }}>
				item {data.title}
			</Text>
		</View>
	</View>;

render() {
	return (
		<View style={styles.container}>
			<View
				style={{
					backgroundColor: '#A34C39',
					height: 44,
					flexDirection: 'row',
					alignItems: 'center',
					justifyContent: 'center',
				}}>
				<Button
					title="grid"
					onPress={() => this.setState({ itemsPerRow: 2 })}
				/>
				<Button
					title="list"
					onPress={() => this.setState({ itemsPerRow: 1 })}
				/>
			</View>
			<ScrollView>
				<Grid style={{ height: 20, alignItems: 'center', margin: 15 }}>
					<Col size={95}>
						<Text style={{ color: 'white' }}>Search area</Text>
					</Col>
					<Col size={5}>
						<Icon name="sliders" size={20} color="white" />
					</Col>
				</Grid>
				<Collection
					style={styles.list}
					renderItem={this._renderItem}
					data={[
						{
							title: 'MORE ARB twin compressor mount',
							image:
								'https://shechive.files.wordpress.com/2012/02/a-kitty-cat-7.jpg',
						},
						{
							title: 'Synergy bar pin eliminators',
							image: 'https://i.ytimg.com/vi/OAUtiqYDhEc/maxresdefault.jpg',
						},
						{
							title: 'Wii Controller',
							image:
								'https://www.softpaws.com/template/images/landing_page/july_cat_image.jpg',
						},
						{
							title: 'Super fantastic brakes',
							image:
								'https://pbs.twimg.com/profile_images/816329825438797824/a0PtxNhf.jpg',
						},
						{
							title: 'Buy this or you will die, or dont cause whatever',
							image: 'https://i.ytimg.com/vi/-HE3jj5Ah2M/maxresdefault.jpg',
						},
						{
							title: 'Roll bars',
							image:
								'https://c1.staticflickr.com/9/8195/8134328246_ff817faa2a_z.jpg',
						},
					]}
					itemsPerRow={this.state.itemsPerRow}
				/>
			</ScrollView>
		</View>
	);
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#303747',
},
item: {
flex: 1,
height: 200,
margin: 5,
alignItems: 'center',
justifyContent: 'center',
},
list: {
flex: 1,
},
});

export default Home;
`

Add posts as stories

the posts that do not represent event might be considered as stories to engage more the users

Radio input is not getting updated inside Grid

Here is my Grid:

Here is my function to render checkbox:

_renderItem = (data, i) => (
<View style={[{ backgroundColor: data.color }, styles.item]} key={i} >
<View style={{ height: 50 , width: 45, marginBottom: -12}}>
<CheckBox
color={"#000000"}
selectedColor={"#000000"}
checked={data.checked}
checkedColor="black"
onPress={() => {this.updateSelectedPlaceType(data.idx)}}
/>

<Text style={{color:'white'}}>{data.type}

);

And i have:
updateSelectedPlaceType = (i) => {
const newPlaceType = [...this.state.placeType];
newPlaceType[i].checked = !newPlaceType[i].checked;
this.setState({placeType : newPlaceType });
}

Add staggered grid support

span col or row?

Hi I want to make table like this:

Can u give me some advices? THanks

Add unit tests

onEndReached wont trigger after refreshControl

this sometimes happen. even with your example

Warning: Invalid prop 'refreshControl'

I'm getting 3 warnings when using this library after upgrading to the RN 0.41

Warning: Failed prop type: Invalid prop 'refreshControl' of type 'function' supplied to 'ListView', expected a single ReactElement.
    in ListView (created by Grid)
    .... 
Warning: Failed prop type: Invalid prop 'refreshControl' of type 'function' supplied to 'ScrollView', expected a single ReactElement.
    in ScrollView (created by ListView)
    .... 
Warning: Failed prop type: Invalid prop 'refreshControl' of type 'function' supplied to 'RCTScrollView', expected a single ReactElement.
    in RCTScrollView (created by ScrollView)
    .... 

It still seems to work. I'm not really sure what's going on.

itemHasChanged

When i use itemHasChanged to resole the issue ( #3 ) of not update on staus change i use

                    itemHasChanged = {(d1, d2) => {
                        return d1 === d2
                    }}

Is this normal ?

Get rid of `componentWillReceiveProps`

relates to #35

See: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops

It would be better if you could add the x-axis option

it is not firing endreach inside scrollview

<ScrollView onEndReachedThreshold={0.5} onEndReached={(x)=>{ alert(x.distanceFromEnd)}}>            
  <Grid .../>
</ScrollView>