Calling a callback function from different component onPress in different Component React Native JS

Question

I want the ability to call a function in a third party callback function from say a button with onPress function

<button onPress={this.componentX.onCalendarToggled} /> 

<componentX onCalendarToggled={(calendarView) => { console.log(calendarView); }} />

I just want to trigger the callback function from a different component. I'm new to JS and react native

Answer 1

It's not easy, especially if you are new to React but it can be done with forwardRef and useImperativeHandle .

You need to wrap the subject component with React.forwardRef and decalre 'useImperativeHandle' like this:

    const Component = React.forwardRef((props, ref) => {
     
     ...

     useImperativeHandle(ref, () => ({
          someFunction() {
              doSomething()
          }
      }));

     ...
      
     return {
          ...
     }
 }) 

Then on some other component you can call it like this:

const someRef = useRef();

const fireFunction = () => {
     someRef.someFunction()
}

return (
     <Component ref={someRef} />
)