How to detect swipe back event in iphone React Native

user_12206019 0
Viewed 6390

I am developing a react native app, I am trying to clear setinterval function by backhandler event. It works correctly on android phone, but there is no back button in iphone, so I can't stop setinteval function. How can I detect swipe back handler?

This is the behavior

react-native reactjs
2 Answers

Assuming that you are using @react-navigation/native. You can add Listener for beforeRemove event. This event is emitted every time the component is removed/user tries to leave the screen.

navigation.addListener('beforeRemove', (e) => {
    e.preventDefault()
    //clear setInterval here and go back
})

You can find more information here

user_91212930

For me, this snippet is working fine. you can place this code in useEffect or componentDidMount. Make sure to cancel this event if you are navigation between the screens.

For reference, you can visit https://reactnavigation.org/docs/5.x/navigation-events and select the react-navigation version according to your project.

const gestureEndListener = () => {
  console.log(" Called when screen is unmounted " )
}

useEffect(() => {
  const gestureHandler = navigation.addListener('didBlur', gestureEndListener);
  return () => {
    gestureHandler.remove();
  };
}, []);
user_94438350
Related