Requirement: How to go back specific page when use Android physical back key

[terryatgithub]

hi, there is a question I'd like to ask:
How to go back specific page when use Android physical back key ? (key 2 in below pic)

Requirement:
when user press back key(key 1 in below pic), generally it will back to previous page.
but in some special case, it need go back further, like back to the home page.
in this case, I can set as below:

<text>
back
<behavior action="navigate" href="/home.xml"  />
</text>

The question is:
How to do if I want to achieve the same effect with the Android physical 'back key' ? (key 2 in below pic)
React Native backhandler

Failed solution

I tried to use custom-behavior as below, but it failed with error shown in below pic:

<behavior 
      action="android-back-action" 
      action-href="/home.xml" 
      action-action="navigate" 
/>

const androidBackBehavior = {
    action: 'android-back-action',
    callback: (element: Element, onUpdate: HvComponentOnUpdate, getRoot: HvGetRoot, updateRoot: HvUpdateRoot) => {
      const href = element?.getAttributeNode('action-href')?.nodeValue;
      const action = element?.getAttributeNode('action-action')?.nodeValue;
      hyperviewRef.current.onUpdate(href, action, {}, {});
    }
  };

 <Hyperview
        ref={hyperviewRef}
        back={goBack}
        closeModal={closeModal}
        fetch={(input: any) => {
          return fetchWrapper(input, customHeaders);
        }}
        navigate={navigate}
        navigation={navigation}
        openModal={openModal}
        push={push}
        replace={navigation.replace}
        formatDate={formatDate}
        behaviors={[androidBackBehavior]}
 />

[adamstep]

Hi @terryatgithub , in your code sample what does hyperviewRef refer to? I'm guessing this may be causing problems.

As to your question about supporting question about supporting the Android back button:
I think what is needed is not a custom behavior, but a new trigger. The action you want (navigate) already exists, but the trigger (back-button-press) does not exist:

<behavior trigger="back-button-press" action="navigate" href="/home.xml" />

This trigger would need to be added to the HyperRef class, adding an event listener to componentDidMount and cleaning up in componentWillUnmount.

One thing I'm not sure about: currently the functionality of "back" is handled by react-navigation library. So it's possible that pressing back will always unwind the navigation stack, even if we add other behaviors on top of it. I'm not sure about the best way to address this. @flochtililoch or @ashwinibm any thoughts?

[terryatgithub]

hi @adamstep ,

1. hyperviewRef is a standard react ref that refer to the Hyperview component,
   both two methods will fail the same error as above mentioned pic.

const androidBackBehavior = {
    action: 'android-back-action',
    callback: (element: Element, onUpdate: HvComponentOnUpdate, getRoot: HvGetRoot, updateRoot: HvUpdateRoot) => {
      const href = element?.getAttributeNode('action-href')?.nodeValue;
      const action = element?.getAttributeNode('action-action')?.nodeValue;

      // method 1: error
      hyperviewRef.current.onUpdate(href, action, {}, {}); 

     // method 2: the same error too.
      onUpdate(href, action, {}, {}); 

    }
  };                                                                                           
                                                                                               
 <Hyperview                                                                         
        ref={hyperviewRef} // <-------------------- _this is the ref_ 
        back={goBack}
        closeModal={closeModal}
        fetch={(input: any) => {
          return fetchWrapper(input, customHeaders);
        }}
        navigate={navigate}
        navigation={navigation}
        openModal={openModal}
        push={push}
        replace={navigation.replace}
        formatDate={formatDate}
        behaviors={[androidBackBehavior]}
 />

2. will there be the same error if use trigger back-button-press?
3. Is there specific schedule to implement this feature? It's a function that will affect the user experience flow.
   thanks a lot.

[adamstep]

1. will there be the same error if use trigger back-button-press?

I don't think there will be an error in this case, because we don't need the ref passed to the behavior. I believe that's causing the error, the ref gets replaced after every update.

2. Is there specific schedule to implement this feature? It's a function that will affect the user experience flow.

I will discuss it with the team tomorrow evening, will have a better idea at that time. Like I said, this implementation is a bit tricky since we need to account for the default behavior of react-navigation library.

[terryatgithub]

ok, i see. thank you so much, and looking forward to good news.

[ashwinibm]

Hi @terryatgithub , in your code sample what does hyperviewRef refer to? I'm guessing this may be causing problems.

As to your question about supporting question about supporting the Android back button:
I think what is needed is not a custom behavior, but a new trigger. The action you want (navigate) already exists, but the trigger (back-button-press) does not exist:

<behavior trigger="back-button-press" action="navigate" href="/home.xml" />

This trigger would need to be added to the HyperRef class, adding an event listener to componentDidMount and cleaning up in componentWillUnmount.

One thing I'm not sure about: currently the functionality of "back" is handled by react-navigation library. So it's possible that pressing back will always unwind the navigation stack, even if we add other behaviors on top of it. I'm not sure about the best way to address this. @flochtililoch or @ashwinibm any thoughts?

Perhaps we could use the BackHandler provided by react-native to do some custom handling? For example, to disable going back on some screen or going back to the root screen or navigate to a certain screen. May need to watch out for react-navigation behaviors like you mentioned.

[ashwinibm]

It's probably better to handle this at the app level. I've created an example on the demo app that creates a wrapper component where we can customize android back handling. It's a simplified example but one can adapt this to check other route params for example.
#272

[terryatgithub]

@ashwinibm it's a great idea, I will adapt it and try to see how to handle different navigation requirements in different pages.
thanks a lot.