BackHandler

'뒤로가기 버튼을 한번 더 누르면 종료됩니다.'
↑안드로이드 사용자라면 한번쯤은 봤을 법한 문구..

안드로이드는 기본적으로 아이폰과 다르게 navigation-stack이 쌓입니다. 아이폰처럼 navigation-stack이 우측에서 좌측으로 쌓이는 것이 아닌, 아래에서 위로 쌓이기 때문에 제스쳐가 아이폰처럼 매끄럽게 작용하지 못합니다.

💡 안드로이드 사용자의 경우 앱을 뒤로가게 하기 위해서는 아이폰의 좌→우 스와이프가 아닌(+ 좌측 상단 뒤로가기 버튼이 있다 하더라도) 하단 좌측에 있는 뒤로가기 버튼을 사용하게 됩니다.

회원가입 페이지같은 경우에도 좌측 상단의 뒤로가기 버튼(이벤트 등록이 되어있는)을 누르지 않고 네비게이션 바의 뒤로가기 버튼을 눌러버리면 flow가 망가지며 오류를 일으킬 수도 있습니다.

뒤로가기 버튼을 누를 경우 ‘뒤돌아가시겠습니까?’ 라는 toast 메세지를 보여주거나 아예 버튼 이벤트를 막아버리는 식으로 적용하면 됩니다.

타 앱들의 적용 예시

BackHandler?

🔗 참고 링크 : BackHandler · React Native

적용 방법

backHandler 이벤트를 useEffect로 실행시키는 방식으로 진행됩니다.

// 좌측 상단 뒤로가기 클릭 시 실행되는 함수
function leftNavigation() {
    
   // 함수 실행 내용

  }

// 안드로이드 네비게이션 바 뒤로가기 버튼 클릭 시 모달 띄워줌
useEffect(() => {
    if (Platform.OS === 'android') {
      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
        leftNavigation();
        return true;
      });

      return () => backHandler.remove();
    }
  }, []);

// 안드로이드 네비게이션 바 뒤로가기 버튼 클릭 막기
useEffect(() => {
    if (Platform.OS === 'android') {
      const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
        return true;
      });

      return () => backHandler.remove();
    }
  }, []);