Android can't click push to new screen after used BackHandler back

[pheaktratyboy]

Hi, I have a problem with Android BackHandler after I init a new project with ignite bowser and I was run the project and click Android Back Button Press the app it exit but the problem when I have re-open the app and click button continue push to another screen it not work. Can you help me, please? and provide solution for this issue.

[lyseiha]

+1

[liwenkangatom]

same problem

[liwenkangatom]

use mobx-react instead of mobx-react-lite。

[chakrihacker]

@liwenkangatom do you have any idea why mobx-react-lite doesn't work??

[frdteknikelektro]

Using react-mobx still have same issue

[summxu]

hey boys , how to deal with it now

_{Sent with GitHawk}

[pragneshpj]

useBackButtonHandler() is not working. (Ignite-bowser-5.1.0)

I have set 2 screens in canExit. canExit = ["welcome", "home"] but when press back from home screen then navigation called goBack().

can anyone help me to solve this issue

[dakkafex]

@pragneshpj maybe this helps https://github.com/infinitered/ignite-bowser/issues/347#issuecomment-636271156

[pragneshpj]

@dakkafex useBackButtonHandler() is not working. i want to exit app from 2 screen. -> welcome screen (from auth stack)& -> home screen (drawer stack)

there are so many screen in auth-stack navigator and drawer-stack navigator.

canExit = ["welcome", "home"] is working perfectly in 4.13.0.

[variyanirav]

have any one found the solutions? I have same issue in ignite bowser new version.

[archansel]

Update your use-back-button-handler.tsx with this, got it from here

import { useEffect, useRef, useState } from "react"
import { BackHandler, DeviceEventEmitter } from "react-native"
import { NavigationContainerRef } from "@react-navigation/native"
import getActiveRouteName from "./get-active-routename"

export function useBackButtonHandler(
  ref: React.RefObject<NavigationContainerRef>,
  canExit: (routeName: string) => boolean,
) {
  const [backPressSubscriptions] = useState(new Set())
  const canExitRef = useRef(canExit)

  useEffect(() => {
    canExitRef.current = canExit
  }, [canExit])

  useEffect(() => {
    // We'll fire this when the back button is pressed on Android.
    const handleBackPress = () => {
      const navigation = ref.current

      if (navigation == null) {
        return false
      }

      // grab the current route
      const routeName = getActiveRouteName(navigation.getRootState())

      // are we allowed to exit?
      if (canExitRef.current(routeName)) {
        // let the system know we've not handled this event
        return false
      }

      // we can't exit, so let's turn this into a back action
      if (navigation.canGoBack()) {
        navigation.goBack()
        return true
      }

      return false
    }

    // Subscribe when we come to life
    DeviceEventEmitter.removeAllListeners("hardwareBackPress")
    DeviceEventEmitter.addListener("hardwareBackPress", () => {
      let invokeDefault = true
      const subscriptions = []

      backPressSubscriptions.forEach(sub => subscriptions.push(sub))

      for (let i = 0; i < subscriptions.reverse().length; i += 1) {
        if (subscriptions[i]()) {
          invokeDefault = false
          break
        }
      }

      if (invokeDefault) {
        BackHandler.exitApp()
      }
    })

    backPressSubscriptions.add(handleBackPress)

    // Unsubscribe when we're done
    return () => {
      DeviceEventEmitter.removeAllListeners("hardwareBackPress")
      backPressSubscriptions.clear()
    }
  }, [ref])
}

[archansel]

Warning using my solution, it will remove all hardwareBackPress event listener from other libs too. correct way to handle back button in react navigation 5 is https://reactnavigation.org/docs/custom-android-back-button-handling but I'm still struggling to make it work flawlessly

[archansel]

I created separate issue #357 because it's not relevant with this issue