react native

react-native-bootsplash을 사용하여 splash screen 구현하기

이번에는 react-native-bootsplash을 사용하며 겪은 약간의 시행착오를 기록하고자 한다. 일단, react-native-bootsplash는 현재 가장 안정적으로 관리되고 있는 React Native의 Splash Screen 라이브러리이다. react native directory 검색 결과, 4개의 splash screen 라이브러리를 확인할 수 있는데 하나는 expo 라이브러리이고 나머지 세 라이브러리 중 두 라이브러리는 관리가 안된지 각각 2년, 6년이 지나가고 있다. 유일하게 최근까지 관리되고 있는 라이브러리가 React-Native-Bootsplash이다. 또한, ignite를 통해 생성한 프로젝트에 설정된 splash 스크린 라이브러리이기도 하기에 현재 기준으로 가장 믿을만한 ..

React Native 인터넷 연결 확인하기 (@react-native-community/netinfo)

아무래도 대부분의 모바일 앱은 인터넷 연결이 필요한 경우가 많다. React Native 개발중에도 대부분의 경우 와이파이나 모바일 네트워크 연결이 필요한 경우가 대다수인데, API 요청을 보내고 나서야 네트워크가 연결되지 않은 것을 확인하는 케이스를 좀 더 진지하게 생각해보기로 하였다. 앱을 사용하는 도중에 와이파이 연결을 까먹고 에러가 나는 것 보다, 네트워크 연결이 필요한 앱이라면 처음부터 네트워크가 연결되지 않았음을 알려주는 편이 더 좋다고 생각하였다. 그래서 RN에서 네트워크 연결을 확인하는 방법에 대해서 알아보았고, 결과물을 공유하고자 한다. @react-native-community/netinfo 위의 라이브러리를 통해서 손쉽게 네트워크 연결 상태를 확인할 수 있다. npm i @react-..

React-Router-Dom을 React Native에서 사용하기 (React-Router-Native)

react에서 아마 가장 많이 사용되는 라우팅 라이브러리는 react-router-dom이다. react native에서는 라우팅을 위해서 react-navigation을 많이 사용하지만, react router dom을 사용하고자 한다면 react router native를 사용할 수 있다. 🍅 react router native의 기본적인 사용법은 다음과 같다. import React from 'react'; import {Text, SafeAreaView} from 'react-native'; import {NativeRouter, Route, Routes} from 'react-router-native'; import Landing from './screens/Landing'; function A..

React Native 앱 Drawer 구현하기 (react-native-gesture-handler)

React Native에서 Drawer를 구현하기 위해서 다양한 라이브러리가 있다. 그런데, React Navigation Stack 등에서 사용하기 위해 설치하는 react-native-gesture-handler에 Drawer에 대한 기능이 이미 구현되어 있다는 것을 최근에 알게 되었다. 이를 모르고, Drawer에 대한 라이브러리나 중복 구현을 하는 것을 막고자 이 글을 남기게 되었다. react-native-gesture-handler는 DrawerLayout 이라는 컴포넌트를 가지고 있다. Drawer를 구현할 스크린 상위에 DrawerLayout를 감싸는 것으로 손쉽게 Drawer를 구현할 수 있다. 다음은 공식 문서를 참고한 소스코드 예제이다. // ~ 생략 ~ const handleDraw..

ignite - React Native의 boilerplate

React Native 프로젝트를 생성하는데 있어서 CLI를 이용하거나 expo를 이용하는 등 여러가지 선택지가 있을 수 있다. 다만, 여기에 더해서 mobx나 splash screen 등 추가적인 설정까지 해주는 boilerplate를 사용할 수도 있다. 가장 대표적인 React Native의 boilerplate인 ignite를 통해서 프로젝트를 생성해보았다. Ignite ignite를 통해서 생성된 프로젝트는 typescript, navigation, 상태관리, storage, 테스트 라이브러리, Rest Client 등이 이미 설치된 채로 생성된다. 미리 제공되는 라이브러리를 사용하면 되기에, 충돌이나 설정과 같은 골치아픈 일을 겪지 않을 수 있다. 초기 설정에서 demo를 지우지 않는다면, ig..

React Native 생체인증 사용하기 (react-native-biometrics)

React Native의 생체인증을 사용하기 위해서 라이브러리를 설치하였다. 사용한 라이브러리는 react-native-biometrics다. Face Id 인증 구현 예시 import ReactNativeBiometrics, {BiometryTypes} from 'react-native-biometrics'; const onClickAuth = useCallback(async () => { const rnBiometrics = new ReactNativeBiometrics({ allowDeviceCredentials: true, }); const {biometryType} = await rnBiometrics.isSensorAvailable(); console.log('biometryType', bio..

React Navigation 중첩 라우팅 구현하기

React Navigation은 대표적인 React Native의 라우팅 라이브러리이다. 모바일 환경의 라우팅을 구현하다보면, 중첩으로 구성된 라우팅이 필요한 경우가 많다. 예를들어, 탭으로 구성된 앱이 있을 때 탭 내부에서 스택으로 라우팅이 필요한 경우가 있다. 많은 경우 탭 내부에서 상세 페이지가 필요한 경우가 있기에 이런 경우에는 탭 위에 스택이 쌓여있는 구조가 된다. 공식 문서를 참고하여 이를 구현하면 다음과 같다. import React from 'react'; import {View, Text} from 'react-native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createStack..

React Native에서 node 내장 라이브러리 사용하기 (rn-nodeify)

노드에는 기본적으로 crypto, path, url, assert 등의 라이브러리가 내장으로 제공된다. 리액트에서도 이를 사용하기 위해서 웹팩 설정을 변경하는 등의 추가적인 설정이 필요했는데, 리액트 네이티브에서도 그렇다. 이를 간단하게 설정할 수 있게 해주는 라이브러리가 있는데, rn-nodeify이다. 이번엔 rn-nodeify의 사용법에 대해서 기록하고자 한다. npm i rn-nodeify 설치가 끝나면, package.json의 script에 postinstall을 작성한다. "postinstall": "rn-nodeify --install crypto,url,assert --hack" 위의 명령어를 통해서 자동으로 기입된 라이브러리를 설치할 수 있다. 위에서는 crypto, url, asser..