[ANDROID] [FIXED] - Fix BackHandle callback undefined cause crash issue

[ISeekTruth]

Summary:

Error message:

we got an error

t[n] is not a function. (In 't[n]()', 't[n]' is undefined) \n <unknown> (index.bundle:317:168:317)

it related the BackHandle execute handle function.

Investigation result

our project has screen filesApp.tsx, Dashboard.tsx, and Profile.tsx.
When launching the app, the screen order is App.tsx -> Dashboard.tsx, then user can switch to Profile.tsx
For App.tsx and Dashboard.tsx, we just prevent the hardware button action use usePreventHardwareBackPressEffect() in the first line of screen code.

export const useHardwareBackPressEffect = (goBack?: () => boolean): void => {
  useEffect(() => {
    if (goBack) {
      BackHandler.addEventListener("hardwareBackPress", goBack);
      return () => {
        BackHandler.removeEventListener("hardwareBackPress", goBack);
      };
    }
    return undefined;
  }, [ goBack ]);
};
export const usePreventHardwareBackPressEffect = (): void => useHardwareBackPressEffect(() => true);

currently, _backPressSubscriptions has 2 callback functions.
then user switch to Profile.tsx screen, and has the below code for hardwareback button and the second doesn't return true:

// first one
usePreventHardwareBackPressEffect();
...

// second one
useEffect(() => {
  const backButtonListener = BackHandler.addEventListener(
    "hardwareBackPress",
    () => navigate(Navigation.Login);
  );
  return () => backButtonListener.remove();
});

currently, _backPressSubscriptions has 4 callback functions, include previous 2 and new 2 of Profile.tsx.
When the user press hardwareback button, it will navigate to the login screen, so the issue occurs:
the latest callback will be executed first, then the navigation will let the screen unmount, which will destroy the effect, so the code removing 2 hardwareBackPress callback of Profile.tsx by executed

return () => {
        BackHandler.removeEventListener("hardwareBackPress", goBack);
      };

After the navigation ends and the loop is restored, the init i is 3, then i--, i is 2, then _backPressSubscriptions[2] is undefined now and executes as a function, so the app crashes.

for (let i = _backPressSubscriptions.length - 1; i >= 0; i--) {
    if (_backPressSubscriptions[i]()) {
      return;
    }
  }

that's the issue I met.

Changelog:

[ANDROID] [FIXED] - Fix BackHandle callback undefined cause crash issue

Test Plan:

[facebook-github-bot]

Hi @BleemIs42!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[facebook-github-bot]

@rshest has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@rshest merged this pull request in 44705fe.

[react-native-bot]

This pull request was successfully merged by @BleemIs42 in 44705fe

^{When will my fix make it into a release? | How to file a pick request?}