How to call multiple functions when onPress is clicked with React Native?

Sometimes, we want to call multiple functions when onPress is clicked with React Native.

In this article, we’ll look at how to call multiple functions when onPress is clicked with React Native.

How to call multiple functions when onPress is clicked with React Native?

To call multiple functions when onPress is clicked with React Native, we can assign onPress to a function that calls all the functions.

For instance, we write:

import * as React from 'react';
import { Button, View } from 'react-native';

export default function App() {
  const foo = () => {
    console.log('foo');
  };
  const bar = () => {
    console.log('bar');
  };
  const baz = () => {
    console.log('baz');
  };
  const onPress = () => {
    foo();
    bar();
    baz();
  };

  return (
    <View>
      <Button onPress={onPress} title="button" />
    </View>
  );
}

to define the onPress function that calls foo, bar, and baz.

Then we set the onPress prop to the onPress function.

As a result, when we click the button, we see 'foo', 'bar' and 'baz' logged.

Conclusion

To call multiple functions when onPress is clicked with React Native, we can assign onPress to a function that calls all the functions.