React native gesture 막기

리액트 네이티브로 앱 개발중 특정 화면에서 뒤로 가기를 막거나 , IOS 의 뒤로가기 제스쳐를 막아야 하는 경우가 생겼다.

예를들면 회원 가입 후, 메인 페이지 진입한 경우 뒤로 가기를 막아야 한다.

 

StackNavigator를 사용중이라면 다음과 같이 설정시 전체 화면에 대해 제스쳐를 막을 수 있다.

const RootStack = createStackNavigator();

function RootNavigator() {
  const initialRouteScreen = "ViewExample";

  return (
    <RootStack.Navigator
      initialRouteName={initialRouteScreen}
      headerMode="none"
      backgroundColor="#ffffff"
      screenOptions={{
        gestureEnabled: false,  // 이곳에 False 설정시 전체 화면에 대해 제스쳐를 금지한다.
        cardStyle: { backgroundColor: "#ffffff" },
      }}
    >
      <RootStack.Screen
        name="ViewExample"
        component={ViewExample}
        options={{ gestureEnabled: false }} // 하위에 설정시 특정 뷰만 제스쳐가 안되게 한다.
      />
    </RootStack.Navigator>
  );
}

export default RootNavigator;

일단 상위 ScreenOptions 에 gestureEnabled 설정하니 의도한대로 모든 뷰에서 제스쳐가 동작하지 않았다.

하지만 특정 뷰에서만 제스쳐를 동작하지 않게 하기 위해 상위 옵션은 제거하고 하위 옵션에 설정하니 동작하지 않는다.

 

관련하여 찾아보니 react native 버그인것 같다.

https://github.com/react-navigation/react-navigation/issues/9119