Calling an event when touching a ScrollView item

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'
},
});

key and val. Let me place the Note component in the question — user9240225
– user9240225, Commented May 21, 2018 at 9:17

Nirmalsinh Rathod · Accepted Answer · 2018-05-21 08:50:11Z

0

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.

answered May 21, 2018 at 8:50

Nirmalsinh Rathod

5,2414 gold badges28 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9240225 Over a year ago

If I do this, the event will apply if I press the ScrollView, not the item inside it.

HungrySoul Over a year ago

wrap it inside a view. It'll work when clicked on anywhere inside the view. I don't prefer using buttons, so i use a combination of touchableHightlight with view and text.

Prabhu · Accepted Answer · 2018-05-21 09:25:08Z

0

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)} />
});

edited May 21, 2018 at 9:25

answered May 21, 2018 at 8:59

Prabhu

1,0577 silver badges13 bronze badges

Collectives™ on Stack Overflow

Calling an event when touching a ScrollView item

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related