RN5 on back hook

usage.js

import React, {useLayoutEffect} from 'react'
import useRN5Back from './useRN5Back'

export default function Example({navigation}) {
  const [headerLeft, onBack] = useRN5Back(navigation, () => { //note any variables here
    console.log('I am doing cleanup before onBack!')
  })
  
  useLayoutEffect(() => {
    navigation.setOptions({headerLeft});
  }, [navigation]) //if the hook function has variables they be deps here
  return null //UI here, such as a button with onPress={onBack}
}

useRN5Back.js

import React, { useCallback } from 'react'
import { BackHandler } from 'react-native'
import { useFocusEffect } from '@react-navigation/native';
import { HeaderBackButton } from '@react-navigation/stack'

export default function useRN5Back(navigation, callback) {
  useFocusEffect(
    useCallback(() => {
      const onBackPress = () => {
        callback();
        return true;
      };
      BackHandler.addEventListener('hardwareBackPress', onBackPress);
      return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, [callback])
  )
  const customGoBack = () => {
    callback()
    navigation.goBack()
  }
  const customBackUI = () => {
    return <HeaderBackButton onPress={customGoBack}/>
  }
  return [customBackUI, customGoBack]
}