문제 배경

군돌이에서 커뮤니티 페이지를 개발하던 중 스택 페이지에서 뒤로갈 때 원치않는 애니메이션이 동작해 사용자 경험을 떨어트리는 문제가 있었다.

원인으로는 @react-navigation/native-stack 패키지를 통해 ios에서 stack navigation을 사용할 때 키보드가 오픈되어 있으면 뒤로가기 제스쳐를 진행할 때 키보드가 자동으로 닫히지 않았다.

그러면 키보드가 왜 자동으로 내려가지 않아서 사용자 경험을 떨어트린건가?

현재 페이지에 KeyboardAvoidingView를 사용한 TextInput이 있는 상태에서 뒤로가기 제스처가 발동되면 키보드가 내려간 줄 알고 TextInput이 내려가게 된다. 그래서 뒤로갈 때 키보드가 자동으로 닫혀야 문제를 해결할 수 있다.

해결 방법

방법 1

@react-navigation/stack 패키지를 사용하는 방법이 있다. 하지만 네이티브 네비게이션 API를 사용한 @react-navigation/native-stack 보다 성능이 떨어진다는 단점이 있다.

방법 2

내가 사용한 방법은 방법 2이다. 방법2는 공식 레포 이슈에서 찾은 방법이다.

/node_modules/react-native-screens/ios/RNSScreenStack.m 파일에서 아래의 코드를 추가하면 된다.

#if TARGET_OS_TV
  [self cancelTouchesInParent];
  return YES;
#else
  // keyboard should hide on swipe 추가 코드
  [_controller.view endEditing:YES];

해결 후

해결 후 뒤로갈 때 키보드가 자동으로 내려가게 되어 원치 않는 TextInput의 애니메이션 동작을 막을 수 있어 사용자 경험을 올릴 수 있었다.

알게된 점

• native-stack은 뒤로가기 제스처가 발동할 때 키보드가 자동으로 내려가지 않는다.
• 이런 원치않은 애니메이션 동작으로 사용자 경험을 낮출 수 있다는 것을 깨달았다.