React & React Native

리액트 네이티브에서 bottom sheet을 사용하는 방법을 작성하고자 한다.  Bottom Sheet란?Bottom Sheet란 사진처럼 아래에서 올라오는 컴포넌트를 의미한다. UX를 고려하여 thumb zone에 맞게 적절한 높이를 지니고 있으며 다양한 앱 및 웹 서비스에 쉽게 볼 수 있는 컴포넌트이다. 이를 별도 라이브러리 없이 구현하고자 하였으나, 여러 문제가 발생했고 npm 통계 상 라이브러리가 매우 자주 사용되고 있음을 확인하여 성능에 문제가 없겠다 싶어 라이브러리를 적용하기로 했다. https://www.npmjs.com/package/@gorhom/bottom-sheet @gorhom/bottom-sheetA performant interactive bottom sheet with full..

React Native에서 Screen끼리 이동할 때 흔히 사용하는 navigation 함수이다.이는 "console.log(navigation)"의 결과이다. navigation은 다양한 function을 가지고 있음을 알 수 있다.이 중 핵심 몇 개를 알아보도록 하자.  주요 메서드 설명1. addListener설명: 특정 이벤트에 대해 리스너를 추가한다.예제:navigation.addListener('focus', () => { console.log('Screen is focused'); });주요 이벤트:focus: 화면이 활성화되었을 때 호출.blur: 화면이 비활성화되었을 때 호출.beforeRemove: 화면이 제거되기 전에 호출.2. canGoBack설명: 현재 화면에서 뒤로 갈 수 있는지..

https://velog.io/@nuo/React-Framer-Motion

1. Bottom Sheets이란? Bottom Sheet이란 사진에서와 같이 특정 컴포넌트가 아래에서 위로 올라오는, Bottom에 위치한 Sheet이라고 볼 수 있다. 앱에서 페이지 이동을 하지 않으면서 새로운 정보를 보여주어야 할 때 사용되고, 모달창 만큼이나 자주 사용되는 방식이다. 이렇게 컴포넌트가 올라오고 내려오는 방식을 어떻게 React에서 구현할 수 있는지 알아보도록 하자.   2. 구현 과정 현재 내가 구현하려는 건 지도에서 다음과 같이 특정 정보를 담기 위해 Bottom sheet을 React로 만드는 것이다. 필요한 조건은 다음과 같다. 1. 자연스러운 애니메이션 효과2. 특정 위치에서 컴포넌트의 이동이 멈추기3. 닫기, 중간에 위치하기, 완전히 화면을 감싸는 세 가지 경우를 가지기4..