Calling an event when touching a ScrollView item - react-native

Question

Is there a way to call an event when I press on an item inside this ScrollView?
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote(key)}
editMethod={()=> this.editMethod(key, val)} />
});
<ScrollView style={styles.scrollContainer}> {notes} </ScrollView>
Note:
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
export default class Note extends Component {
render() {
return (
{this.props.val.date}
{this.props.val.note}
<TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
<Text style={styles.noteDeleteText}>Del</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this.props.editMethod} style={styles.editNote}>
<Text style={styles.noteDeleteText}>Edit</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
note: {
position: 'relative',
padding: 20,
paddingRight: 100,
borderBottomWidth:2,
borderBottomColor: '#ededed'
},
noteText: {
paddingLeft: 20,
borderLeftWidth: 10,
borderLeftColor: '#0000FF'
},
noteDelete: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2980b9',
padding: 10,
top: 10,
bottom: 10,
right: 10
},
editNote: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2980b9',
padding: 10,
top: 10,
bottom: 10,
right: 70
},
noteDeleteText: {
color: 'white'
},
});

Answer 1

You need to add your all items under TouchableOpacity in which you like to get an event:
<TouchableOpacity
onPress={() => {
alert('Pressed')
}}>
// Keep your element which you like to tap
</TouchableOpacity>
You can refer the react-native doc for more reference.

Answer 2

You can use like this
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote.bind(key)}
editMethod={()=> this.editMethod.bind(key, val)} />
});