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..

기존 RN 프로젝트를 Refactoring 하기 위해 Redux를 공부했습니다. 하지만 아쉽게도 팀 내부 회의 후 Redux 대신 MobX를 도입하기로 결정해서 Redux로 Refactoring을 진행하지는 못했지만, Redux를 공부한 내용을 간단히 정리하려 합니다. (MobX는 추가적으로 더 공부한 후 정리하려 합니다😁) ※해당 게시글은 Redux에 대해 자세한 설명보다는 각 용어나 개념에 대한 짧은 정리 수준의 내용으로 이뤄져 있습니다. 조금 더 깊고 많은 내용을 원하시는 분은 참고 자료에 있는 게시글 들을 보시는 것도 좋을 거 같습니다. Redux란? 점유율이 가장 높은 상태 관리 라이브러리로, 글로벌 상태 관리를 쉽게 할 수 있도록 도와준다. - container component와 presen..

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)를 이용하여 계단 함수처럼 구현했습니다. 구현해야 할 효과 및 기능 위 예시를 위해 구현해야 할 기능은 아래와 ..

문제 상황 react version: 16.13.1 react-native-version: 0.63.4 문제가 발생한 OS 및 version: ios 14.0 해당 이슈는 ScrollView나 FlatList가 사용된 모든 스크린에서 발생되는 건 아니였습니다. 때문에 정확한 원인을 찾기는 힘들었지만 다행히 구글링을 통해 해결방법은 찾았습니다. 해결 방안 이슈의 원인은 '어떠한 이유로 ios 환경에서 ScrollView(또는 FlatList)를 사용 시 scrollIndicatorInsets props의 right 속성에 0이 적용이 안된다.'인 거 같습니다. 해당 이슈는 이미 react-native issue에 올라와 있으며 이슈 페이지에 올라온 예시처럼 scrollIndicatorInsets props..

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-..

Splash Screen이 적용된 React Native 앱을 Xcode를 통해 실제 ios 기기에 실행한 후 앱을 종료하고 다시 앱을 켜면 Splash 화면에서 앱이 10초가량 멈추고 종료되는 현상을 겪었습니다. 해당 문제에 대한 실마리는 Stack Overflow에서 얻을 수 있었습니다. https://stackoverflow.com/a/44835285 React native app stuck on splash screen on device but works in simulator My React Native app works in the XCode simulator with no issues, but when I run in a physical device, my iPhone, there's a p..