lucholaf/react-native-grid-view

React Native Grid/Collection View component

react-native-grid-view's Issues

undefined is not an object (evaluating 'items.forEach')

this error is coming in groupItems index.js 16, I am using react native version 0.37 and react 15.3.2

Stretching

It is currently not creating a real grid. If my grid is 2 items per row and i have 5 items, the 5th item is rendered across the entire row rather than in it's own part of the grid. This makes for an annoying effect:

onEndReached for infinite scroll?

Hi,

Thanks for this module - it's excellent. Does it support the onEndReached parameter of ListView, therefore allowing infinite scrolling?

Thanks,

Infinite scroll

Would be great to have an example with fully working infinite scroll.

Gridview not updating

Hello,

I'm currently facing a strange issue with the gridview, which is if I'm updating my array of items which are supposed to get in the grid (basically an array of objects which are then rendered accordingly), the gridview is only updating the rows if an item appears on a new line. If the item would appear on the last line as e.g. second item, the entire gridview is not updated but I need to reopen the scene to have the latest state.

Do you know what the reason for this might be?

Regards
Philipp

Navigating from each item in the GridView

Hi,

I am trying to use GridView to list some movies in my project. Each movie item in the GridView is supposed to take the application to a movie detail page. I was trying to accomplish this using the Navigator component. Please find the code snippet here:

  renderScene = (route, navigator) => {
    switch (route.name) {
      case 'List':
        return (<GridView
          items={data.result}
          itemsPerRow={MOVIES_PER_ROW}
          renderItem={this.renderItem}
          style={styles.listView}
        />);

renderItem = (item) => {
   return <Movie movie={item} onPress={this.bookClicked} />
 }

I would like to pass a 'navigator' object to my Movie component from the switch statement. I am facing trouble in doing that. Any suggestions would be appreciated.

ListView is deprecated

https://facebook.github.io/react-native/docs/listview.html

Different Device show different affect

hi
thanks for your code.

I display 3 image per row , and i set width , on iPhone5 ,it fill the screen , but on iPhone6p it can't fill the screen .

how should i set width by percent ?

Can we omit RenderPerRow properties?

Cannot we adjust gridview content with according to each device? can we omit render per row properties of gridview?

Should add Inset Adjustment on the List

The List will have a margin on the top of it unless you add

automaticallyAdjustContentInsets={false}

Would like to see this as an option that can be fed into the list view.

TouchableOpacity not calling onPress inside of grid

http://stackoverflow.com/q/43153106/147562

undefined is not a function (evaluating React.createClass)

I am getting this error

undefined is not a function (evaluating React.createClass)
while importing react-native-grid-view. It was working fine till I update react-native and node I guess.

Currently I have following versions installed.
react-native-cli: 1.0.0
react-native: 0.26.3
node: v4.4.3

Gap at the last two items

Hi,

I am using your module.

I have 5 items and its is displaying as follows

How can I reduce the gap at the last two items?

Scrollbar

Can Scrollbar be visible always? Not just when I move the list down or up?

Thanks!

Gridview item clickable

How to make gridview item clickable? is there any method to do that?

react-native-grid-view is not compatible for latest react-native version 0.27.1 and react 0.15.1

Hi Team

i created a gridview component its working fine for earlier version of react. but i have taken latest version of react 0.27.1.

Getting a error React.createClass is not a function.(In 'React.createClass', 'React.createClass' is undefined.

could any one help how to resolve this issue.

Thanks
satish

100% width element

is it possible to remove the https://github.com/lucholaf/react-native-grid-view/blob/master/index.js#L58?
It's preventing us to have an element with 100% width.

How do I make it single row with horizontal scroll?

Like how Netflix displays its shows. Is this possible?

https://s3.amazonaws.com/media.nngroup.com/media/editor/2014/04/23/netflix-no-arrow-until-hover.png

Android support?

Getting issue with TouchableOpacity

I am trying to use "TouchableOpacity" in my Grid View and wrote my code like bellow

showPlayer(item) {
        Alert.alert("Sample", "showPlayer");
}

renderItem(item) {
      	return <TouchableOpacity style={{alignItems:"center"}} onPress={this.showPlayer.bind(this, item)}>
      		<ImageLoad
      			placeholderSource = {require('../images/PlaceHolder.png')}
			    style={styles.thumbnail}
			    isShowActivity = {false}
			    source={{uri: thumbnailObj.value}}
		/>
   		<Text style={styles.gridText}> {item.name}</Text>
   	</TouchableOpacity>
  }

For the above code I am getting error as "undefined is not an object (evaluating 'this.showPlayer.bind')"

Vertical 2 Column is scrolling horizontally.

I have a 2 columns and i have it laid out I thought perfect but the grid view not only scrolls vertically but bounces slightly horizontally. Is this a standard effect. I don't think my content size is too large as it is constrained but i am new to flexbox. If this is the standard effect is it possible to remove this with a property. Thanks.

Cell Recycling

Hi,

I saw in your README.md that you mention cell recycling: "uses a 'ListView' in order to have a proper recycle mechanism".

React Native's ListView is simply a wrapper around a UIScrollView and doesn't recycle cells - but instead instantiates all cells up front.

Is your package doing something above and beyond the ListView to achieve recycling?

Headers and Footers do not render

I am not sure if this is by design but renderHeader and renderFooter do not function.

Example Code:
` renderHeader: function() {
console.log(this.props.admin)
if (this.props.admin == true){
return (




Add Post




);
} else {
return (

);
}
},

render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (



);
},`

How can I add GridView gap in react-native-grid-view

I'm too lazy to add blank lines in single item, I've watched the source, and nth found. Is there any solution?

Spacer between the items

Hi

Thanks a lot for this package. I am using it right now. Saved me a good few hours of code :)

I was wondering if there any configuration/prop that can specify the "spacing" between the items?

Section Headers

Is it possible to render this grid with section headers? I've tried but I'm getting mangled section headers that don't stretch with flex: 1 and don't keep their position

undefined is not a function (evaluating React.createClass). Same as #28.

Please reopen the issue as the error still persists:

Node version: v9.5.0,
react-native-cli: 2.0.1
react-native: 0.53.3

version needs bumping to allow current source to be published

not able to detect scroll reached to end.

Need to implement something like onEndReached={this.props.onEndReached} props