Override the back button action in React Navigations stack header. Useful if you want to pass parameters back to the previous screen #react-native #react-navigation

useBackButtonEffect.js

import { useLayoutEffect } from 'react';
import { HeaderBackButton } from '@react-navigation/stack';

/**
 * Override the back button action in React Navigations stack header
 * @param { Effect } The action to be triggered
 */
const useBackButtonEffect = effect => {
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: (props) => (
        <HeaderBackButton {...props} onPress={effect} />
      ),
    })
  }, [navigation] );
}

export default useBackButtonEffect;