개발/React Native

[리액트 네이티브(React Native, RN)] rn-sliding-up-panel 모듈에서 ScrollView 컴포넌트를 사용하는 방법(Enable ScrollView inside rn-sliding-up-panel module)

rn-sliding-up-panel 모듈이란? 아래와 같은 동작을 하는 UI 컴포넌트입니다. rn-sliding-up-panel Draggable sliding up panel implemented in React Native www.npmjs.com 의존성 버전 (dependencies version) "expo": "~36.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz" rn-sliding-up-panel 모듈에서 ScrollView 컴포넌트를 사용하는 방법 rn-sliding-up-panel 모듈에서 제공하는 Sli..

개발/React Native

[리액트 네이티브(React Native, RN)] 기기 글자 크기 조정 제한하는 방법

의존성 버전 (dependencies version) "expo": "~36.0.0", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", 리액트 네이티브 앱을 개발하다보면 디바이스에서 설정하는 글자 크기와 스타일에 따라서 애플리케이션 폰트 사이즈가 조정되는 것을 볼 수 있습니다. 우리가 사용하는 디바이스는 디바이스 별로 설정에서 글자 크기와 스타일을 조정할 수 있는 기능을 제공합니다. 문제는 글자 크기와 스타일에서 조정하는 크기들이 애플리케이션의 폰트 사이즈까지 반영이 된다는 점입니다. (물론 폰트 크기 조정을 제한하는 것은 좋은 ..

개발/React Native

[리액트 네이티브(React Native, RN)] 앱과 웹뷰(Webview) 사이에서 인터페이스를 활용해 커뮤니케이션(통신)하는 방법(react native communicate between app webview)

리액트 네이티브(React Native, RN)에서 코드를 구현하다보면 웹뷰(Webview)와 커뮤니케이션을 해야되는 상황이 생기는데요. 이때 리액트 네이티브에서는 인터페이스(Interface)를 활용해서 웹뷰와 커뮤니케이션(통신)을 할 수 있게 제공해주는 기능들이 존재합니다. 이번 포스팅에서는 이러한 기능을 소개하고, 앱 부분에서 처리하는 부분과 웹뷰에서 처리하는 부분을 나눠서 설명을 하도록 하겠습니다. 웹뷰 -> 앱 웹뷰(Webview) / 웹 코드 onMessage 이벤트를 활용한 간단한 예시를 다뤄보도록 할까요? onMessage 이벤트가 발생하는 조건은 웹뷰에서 ReactNativeWebView.postMessage가 실행되어야 됩니다. ReactNativeWebView.postMessage의 ..

개발/React Native

리액트 네이티브(React Native, RN)에서 카카오맵(Kakao 지도) API 사용하는 방법

Dependencies version react-native-webview@8.1.2 react-native@0.61.4 expo@~36.0.0 리액트 네이티브(React Native, RN)에서 카카오지도를 사용하는 방법은 웹뷰(Webview)를 활용하면 아주 간단하게 구현할 수 있습니다. 우선 react-native-webview 모듈을 사용해서 WebView 컴포넌트를 추가합니다. 저는 Location의 이름을 가진 stateful component를 생성하겠습니다. // react native screen view import { WebView } from "react-native-webview"; export default class Location extends Component { ... r..

개발/React Native

[React Native] fontFamily fontName is not a system font and has not been loaded through Font.loadAsync.

Custom Font를 활용하기 위해 spoqa 폰트를 import하는 과정에서 아래와 같은 문제가 발생했습니다. fontFamily "spoqa-regular" is not a system font and has not been loaded through Font.loadAsync. - If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system. Dependencies React Native v0.61 해결방법 state = { loading: true }; async componentDidMount() { await Fon..

개발/React Native

[React Native] ViewPagerAndroid has been removed from React Native 문제 해결방법

React Native의 react-native-swiper 라이브러리를 활용해서 스와이프를 구현하려고 하는데 아래와 같은 에러가 발생했습니다. ViewPagerAndroid has been removed from React Native. It can now be installed and imported from 'react-native-viewpager' instead of 'react-native'. Dependencies React Native v0.61 react-native-swiper v1.5.14 해결방법 yarn remove react-native-swiper yarn add react-native-swiper@nightly react-native-swiper를 제거한 후 react-nat..

개발/React Native

[React Native] React Navigation bottom-tabs에 custom icon 적용하는 방법

리액트 네이티브 라이브러리 @react-navigation/bottom-tabs을 사용할 때 custom icon을 적용하는 방법에 대해서 설명하겠습니다. React Native와 React Navigation 버전정보는 아래와 같습니다. 꼭 참고하시기 바랍니다. Dependencies React Native v0.61 @react-navigation/bottom-tabs v5.0.7 저의 메인 라우트 설정은 아래와 같습니다. active와 inactive에 따른 이미지 처리를 하기 위해 각 이미지를 각 라우트의 property로 설정해뒀습니다. export const mainRoutes = [ { name: "메뉴1", com: Home, inactiveIcon: require("../assets/ic..