Programmatically trigger event in React Native

Programmatically trigger event in React Native

React Native is a popular framework for building native mobile applications, and it uses a similar syntax to React for handling events. In this article, we will discuss how to programmatically trigger an event in React Native.

Using the ref prop

The easiest way to trigger an event in React Native is by using the ref prop. The ref prop is used to get a reference to a component, and we can use this reference to trigger events.

import React, { useRef } from 'react';
import { Button } from 'react-native';

export default function App() {
  const buttonRef = useRef(null);

  const handleClick = () => {
    buttonRef.current.props.onPress();
  };

  return (
    <>
      <Button ref={buttonRef} onPress={() => alert('Hello World!')} title="Click me!" />
      <Button onPress={handleClick} title="Trigger event!" />
    </>
  );
}

In this example, we have created two buttons. The first button has an onPress prop that alerts 'Hello World!' when clicked. The second button calls the handleClick function when clicked. The handleClick function uses the ref of the first button to trigger its onPress prop.

Using the fireEvent method

If we want to trigger an event on a specific element without using the ref prop, we can use the fireEvent method from the @testing-library/react-native library.

import React from 'react';
import { fireEvent, render } from '@testing-library/react-native';
import App from './App';

describe('App', () => {
  it('should trigger an event', () => {
    const { getByText } = render(<App />);
    const button = getByText('Click me!');

    fireEvent.press(button);

    expect(getByText('Hello World!')).toBeTruthy();
  });
});

In this example, we are testing the App component. We render the component using the render method from @testing-library/react-native, and then we get a reference to the 'Click me!' button using the getByText method. We then use the fireEvent method to simulate a press event on the button. Finally, we use the getByText method again to check if the 'Hello World!' text is displayed.

Using these two methods, we can programmatically trigger events in React Native. The first method is simpler and more straightforward, but it requires us to use the ref prop. The second method is more flexible, but it requires us to use a testing library.