[RN-CheatSheet] Android Edge-to-Edge Layout

HYUNGU, KANG·2024년 10월 28일
1

React-Native-CheatSheet

목록 보기
21/24

Target sdk 35(Android 15) 부터 iOS 와 동일하게 Status bar, Navigation bar 영역까지 화면을 확장시킬 수 있게 됩니다.

before

after


iOS 의 경우 iPhone X 에서 이 레이아웃이 처음으로 도입되었을때 "대" 혼란이 있었다.

새로운 레이아웃의 디바이스가 새롭게 출시될 때 마다 react-native-iphone-x-helper 와 같은 라이브러리에서 하드 코딩된, 상하 여백을 받아와서 사용을 하거나 직접 구해서 사용을 했어야만 했다.

이후에는 React-Native 자체적으로 SafeAreaView 컴포넌트를 제공해주기도 했지만, 이제는 react-native-safe-area-context 커뮤니티 라이브러리가 표준이 되었다.

때문에, 이번 안드로이드 업데이트는 RN 생태계에 큰 영향 없이 safe-area-context 라이브러리 업데이트로 지나갈 수 있지 않을까 한다.

이와 관련된 react-native 팀의 입장도 동일하다.
safe-area-context 같은 커뮤니티 라이브러리 쓰세요
https://github.com/react-native-community/discussions-and-proposals/discussions/827

(아니면 react-native-permissions, boot-splash 등의 오픈소스를 운영중인 zoontek 의 react-native-edge-to-edge 가 있다.)

profile
JavaScript, TypeScript and React-Native
post-custom-banner

0개의 댓글