No onLongPress for react-navigation HeaderBackButton

Question

I am trying to add onLongPress functionality on a custom header back button, but this doesn't seem like an existing prop. Is there a way around it?

I want this functionality as my app is for people with Parkinson's disease, so for users with a tremor, I have an option to only allow onLongPress (so successive keypresses will be ignored and misfires can be avoided). So, if the long press option has been enabled, the onPress functionality will be ignored, and only onLongPress will work. If the option has not been enabled, both onPress and onLongPress should work.

I've made other custom buttons for the header, but I want the back button to maintain the navigation stack, so it goes back to the page the user came from. Is there a way to add a standard touchable opacity, with the same onPress functionality as the HeaderBackButton, so I can add the onLongPress functionality.

Answer 1

You can add headerLeft prop in your navigation configuration, which given a function is passed to it, provides arguments, such as (onPress, label, ...). You can call that onPress in your custom component's onLongPress function to maintain the same functionality.

Here's an example code:

navigationOptions: {
  headerLeft: (onPress) => {
    return <TouchableOpacity ... onLongPress={onPress}>...</TouchableOpacity>
  }
}

You can read more about this here.