React Native2 react navigation "material top tabs" scrollable하게 커스터마이징하기. Bitfolio앱을 개발할 때 구현했던 UI의 일부입니다. 해당 포스트에서는 react navigation의 material-top-tabs를 interection을 포함하여 customizing 하는 방법을 공유합니다. 서론 (일기장) animation을 구현할 때 reanimated 라이브러리에 의존하시는 분이 계실 수 있으니 제가 겪었던 경험을 바탕으로 짧게 참고 사항 먼저 소개하겠습니다. :) @react-navigation/material-top-tabs는 react-native-tab-view에 의존하고 있습니다. react-native-tab-view의 Release 목록을 보니 react-native-gesture-handler 와 react-native-reanimated 제거로 인해 이.. 2022. 5. 13. React Native Animated로 스크롤 시 Header Title을 Fade In, Fade Out 구현하기 이 포스터에서는 Animated API를 활용하여 Navigation Header Title 값을 설정하는 동시에 특정 높이에 도달하면 Title을 Fade In, Fade Out 동작 Custom Hook을 만들어 볼 것입니다. 해당 Hook을 scrollable component(ScrollView)에 적용하기까지 공유합니다. 이번에 작성될 코드는 여기서 확인하실 수 있습니다. 전제 조건 React Navigation version >= 5.x.x 라이브러리를 이용해 navigation stack을 구성했다고 가정합니다. 이번 포스터의 핵심은 Custom Hook 만들기 이기 때문에 화면 구성은 최대한 간단히 하겠습니다. 화면 구성 App.tsx 파일에 @react-navigation/stack으로부.. 2022. 1. 13. 이전 1 다음
