Suggesting a new feature "onBackPress"

[viktoriasiigur]

Is there a possibility that feature "onBackPress" will be added to the library?

The idea is to have a similar functionality to onEnterPress or onArrowPress. Using the library for the TV application, there are a lot of cases where it is necessary to add different callbacks on pressing the back button on a remote control. A simple callback added to the useFocusable hook would make the code prettier and easily readable. Currently I must use listeners for handling those cases.

Example:

const { ref } = useFocusable({
    onEnterRelease: onEnter,
    onArrowPress: (direction) => {
        console.log(direction);
    },
    // requested function
    onBackPress: () => { 
       console.log("back button pressed");
    }
});

[xavi160]

Hi, thanks for reaching out!

The issue I see is that, in most cases, the Back button is not tied to a specific focusable element but rather to the overall container.

In other words, when the user presses Back, they don’t expect a particular view to react; instead, they expect the whole screen to handle it, usually by navigating back.

Do you have a specific use case in mind where this functionality makes sense?

[viktoriasiigur]

Hello!

Thank you for the answer!

It is sometimes important also to have a specific callback for a specific button, because it can happen that it does not only close the container, but redirects the focus to another element. I personally do have to deal with the use case where the back button behaves differently depending on where the focus is, for instance the multi layer settings view, where settings are vertically rendered, when the focus is on the right side, back button should move focus the the left and if the focus is on the left side, back button should close the settings modal.

Even if the onBackButton is mainly tied to a container, it could be super useful feature to handle it in the container callback instead of listeners.

Small example here how would it be convenient to use it:

      const [isOverlay, setIsOverlay] = useState(false);
      const { ref, focusKey } = useFocusable({ 
           onEnterRelease: () => setIsOverlay(true),
           onBackPress: () => setIsOverlay(false) 
     });
     <FocusContext.Provider value={focusKey}>
            <div ref={ref}>
                {isOverlayVisible && <Overlay />} // Not necessary the fullscreen overlay
            </div>
        </FocusContext.Provider>

Since this button is also one of the most commonly used buttons on the TV remotes, I think it would be useful for other developers as well.

If it is still not clear, I'd be happy to explain it further. Thanks in advance!