Comments (4)
Hi there,
You are in full control of the item you want to present in the grid. You can define your own TouchableOpacity in renderItem
and have your own onTap equivalent callbacks.
Similarly, delete functionality can be implemented on your end by adding a delete button and on clicking that you can remove the item from the items array. If this items is in your state and the same state variable is passed the grid as items
prop, then the grid will re-render.
from react-native-super-grid.
Thanks for you fast response.
Already tried a TouchableOpacity around each item, it get triggered on initial render and never more.
renderItem={item => (
<TouchableOpacity
onPress={this.props.click(item.name)}
underlayColor="blue">
<View style={[styles.itemContainer, { backgroundColor: item.code }]} >
<Image
style={styles.button}
source={require('../assets/images/robot-dev.png')}
/>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
</TouchableOpacity>
)}
Sorry I am just starting with react/native, it is probably me doing something wrong.
Thanks you.
from react-native-super-grid.
Try onPress={() => this.props.click(item.name)}
onPress expects a function as the value. You are calling the function there, and onPress gets the return value from props.click and not the actual function.
props.click is executed for each item when the component is rendered initially, which is why you saw the click results on first load (even without clicking the item I suppose).
from react-native-super-grid.
Thats works. It can bubble the click correctly now.
Many thanks again!
from react-native-super-grid.
Related Issues (20)
- Image Caching / Rendering HOT 2
- Items in list overlapping HOT 10
- StickyHeader support for SectionGrid HOT 1
- FlatGrid Paging Scrolling issue HOT 2
- onViewableItemsChanged ERROR! HOT 2
- SectionItem<ItemType> for Typescript requires "title" HOT 2
- Use Animated components instead of default one? HOT 1
- Feature request: Allow different justifyContent for grid components with dynamic heights HOT 1
- Grid items overlap when value passed to staticDimension updates on device rotation HOT 3
- [QUESTION] How to make spacing only betwen items HOT 4
- Unexpected margin/spaces above `ListHeaderComponent` HOT 1
- Render some items with full width HOT 2
- get current index while scrolling HOT 3
- Could this render for some big cell and some small cell? HOT 2
- bug load first time data in FlatGrid HOT 4
- I want a prop to achieve lazy load data HOT 2
- Library is died? HOT 1
- Warning: FlatGrid: Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead. React Native 0.74.1 HOT 7
- rtl
- Set color and size for Indicator
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-super-grid.