Call two functions with onPress in react native

Question

I have the following two buttons:

        <View style={styles.button}>
          <Button title="ADD" onPress={createDocumentHandler}/>
        </View>
        <View style={styles.button}>
          <Button title="CANCEL" color="red" onPress={props.onCancel}/>
        </View>

I want the first button to trigger both the "createDocumentHandler" function and the "props.onCancel" function

I thought it would be as easy as onPress={createDocumentHandler, props.onCancel} but that only triggers the second method for some reason

Why don't you just make a function, that calls both, and call that with the button? — ASDFGerte, Feb 12 '20 at 14:41
Because anytime I tried to do that {props.onCancel} would never be called — klippy, Feb 12 '20 at 14:42
`onPress={() => { createDocumentHandler(); props.onCancel(); }}` (also: what you tried didn't work because `a, b` evaluates to `b`) — , Feb 12 '20 at 14:43
Does this answer your question? [Call multiple functions onClick ReactJS](https://stackoverflow.com/questions/26069238/call-multiple-functions-onclick-reactjs) — , Feb 12 '20 at 14:45
@ChrisG unsure if there are arguments or `this` context, so potentially `function (...args) { createDocumentHandler.call(this, ...args); props.onCancel.call(this, ...args); }`, but maybe it's certain, that there are just none. — ASDFGerte, Feb 12 '20 at 14:45
@ASDFGerte True, this should do it: `onPress={e => { createDocumentHandler(e); props.onCancel(e); }}` (99% sure it's a functional comp) — , Feb 12 '20 at 14:46
To be reasonable, OP should know, whether it's necessary, because the related functions are his, and it's therefore obvious, whether they use `this` or any arguments. — ASDFGerte, Feb 12 '20 at 14:49

score 2 · Answer 1 · answered Feb 12 '20 at 14:44

2

<Button title="ADD" onPress={createDocumentHandler}/>
createDocumentHandler = () => {
   actionA();
   actionB();
}

answered Feb 12 '20 at 14:44

David

15,894
22
55
66

score 1 · Answer 2 · answered Feb 12 '20 at 14:55

1

You create a custome function createDocumentHandler as :

createDocumentHandler = async() => {
// execute in whatever order
  let a =  await function1();
  let b =  await function2();
}

answered Feb 12 '20 at 14:55

Gaurav Roy

11,175
3
24
45

score 0 · Answer 3 · answered Feb 12 '20 at 14:56

0

Try this

onCancel() => {
    {...}
 };
 function createDocumentHandler()
 {
     {...}
     return onCancel();
 }

function render(){
    return(
        <Button title="ADD" onPress={createDocumentHandler}/>
    )
}

answered Feb 12 '20 at 14:56

Dionisio Malteso

61
6

Call two functions with onPress in react native

3 Answers3