coding- w00se

Toast message는 아래 예시처럼 짧은 시간 나타났다 사라지는 메시지를 말합니다. Toast message는 Android에서 기본으로 지원하는 기능으로 React Native의 공식 문서에도 Android 한정으로 지원을 해주고 있습니다. https://reactnative.dev/docs/toastandroid 이번 게시글에서는 javascript로 Toast 메시지를 구현하는 방법을 정리하려 합니다. 필요 라이브러리 - react-native-reanimeted * react-native-reanimated v2 설치가 필요하신 분은 아래 링크를 참고해도 좋을 거 같아요😊 https://coding-w00se.tistory.com/39 진행 순서 1. Toast 기능 구현 step 0. Vi..

Collapsible Tab View는 아래의 예시처럼 Tab Screen의 scroll gesture에 따라 Header가 위치 및 크기가 조절되는 view입니다. React Native에서 해당 기능을 아래 라이브러리로 구현 가능합니다. - react-native-collapsible-tab-view 또한 라이브러리는 아니지만 JungHsuan 님께서 멋진 예시 코드를 공개해주셨습니다. - https://github.com/JungHsuan/react-native-collapsible-tabview 이번 게시글에서는 Collapsible TabView를 구현하기 위해 위 두 가지 코드를 보면서 공부한 내용을 정리하려 합니다. 필요 라이브러리 - react-native-tab-view 진행 순서 ste..

Animated의 Interpolate는 활용도가 높은 메서드입니다. 이번 글에서는 Interpolate의 설정 값 중 extrapolate에 대해서 정리하려 합니다. extrapolate는 Animated value가 interpolate의 inputRage 범위를 벗어났을 때 값을 처리하는 방법에 대한 설정입니다. React Native 공식 문서에 따르면 extrapolate에는 아래와 같이 총 세 종류의 값을 설정할 수 있습니다. 1. extend 2. identity 3. clamp 1. extend extrapolate의 default 값으로 extrapolate에 별도의 값을 설정하지 않으면 기본으로 extend가 설정 됩니다. extend는 Animated Value가 inputRage를 ..

별점(star rating)은 상품이나 컨텐츠에 대한 유저의 만족도를 간단히 수치화할 수 있는 수단입니다. 이번 글에서는 PanResponder로 드래그 가능한 별점의 구현 방법을 정리했습니다. * 별점 기능을 구현하기 위해 react-native-reanimated 라이브러리를 사용했습니다. 라이브러리 설치가 필요하신 분은 아래 링크를 참고하면 좋을 거 같아요☺️ https://coding-w00se.tistory.com/39 구현 예시 특징 1. 터치 또는 드래그 제스처로 별점을 표현할 수 있습니다. 2. 저장되는 별점은 0 ~ 5 사이의 0.5 간격의 수이며, 올림 함수(Math.ceil)를 이용하여 계단 함수처럼 구현했습니다. 구현해야 할 효과 및 기능 위 예시를 위해 구현해야 할 기능은 아래와 ..

Collapsible view는 '접을 수 있는 요소'로 사용자의 터치에 따라 접히고 펼쳐지는 요소를 말합니다. React native에는 react-native-collapsible라는 라이브러리가 존재합니다. 해당 라이브러리는 github start가 2.1k이며 npm에서 weekly downloads가 5만이 넘을 만큼 많은 사람들이 이용하는 라이브러리인 거 같습니다. 빠르게 기능을 도입해야 한다면 해당 라이브러리를 이용하는 것도 좋을 거 같아요😊 https://github.com/oblador/react-native-collapsible 저는 해당 기능을 직접 구현하고 싶은 마음이 있어서 구현해봤습니다. 제가 구현한 예시는 아래와 같습니다. * 구현을 위해 react-native-reanimte..

React Native에서 공식적으로 Animated api를 제공해줍니다. https://reactnative.dev/docs/0.63/animated 해당 기능은 1) 사용하기 쉽고 2) 공부할 자료가 많은 장점이 있습니다. 하지만 아래와 같은 단점이 존재합니다. 1) Reac Native에서 지원하고 있는 Animatd는 JS thread(Javascript Thread)에서 실행되며, 이는 JS thread가 바쁠 때 fps가 떨어지는 현상을 발생시킬 수 있다. 2) 위 현상을 해결하기 위해 useNativeDriver 옵션을 제공하지만 해당 옵셥을 적용할 수 있는 style 속성이 제한된다. - transform 또는 opacity style 속성에는 적용가능 하지만 layout 관련 속성(wi..

하나의 스크린에서 부가적인 기능 또는 정보를 제공하기 위해 아래와 같은 BottomSheet가 사용됩니다. React Native에서 사용할 수 있는 BottomSheet 라이브러리는 'react-native-reanimated-bottom-sheet'라는 라이브러리가 있습니다. https://github.com/osdnk/react-native-reanimated-bottom-sheet 위 라이브러리를 이용할 때 BottomSheet의 높이에 따라 background 색상을 변경시키는 설명은 아래 링크에 나와 있습니다. https://stackoverflow.com/questions/63701648/react-native-react-native-reanimated-bottom-sheet-how-can-..