[react-native] IOS 환경에서 Input클릭 시 화면 확대되는 현상

환경 : Next.js , ReactNative

 우리 팀의 경우 next.js로 프론트를 구현한 후, 리넥에서 웹뷰만 넣어서 앱을 빌드했다. IOS환경에서는 인풋을 클릭하면 아래와 같이 화면이 확대되는 현상이 발생하는데 이를 없애는 방법을 공유하려 한다.

 

 

 

화면이 확대됨

 

---

Layout.tsx 수정

 

 react 든 next든 바닐라 html이든 뭐든 간에 전체 화면의 부모가 되는 최상위 컴포넌트가 존재할 것이다. 우리 프로젝트의 경우 layout.tsx 파일이 그에 해당했다. 아래 코드를 넣을 시 문제는 해결된다. 다만 웹 접근성에 좋지 않다는 의견이 있으므로 다른 방법을 찾아볼 필요는 있겠다.

 

추가로, 웹뷰 앱을 IOS 빌드 시 SafeAreaView를 사용하게 되는데, 화면 위 아래가 검정색으로 짤릴 수 있다. 배경을 #FFF로 설정하면 해결된다.

 

//Layout.tsx : 최상위 부모 컴포넌트

import type { Viewport } from 'next'

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
}