How can I call two functions on an 'onPress' event in React Native?

Question

In the below code, I want to call both methods on the onPress event, but I'm facing some issues. How can I call two methods on an onpress event?

One method for start chatting and the second for changing images on the onpress event.

chatStart = () => {
    var { msg } = this.state;
    var { o_code } = this.state;
    var ucod = o_code;
    //console.log(o_code);
    var { session } = this.state;
    //console.log(session);
    var { ocod } = this.state;
    //console.log(ocod);
    var { Name } = this.state;
    var user_name = Name;

    var request = new XMLHttpRequest();
    request.onreadystatechange = e => {
        if (request.readyState !== 4) {
            return;
        }

        if (request.status === 200) {
            console.log("success", request.responseText);
        } else {
            console.warn("error");
        }
    };

    // var msg = "good things take some time";

    console.log(user_name);

    request.open(
        "POST",
        "http://www.aonde.biz/mobile/getChat.php?ocod=" +
        ocod +
        "&ucod=" +
        ucod +
        "&session=" +
        session,
        true
    );
    request.setRequestHeader(
        "Content-type",
        "application/x-www-form-urlencoded"
    );
    request.send("message=" + msg + "&name=" + user_name + "&ocod=" + ocod);
};

changeImage = () => {
    console.log("state changed!");
    this.setState({
      uri: require("./35-reject-red.png")
    });
  };

<View>
  <TouchableOpacity activeOpacity={0.5} onPress={this.changeImage}>
    <Image source={this.state.uri} />
  </TouchableOpacity>
</View>

`but faces some issue` don't you want to tell us which issue? — Vladyslav Matviienko, Nov 13 '18 at 07:05
ok, just create 1 more function, in which call both functions that you want to call onpress, and call this new function onpress — Vladyslav Matviienko, Nov 13 '18 at 07:14
please view my latest comment in which i call changeImage method but issue in calling chatstart method at a time. — Atul Tiwari, Nov 13 '18 at 07:17
`just create 1 more function, in which call both functions that you want to call onpress, and call this new function onpress ` — Vladyslav Matviienko, Nov 13 '18 at 07:18
possible duplicate [how-to-call-multiple-javascript-functions-in-onclick-event](https://stackoverflow.com/questions/3910736/how-to-call-multiple-javascript-functions-in-onclick-event) — c-chavez, Nov 13 '18 at 07:32

Machalvan · Accepted Answer · 2020-03-02T09:56:41.737

3

To call multiple functions on onPress, separate the calls with semicolons, like:

onPress={() => { functionOne(); functionTwo(); }}

edited Mar 02 '20 at 09:56

answered Nov 13 '18 at 08:21

Machalvan

71
1
7

score 0 · Answer 2 · edited May 29 '22 at 10:44

0

Merge the two functions that you want to call in one function and give it a name like 'onPressBlaBlaButton'. And in the render method, call this function.

<View>
  <TouchableOpacity
     activeOpacity={0.5}
     onPress={this.onPressBlaBlaButton}>
    <Image source={this.state.uri} />
  </TouchableOpacity>
</View>

edited May 29 '22 at 10:44

Peter Mortensen

30,738
21
105
131

answered Nov 13 '18 at 08:35

VolkanSahin45

1,922
12
25

How can I call two functions on an 'onPress' event in React Native?

2 Answers2