How to set an item onTap callback?

[gds3k3]

Hello, many thanks for you work!

I have two questions:

1. how to set a item onTap callback?

2. Any chance to have add/del item functionality?

Thanks again.

[saleel]

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.

[gds3k3]

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.

[saleel]

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).

[gds3k3]

Thats works. It can bubble the click correctly now.
Many thanks again!