lucholaf / react-native-grid-view Goto Github PK
View Code? Open in Web Editor NEWReact Native Grid/Collection View component
License: MIT License
React Native Grid/Collection View component
License: MIT License
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
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
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.
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')"
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.
Need to implement something like onEndReached={this.props.onEndReached}
props
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 ?
I'm too lazy to add blank lines in single item, I've watched the source, and nth found. Is there any solution?
this error is coming in groupItems index.js 16, I am using react native version 0.37 and react 15.3.2
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?
Hi,
Thanks for this module - it's excellent. Does it support the onEndReached parameter of ListView, therefore allowing infinite scrolling?
Thanks,
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
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.
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?
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 (
);
},`
Cannot we adjust gridview content with according to each device? can we omit render per row properties of gridview?
How to make gridview item clickable? is there any method to do that?
Would be great to have an example with fully working infinite scroll.
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.
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
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
Can Scrollbar be visible always? Not just when I move the list down or up?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.