saleel / react-native-super-grid Goto Github PK
View Code? Open in Web Editor NEWResponsive Grid View for React Native
License: MIT License
Responsive Grid View for React Native
License: MIT License
Great work on this component! It saved me a good amount of time designing a responsive grid component from the ground up. I did have one small issue with it: the noticeable flicker between when the component is constructed (before it knows the width of its parent) and after it's onLayout event fires. I understand why this happens and that there's not a good general solution for it, but this can be avoided if the container width could be passed to the GridView as a prop.
My use case is rendering a GridView into a container that is half the width of the display, and that width can't be changed at runtime (orientation is locked to landscape). The actual width of this container will vary between devices, but it's absolute width can always be calculated at runtime by Dimensions.get('window').width / 2
, without the need for onLayout
events. If I could pass this calculation to GridView as a prop, it could be used to initialize the GridView's state, and the subsequent onLayout
triggers could be skipped. In this case, the grid will render as expected the first time without flickering.
Does this sound useful in general, or am I potentially using the wrong component to accomplish this? If this does sound good, I have an implementation I can provide via a PR.
Thanks again!
Is there a method to clear or remove items from the gridview, for example I have an api call that updates with new photos when that method is called I would like to delete the current contents of the gird view
So this is a bit of an odd one... I have a tabbed navigation consisting of three tabs, each page identical apart from the data being fed in to the list. The first two tabs that are mounted display perfectly but the third and subsequent lists don't display anything unless I first scroll up or down slightly. Only then, do the grid items appear.
Now I have gotten around this by adding the following property to the list view which seems to fix it:
removeClippedSubviews={false}
Any ideas what could be causing this? I'm using react-native-router-flux for the navigation and just a simple image as the components to render on the list.
I want to use jusifyContent: 'flex-start' inside itemContainerStyle in SuperGridSectionList, but no change occurs, continue using justifyContent: 'center'.
H pal,
it will great to have this feature for better scroll experience, dont you think?
btw, Im using this lib for SectionList:
https://github.com/jsoendermann/rn-section-list-get-item-layout
hello,
by https://facebook.github.io/react-native/docs/listview.html
ListView is DEPRECATED
se one of the new list components, such as FlatList or SectionList
I'm playing with this nice module you've made and looking to implement this in the app I'm working on. I'm currently fetching the JSON objects and rendering the RN default ListView, but I'm trying to use this to do the same thing.
'itemDimension' should be 'itemWidth'
I'm try to render the grid by this snippet
const gridSectionRenderer = ({ section }) => {
return (
<Text style={[styles.CommonHeaderText, { fontSize: 25 }]}>
{section.SectionName}
</Text>
);
};
<SuperGridSectionList
itemDimension={130}
sections={this.state.data}
style={styles.gridView}
renderItem={gridViewRenderer}
renderSectionHeader={gridSectionRenderer}
/>
and it's work just fine on Android
still, the problem only occur on iOS just like the picture below
any idea what happening or causing this? any help would be appreciated.
nice grid!, greate work.
I gave a question, how to manual set item per row, example render view like this
[1] [2] [3] // 3 item per row fixed
[4] [5] [6]
[7] [8] [9]
thanks
can we call a refresh function like in standard scrollview in react native?
First I wanted to say it's a great component, second is there a method that can be used to load more items I would like to setup an infinite scroll where I load more photos from an API call.
Either a method when the end is reached or something like onLoadMoreAsync which is called at the end.
@saleel :
Hi, congratulations on the module.
I wanted to ask, but if instead of specifying the size I wanted, specify the number of elements per row regardless of the size of the screen, whether this is large or small.
For example, 5 items per line.
Should you do?
Code:
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, Dimensions } from 'react-native';
//import { Constants } from 'expo';
import GridView from 'react-native-super-grid'; // 2.0.1
const Actor =
[{id:90633,name:"Gal Gadot",profile_path:"/yV2nljqQa3MjrrIK4AllDjmJIcs.jpg"},
{id:62064,name:"Chris Pine",profile_path:"/vSe6sIsdtcoqBhuWRXynahFg8Vf.jpg"},
{id:32,name:"Robin Wright",profile_path:"/tXfQTgcIEPP7gtVdJ44ZxZPhacn.jpg"},
{id:6413,name:"Danny Huston",profile_path:"/jc1eGtCShQ2ZkzqWApiWbA1lbTF.jpg"},
{id:11207,name:"David Thewlis",profile_path:"/lWCGcTKvr4QUi8MvFBleMw8xY8.jpg"},
{id:935,name:"Connie Nielsen",profile_path:"/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg"},
{id:3623,name:"Elena Anaya",profile_path:"/67brgegoJLcIQKiu4EEGtNymaUj.jpg"},
{id:1829985,name:"Lilly Aspell",profile_path:"/rZ8BTHLatm8dtZus4HZFv7GsSuA.jpg"},
{id:1590758,name:"Emily Carey",profile_path:"/esIqsc1XmBRPo07e95C6ebxLD7A.jpg"},
{id:11111,name:"Lucy Davis",profile_path:"/3Qpcq4Pu8lKXtHxtUEHqyOuibbn.jpg"},
{id:5419,name:"Saïd Taghmaoui",profile_path:"/bOh3ZQ64WiGivN6GJrrO8vrw9wU.jpg"},
{id:1125,name:"Ewen Bremner",profile_path:"/7CQBnBHSNDcbY2LucqWqEpKWsCH.jpg"},
{id:1823591,name:"Eugene Brave Rock",profile_path:"/27RL3pfNTBTu2zeNvFQTLFvCrJv.jpg"},
{id:1310711,name:"Lisa Loven Kongsli",profile_path:"/pwT0UuQ1tsleh3urfabVRj0UE3S.jpg"},
{id:139900,name:"Florence Kasumba",profile_path:"/oLKR9435H3sjeCWWvD0rLGsL5t9.jpg"},
{id:1767342,name:"Madeleine Vall",profile_path:"/jACXQG2xHuFeIoxgGGhUbbrZNl1.jpg"},
{id:1831280,name:"Hayley Warnes",profile_path:"/2dPqpifxaxXc6urLimtC6bdkh5s.jpg"},
{id:1767343,name:"Ann Wolfe",profile_path:"/5VVXr5NOSqC0uMxXoXFrIA9eKe8.jpg"},
{id:1009999,name:"Doutzen Kroes",profile_path:"/1aXyxlwPZ6OWaO67gdPBT0K2bAS.jpg"},
{id:1272968,name:"Samantha Jo",profile_path:"/aHUB2vNo5ZbOVnlmqJ4SkUpDXrk.jpg"},
{id:1360156,name:"Ann Ogbomo",profile_path:"/5EGoq8xksh6w1MZJBDgEi7LofDC.jpg"},
{id:62976,name:"Eleanor Matsuura",profile_path:"/6ZbBU8ESZw8wTOdmqF9WJd2I9Gt.jpg"},
{id:174708,name:"Josette Simon",profile_path:"/rtFA2jn0d69EL5GVGukTHSlE4Kl.jpg"},
{id:1831281,name:"Brooke Ence",profile_path:"/1FBI6wg4dV2O8Z5NroCFLoVQ6m1.jpg"},
{id:1831282,name:"Hari James",profile_path:"/q9OXpOaCX2t6cCLr8PO8r53j4YL.jpg"},
{id:1813935,name:"Jacqui-Lee Pryce",profile_path:"/3lp7b4ncDVQYjAkgRmxI3DmBz9L.jpg"},
{id:2467,name:"James Cosmo",profile_path:"/523gSqAG9eSSNmKexFFZYh38SxL.jpg"},
{id:1831379,name:"Martin Bishop",profile_path:"/9a0beQcrkxENGKWJ4z3th25JBjO.jpg"},
{id:1256710,name:"Flora Nicholson",profile_path:"/DT171ClURqTp1sHvliV5oije1X.jpg"},
{id:143892,name:"Steffan Rhodri",profile_path:"/4bptQdwRKCMveddkpZdCvDwcsHQ.jpg"},
{id:1232889,name:"Rachel Pickup",profile_path:"/paSFHcLTDBmR6n04bIpCyJA3rSA.jpg"},
{id:65054,name:"Rainer Bock",profile_path:"/ebmPZimivfRFKYnKp2ygazkJO9r.jpg"},
{id:1831283,name:"Eva Dabrowski",profile_path:"/oqZlnfADX2TLptomZmUXKj8xBzp.jpg"},
{id:1857866,name:"Kattreya Scheurer-Smith",profile_path:"/n1cwG4jJoeN5lxmNSFjC9cKIVWf.jpg"},
{id:1890510,name:"Betty Adewole",profile_path:"/ncvgnSmpJ0IhtcuaKp2WtkZF9lh.jpg"},
{id:1431128,name:"Caroline Maria Winberg",profile_path:"/fXeuNhThb61khaAoccPf59ODLgz.jpg"},
{id:1690518,name:"Rekha Luther",profile_path:"/xadtWM2vvrhDHZ8gcdghPZsglsJ.jpg"},
{id:1890409,name:"Ooooota Adepo",profile_path:"/nWmpjYNQuSG8Kx0FuL37PVvCYNr.jpg"},
{id:1813934,name:"Zinnia Kumar",profile_path:"/dHkO6v9Nh6LfsBaZTpK2nNZ7v82.jpg"},
{id:1830144,name:"Andrea Vasiliou",profile_path:"/r4g0Hw0pzomj8UuLO3D9tNvkO98.jpg"},
{id:1890511,name:"Freddy Elletson",profile_path:"/8lw4YgcBZeFKZ2SYLJ71TobDuSI.jpg"},
{id:1890513,name:"Sammy Hayman",profile_path:"/g2y6domOIIdAht8wfmKmNtNE0WE.jpg"},
{id:1861352,name:"Michael Tantrum",profile_path:"/vfSkp365hUfTTLF5Ye33zGjbNNf.jpg"},
{id:157826,name:"Philippe Spall",profile_path:"/9dNHdrBLr6hY8Vf0bHS5h8mrQzA.jpg"},
{id:1824289,name:"Edward Wolstenholme",profile_path:"/9Acyyk5gIN8qGlQ4VuPZ6VCgw3A.jpg"},
{id:1643761,name:"Jennie Eggleton",profile_path:"/rgLqGrIF6DH4rwKIXMjqT1kVB59.jpg"},
{id:1824290,name:"Frank Allen Forbes",profile_path:"/eBzMDu8kskfefTfl95NukYEVqMh.jpg"},
{id:1824295,name:"Jemma Moore",profile_path:"/9p0GWc7hIgnjt0Ua5zvH1n7hLXU.jpg"},
{id:1890450,name:"Caitlin Burles",profile_path:"/k508jIWbCk6HOliJklZJS3KqPRn.jpg"},
{id:1562095,name:"Ulli Ackermann",profile_path:"/nH3l4SM06Xel28UtVyiRfFIZYAr.jpg"},
{id:1820151,name:"Marko Leht",profile_path:"/34Hfcm5xJzFYIM6A5iNuso1aBaZ.jpg"},
{id:659,name:"Wolf Kahler",profile_path:"/uqHI2PLeGFxdjlw0qIk1D17NjWb.jpg"},
{id:1040480,name:"Dominic Kinnaird",profile_path:"/kRsj6Wm9BzzjIQqlOhndtuwnPCZ.jpg"},
{id:1890458,name:"Fred Fergus",profile_path:"/31rOvizxOVC68pYPfXChHiEt7M.jpg"},
{id:1824301,name:"Freddy Carter",profile_path:"/u4Ibhf8LnRzfuR2IUx6ZQWdWaVv.jpg"},
{id:75256,name:"Ian Hughes",profile_path:"/jQXF27nYEsCAmdFyqJVOKbHZFxf.jpg"},
{id:1052209,name:"Andrew Byron",profile_path:"/yOoY7YAfKzLfJIw9dOyvczH2xmi.jpg"},
{id:1890493,name:"Amber Doyle",profile_path:"/NKO2Q0il3Hj5IFb2jK3LdTAWuU.jpg"},
{id:1171527,name:"Alexander Mercury",profile_path:"/pz3zmiT79qnvGyPUsR6iZkBVf6W.jpg"},
{id:1457240,name:"Gana Bayarsaikhan",profile_path:"/rc7jskbwC1Bn1Uy8iIL4dU0NqFH.jpg"},
{id:1726321,name:"Camilla Roholm",profile_path:"/feaxjgK6F8egTGwlmrZHvN9TftR.jpg"},
{id:1743363,name:"Sofia Abbasi",profile_path:null},
{id:1702788,name:"Georgina Armstrong",profile_path:"/kXLYB8o6nfouKmy690MGDcdNtQo.jpg"},
{id:1743575,name:"Annarie Boor",profile_path:"/mioZHOK2wXGOVc6Ue3pHnahR5Iz.jpg"},
{id:1824293,name:"Harry Brewis",profile_path:null},
{id:1502439,name:"Bern Collaco",profile_path:"/ziLGGjo5GWzYDL8H4MUquoFj8r0.jpg"},
{id:555133,name:"Steve Doyle",profile_path:"/zzAmMr1QsKxbcYgobH05rQGuXnh.jpg"},
{id:1592480,name:"Dino Fazzani",profile_path:"/fjOF76fBGDAKMGeGkuK4HUkLgrx.jpg"},
{id:1624443,name:"Flor Ferraco",profile_path:"/gzwL8y0OT6GDkE5rNAlnXxP2u5m.jpg"},
{id:1527565,name:"Mayling Ng",profile_path:"/jevQBPkbeaCsNs8KPrO9mxok983.jpg"},
{id:1651414,name:"Sternkiker François",profile_path:"/8EcUOLAJ7QpVa9LN4vqoCxd0QQf.jpg"},
{id:1743593,name:"David Georgiou",profile_path:"/eT2ckxteHfwqjCkUNu0FiG643tv.jpg"},
{id:1651385,name:"Roman Green",profile_path:"/uUd7UsRw94bvbluAkntDDdOJpM0.jpg"},
{id:1651394,name:"Shane Griffin",profile_path:null},
{id:1824297,name:"Steve Healey",profile_path:null},
{id:1824294,name:"Karl Fredrick Hiemeyer",profile_path:null},
{id:1502441,name:"Kornelia Horvath",profile_path:"/gDimAObmWPSsFRyaSg40QlDMUNI.jpg"},
{id:1284323,name:"Kevin Hudson",profile_path:"/1OrwAIDUYbwZXOWbF5FZtgGMsCI.jpg"},
{id:1820018,name:"Tim Ingall",profile_path:"/8TBgeYKRItgEkioHaXtSZerFjKM.jpg"},
{id:1824291,name:"Ben Kelleher",profile_path:"/hCxzMivfpFlua0m2b25yQBKjKkr.jpg"},
{id:1813664,name:"John Kinory",profile_path:null},
{id:1824300,name:"Dario A. Lee",profile_path:null},
{id:1809569,name:"Christopher Marsh",profile_path:null},
{id:1699114,name:"Lora Moss",profile_path:"/5j9isIvOyO3EuhBhNxNQToGL4ip.jpg"},
{id:1809570,name:"James M.L. Muller",profile_path:"/b7nuAf9fhZyp6oF09NrGA87vkg4.jpg"},
{id:1735654,name:"Ekran Mustafa",profile_path:null},
{id:1702759,name:"Shaun Newnham",profile_path:null},
{id:1809572,name:"Yves O'Hara",profile_path:null},
{id:1461309,name:"Rajeev Pahuja",profile_path:"/oHXsxs3quaESZXjrFRk0FGHuAO0.jpg"},
{id:1785923,name:"Jag Patel",profile_path:"/uChgXgHBAFBsy3a9NrCiL0klPMS.jpg"},
{id:1635870,name:"Richard Price",profile_path:"/iiITgdpWPmybUfhWd1ktjxDFW1c.jpg"},
{id:1451618,name:"Anthony J. Sacco",profile_path:"/nRUNvLCfe43Rs1OEd4GoztuxxED.jpg"},
{id:1824303,name:"Adam Sef",profile_path:null},
{id:147641,name:"Mick Slaney",profile_path:null},
{id:15217,name:"Zack Snyder",profile_path:"/vdr0DlKJH4Ub7nWZtkanBH65bGH.jpg"},
{id:1824299,name:"Fran Targ",profile_path:"/83eaNik8vdvHCyeUmEo5GfBiVOR.jpg"},
{id:29333,name:"Roy Taylor",profile_path:"/eac87ztd0AcxBLvJPsCoNsvOzVc.jpg"},
{id:1824296,name:"Roy Martin Thorn",profile_path:null},
{id:1824302,name:"Phil Tillott",profile_path:null},
{id:1635843,name:"Matt Townsend",profile_path:"/oAwLdyE519RGtg2bwvoKEZomMOM.jpg"},
{id:1756412,name:"Ray Whelan",profile_path:"/isPM6LslVwFVnDvE8esxAqNJWJR.jpg"},
{id:1743005,name:"Tom Whelehan",profile_path:null},
{id:1824304,name:"Zac Whitehead",profile_path:null},
{id:1651386,name:"Miroslav Zaruba",profile_path:"/kZyZlbiFGoatmZSpeiYjm4hLhlu.jpg"},
{id:590410,name:"Lee Neville",profile_path:"/2CR8faSmvsACfaQg05HWDZo4uEc.jpg"}];
var { width} = Dimensions.get('window');
export default class App extends Component {
render() {
return (
<GridView
itemDimension={width/5-20}
items={Actor}
style={styles.gridView}
fixed={true}
renderItem={item => (
<View style={[styles.itemContainer, { backgroundColor: '#fff' }]}>
<Image style={{
textAlign: 'center',
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
height: 150,
width: width/5-20 }}
source={{
uri: (item.profile_path == null) ?
'https://techreport.com/forums/styles/canvas/theme/images/no_avatar.jpg' :
'https://image.tmdb.org/t/p/w185/'+item.profile_path
}}
/>
<Text numberOfLines={2} ellipsizeMode={'tail'} style={styles.itemName}>{item.name}</Text>
</View>
)}
/>
);
}
}
const styles = StyleSheet.create({
gridView: {
//paddingTop: 25,
flex: 1,
},
itemContainer: {
//justifyContent: 'flex-end',
borderRadius: 4,
//padding: 10,
height: 180,
elevation: 2,
overflow: 'hidden',
//backgroundColor: "#fff", marginTop: 5, marginLeft: 8
},
itemName: {
fontSize: 10,
textAlign: 'center',
color: '#444',
//fontWeight: '600',
},
});
Link expo: https://snack.expo.io/H1_bIs-Vf
When i changed spacing to 3, horizontal space becomes 3 but vertical space stays 10. There is a marginBottom: 10 styling on one of the views which is not affected from spacing prop.
This is my render block
` render() {
let items = this.state.products;
// const navigation = this.props.navigation
if (this.state.ProductsLoaded === true){
return (
<View style={styles.productContainer}>
<Text style={styles.productContainerTitle}>Best Selling Mobiles</Text>
<GridView
itemDimension={140}
items={items}
style={styles.gridView}
renderItem={item => (
<TouchableOpacity style={[styles.itemContainer, { backgroundColor: '#ffffff' }]}
onPress={() => this.props.navigation.navigate('About')}
>
<Image
style={styles.ProductImage}
source={{uri: item.product_primary_images.cdn_url }}
>
</Image>
<Text style={styles.itemName}>{item.name.slice(0,15)}</Text>
<Text style={styles.itemPrice}>
₹ {item.listing_price}</Text><Text style={styles.itemPrice}>
₹ {item.slug}</Text>
</TouchableOpacity>
)}
/>
</View>
)
} else
return (
<View style={styles.productContainer}>
<Text style={styles.productContainerTitle}>Best Selling Mobiles</Text>
<View style={styles.gridViewLoading}>
<ActivityIndicator size="large" color="#4b8ccd" />
</View>
</View>
);
}`
I am getting error Cannot read property 'navigate' of undefined
How can I do this?
return (
<View>
<View><Text>Header</Text></View>
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
);
@saleel :
Hi, I was using the component oddly it seems that the component breaks down.
Where am I doing wrong.
Link: https://snack.expo.io/Sy66K4CLf
When used in typescript, props that can be used with FlatList become type error (eg onEndReached
, onEndReachedThreshold
etc....).
Is this supposed to be? Is it supposed to be used in type script?
I am avoiding it using @ts-ignore
now.
please tell me if there is a way to extend it well.
Hello, many thanks for you work!
I have two questions:
how to set a item onTap callback?
Any chance to have add/del item functionality?
Thanks again.
Hi, this component is superb. Is there a way to get the item index of renderItem
?
Something like in FlatList
?
Ex:
<FlatList
scrollEnabled={this.state.itemList.length > 3}
data={this.state.itemList}
keyExtractor={item => item.id}
renderItem={({item, index}) => this.renderItem(item, index)} //Like This?
/>
how can I add item click handler
I tried to this way, but not working
<GridView
itemDimension={150}
items={this.items}
style={styles.gridView}
renderItem={item => (
{item.name}
)}
/>
Is there any way to use this component to scroll along horizontal and vertical dimensions? Please see my Stack Overflow post for a more explanatory image: How to Scroll Right To Columns in React Native FlatList (2018).
When orientation locked to landscape gridview renders firstly to portrait, then it turns, but dimens are still as if screen is in portrait mode, then it extends to whole the screen and only then i can scroll them
@saleel :
hi, I'm getting along very well with this module. ;)
Would it be possible to add these features?
for example to be able to carry out the pull to refresh.
renderFooter={this.renderFooter)}
onEndReached={this._onEndReached}
What would be the best way of implementning highlighting selected items with onPress events?
Can you please mention in the documentation that for the [email protected] version "itemDimension" should be " itemWidth"?
And pass dimensions a part of object
The current package not working with 0.49++, the problem caused by View.PropTypes deprecated.
solution :
import { View, ListView, Dimensions, ViewPropTypes } from 'react-native';
style: View.PropTypes.style
to style: ViewPropTypes.style,
Hi there so I have a list that is displaying data off firestore. When there is only one item it renders it in the middle of the page, correctly. However if I add more items to the collection the grid keep growing vertically. Refreshing the app (RR) updates the grid to display correctly horizontally with 2 columns.
Grid after refreshing the app entirely (RR).
I would expect this transition of a grid with one row to two rows to happen on a redraw rather then having to refresh the component/app entirely.
Here is the code for this component:
import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import FAB from 'react-native-fab'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import GridView from 'react-native-super-grid';
import {currentDashboardCollection, setUserPath} from "../api/firebase";
export default class Dashboard extends React.Component {
constructor(props) {
super(props);
this.unsubscribe = null;
this.state = {
years: [],
loading: true,
};
}
componentDidMount() {
setUserPath("").then( x => {
currentDashboardCollection().then( res => {
this.unsubscribe = res.onSnapshot(this.collectionUpdate)
});
});
}
componentWillUnmount() {
if (this.unsubscribe) {
this.unsubscribe();
}
}
collectionUpdate = (snapshot) => {
const years = [];
snapshot.forEach((d) => {
const { title, year } = d.data();
years.push({ key: d.id, title, year });
});
years.sort((a,b) => { return a.year === b.year ? (a.title < b.title ? -1 : 1) : (a.year < b.year ? 1 : -1) });
this.setState({ years, loading: false });
};
render() {
const { years, loading } = this.state;
const { navigate } = this.props.navigation;
if (loading) {
return (
<View style={styles.container}>
<Text>Loading</Text>
</View>
)
}
if (years.length === 0) {
return (
<View style={styles.container}>
<Text>You have no years.</Text>
<Text>Add your first year using the pink + button.</Text>
<FAB buttonColor="#f214e2" iconTextColor="#FFFFFF" onClickAction={() => navigate("AddYear")} visible={true} iconTextComponent={<Icon name="plus"/>} />
</View>
)
}
return (
<View style={styles.container}>
<GridView
itemDimension={150}
spacing={15}
items={years}
style={styles.gridView}
renderItem={item => (
<TouchableOpacity
style={styles.collectionItemContainer}
onLongPress={() => navigate("EditYear", { title: item.title, year: item.year, id: item.key })}
onPress={() => navigate("Year", { path: { yearId: item.key }})}
>
<Text style={styles.label}>{item.year}</Text>
<Text style={styles.title}>{item.title}</Text>
</TouchableOpacity>
)}
/>
<FAB buttonColor="#f214e2" iconTextColor="#FFFFFF" onClickAction={() => navigate("AddYear")} visible={true} iconTextComponent={<Icon name="plus"/>} />
</View>
);
}
}
//Styles taken from: https://github.com/saleel/react-native-super-grid
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fafafa',
},
gridView: {
paddingTop: 15,
flex: 1,
},
collectionItemContainer: {
backgroundColor: '#b2b2b2',
borderRadius: 5,
padding: 10,
paddingBottom: 20,
},
title: {
fontSize: 16,
fontWeight: '300',
},
label: {
fontWeight: '900',
fontSize: 44,
},
});
Maybe I have done something wrong. Currently considering working around this by forcing the component to completely refresh.
Would be great to support a grid header similar to the ListHeaderComponent of the section list component.
This is more of a question, not an issue. Does the component re render upon rotation or not?
Thanks!
I want to pull up to load more item,how can i do it ?
Hi,
Current implementation always use a FlatList.
It's like to reuse the grid abilities of this lib but just render items as-is without providing an extra scrollable container.
My usecase is to render a list of photos (small amount, no virtualization needed) as a responsive grid inside an existing scrollable container (which also has a parallax header animation). The grid is not the only element of this scrollview and I can't really use a FlatList header for that.
Hi, thanks for your great library, i want to ask is that possible in this library create a gridview with scolling in horizontal like this
https://blog.iamsuleiman.com/horizontal-scrolling-lists-mobile-best-practices/
thanks
I try use this component I am trying to use this component with an infinite list as it is handled with the FlatList but the onEndReachedThreshold works only once.
`import React, { Component } from 'react';
import { View, Text, Image, ActivityIndicator } from 'react-native';
import GridView from 'react-native-super-grid';
import PropTypes from 'prop-types';
class CardMarkResume extends Component {
constructor(props) {
super(props);
// this._infinityList = React.createRef();
this.viewabilityConfig = {
waitForInteraction: true,
viewAreaCoveragePercentThreshold: 0.1
};
}
_renderFooter = () => {
const { loading } = this.props;
if (!loading) return null;
return (
<View style={{ paddingVertical: 20, borderTopWidth: 1, borderColor: '#CED0CE' }} >
);
}
// uri:'https://unsplash.it/400/400/?random'
render() {
const { data, refreshing, loading, handleLoadMore } = this.props;
return (
<GridView
viewabilityConfig={this.viewabilityConfig}
itemDimension={130}
items={data}
style={styles.gridView}
onEndReachedThreshold={0.1} // compatible con android no tocar
onEndReached={handleLoadMore}
refreshing={refreshing}
loading={loading}
ListFooterComponent={this._renderFooter}
renderItem={item => (
<Image style={{ position: 'absolute', height: 200, width: 200, resizeMode: 'cover' }} source={item.imagen} />
<View style={{ backgroundColor: 'rgba(51, 51, 51, 0.8)', padding: 6, flex: 1, maxHeight: 40, alignSelf: 'stretch' }}>
{item.Title}
$ {item.Precio}
)}
/>
);
}
}
const styles = {
gridView: {
paddingTop: 25,
flex: 1,
},
itemContainer: {
justifyContent: 'flex-end',
padding: 10,
height: 150,
position: 'relative',
overflow: 'hidden'
},
itemName: {
fontSize: 16,
color: '#fff',
fontFamily: 'DINCond'
},
itemCode: {
fontFamily: 'DINMedium',
fontSize: 12,
color: '#fff',
},
};
CardMarkResume.propTypes = {
data: PropTypes.array.isRequired,
refreshing: PropTypes.bool,
loading: PropTypes.bool,
handleLoadMore: PropTypes.func
};
export { CardMarkResume };`
@saleel :
Hi, is SectionHeader supported?
being that I have to do a page system.
Example:
Page 1: the first twenty results
Page 2: the second twenty results
...
Current method uses JSON.parse
& JSON.stringify
to deep clone the sections
data:
react-native-super-grid/SuperGridSectionList.js
Lines 112 to 113 in 48df8ea
The problem is that it will not clone keys with assigned functions as their values. After I moved from the SectionList
to the SuperGridSectionList
I got a lot undefined
properties in the renderItem
and renderSectionHeader
methods.
@saleel would you consider using something like lodash.clonedeep
instead of the method I described above to solve this issue?
Hi can you please help me with this plugin to do multi selection
i want navigate between screen,
click grid quotes from home navigate to quotes
click grid contact from home navigate to contact
Home.js
import React, {Component} from 'react';
import {Text,View,StyleSheet,TouchableOpacity} from 'react-native';
import GridView from 'react-native-super-grid';
export default class Home extends Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const {navigate} = this.props.navigation;
const items = [
{ name: 'Quotes', code: '#1abc9c' ,id: Math.random() }, { name: 'EMERALD', code: '#2ecc71',id : Math.random() },
];
onPress = () => {
this.props.navigation.navigate('quotes')
}
return (
<GridView
itemDimension={130}
items={items}
style={styles.gridView}
renderItem={item => (
<TouchableOpacity key={item.id} onPress={this.onPress}>
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
</TouchableOpacity>
)}
/>
);
}
}
const styles = StyleSheet.create({
gridView: {
paddingTop: 25,
flex: 1,
},
itemContainer: {
justifyContent: 'flex-end',
borderRadius: 5,
padding: 10,
height: 150,
},
itemName: {
fontSize: 16,
color: '#fff',
fontWeight: '600',
},
itemCode: {
fontWeight: '600',
fontSize: 12,
color: '#fff',
},
});
quotes.js
import React,{Component} from 'react';
import {Text} from 'react-native';
export default class Quotes extends Component {
render(){
return(
<Text>Quotes</Text>
)
}
}
parentnavigations.js
import React,{Component} from 'react';
import {createStackNavigator,StackNavigator} from 'react-navigation';
import Intro from '../Screen/Intro';
import HomeScreen from '../Screen/Home';
import QuotesScreen from '../Screen/Quotes';
export default logStack = StackNavigator({
Intro : {
screen : Intro
},
Home : {
screen : HomeScreen
},
Quote : {
screen : QuotesScreen
}
},{
initialRouteName : 'Intro',
navigationOptions : {
header : null
}
})
@saleel : Using this module it would be possible to do something like this:
https://drive.google.com/file/d/1sbTDz7v2MDiFbCZTOmLAw-fSG6dKAdUT/view
Sample code: https://snack.expo.io/S1yAIQilQ
the index from the data mapping function is useful in giving grid items different styles based on their index.
<View style={rowStyle}>
{(data || []).map((item, i) => (
<View key={`${rowId}_${i}`} style={columnStyle}>
<View style={itemStyle}>
{this.props.renderItem(item,i)}
</View>
</View>
))}
</View>
Since it is already accessible, suggest passing it along
I need to show my grid images in 4:5 ratio (width:height). So, I need to set own height (width/4*5) value to the grid images at runtime. Is there s way to do this?
<GridView
spacing={0}
itemDimension={screenWidth/2}
items = {this.renderItems()}
style={styles.gridView}
renderItem={this.renderGrid.bind(this)}
/>
Is it possible to add or create header sections? I would like to load photos but in a date section
I need to click item but its not working
here is my code
_onPress = () => {
// your code on item press
console.log('wakaa')
};
_renderCategory(item) {
return (
<TouchableOpacity onPress={()=>this._onPress()}>
<ImageBackground source={{uri: `data:${item.productCategoryImageContentType};base64,${item.productCategoryImage}`}} resizeMode= 'stretch' style={[styles.itemContainer,]}>
<Text style={styles.itemName}>{item.category}</Text>
<Text style={styles.itemCode}>{item.description}</Text>
</ImageBackground>
</TouchableOpacity>
)
}
render () {
return (
<View style={styles.container}>
<GridView
style={styles.gridView}
items={this.state.dataCategoryObjects}
renderItem={this._renderCategory}
onEndReached={this.handleLoadMore}
keyExtractor={this.keyExtractor}
initialNumToRender={this.oneScreensWorth}
onEndReached={this.handleLoadMore}
onEndThreshold={100}
ListHeaderComponent={this.renderHeader}
/* ListFooterComponent={this.renderFooter} */
ListEmptyComponent={this.renderEmpty}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)
}
I have used your example of the super grid view and 7 items of the First Section is loading only. The items of the other section are not loading as per the code.
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.