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 제거로 인해 이전 버..

이 포스터에서는 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으로부터 cre..