Jake의 블로그

# React Native에서 그림자를 넣기 위해서는 아래와 같이 style에 그림자를 정의하는 파라미터들을 입력해야 원하는 그림자를 표현할 수 있습니다. 그런데 문제는 파라미터의 프리셋이 없다는 것입니다. 정말 간단하게 그림자를 표현하고 싶었을 뿐인데 적절한 값을 찾아 헤매는 것은 정말 비효율적입니다. 이럴 때는 아래의 페이지를 이용하시면 좋습니다. React Native Shadow Generator ethercreative.github.io - 위의 링크로 이동 후에, 표현하고 싶은 깊이감을 슬라이더로 고르면, 우측에 이에 해당하는 파라미터가 자동으로 변경되므로 이 값을 복사해서 사용하시면 됩니다. 참고로 Android와 IOS에서의 표현 차이도 확인이 가능하니 참고하시면 좋을 것 같습니다.

# React Native에서 Android 기기에서 폰트 스케일링 옵션을 설정한 경우 앱에서도 폰트가 확대되어 제대로 표시가 되지 않고 잘리는 경우가 있습니다. 이 문제는 아래의 옵션으로 해결할 수 있습니다. {children} // 기본적으로 모든 텍스트 컴포넌트에 적용하려고 할 경우 // index.js 등에서 아래와 같이 추가해 주시면 됩니다 Text.defaultProps = Text.defaultProps || {}; Text.defaultProps.allowFontScaling = false;

# 패키지, 앱 이름과 함께 프로젝트 생성하기 - RN 프로젝트를 생성할 때 별도의 옵션을 넣지 않을 경우, 앱 이름으로 패키지 이름 등 모든 이름이 결정되어버리기 때문에, 추후에 이를 변경하기 위해서 번거로운 작업이 필요하다. 만약 아직 패키지 이름 등이 결정되지 않은 경우에는 어쩔 수 없지만, 패키지 이름을 정하고 시작할 수 있는 경우 아래의 옵션을 사용하여 추후 번거로운 작업을 줄일 수 있다. # 한 줄 팁 - "--package-name" 으로 패키지 명을 정하고, 사용자에게 표시될 이름을 "--title"을 이용해서 정한다 npx react-native@latest init MyAppName --package-name com.foo.bar --title "My App Name"

# react-native-toast-message - Toast Message는 앱 내에서 사용자들에게 이벤트의 발생과 그 내용을 알려줄 수 있는 직관적인 UI 요소로 많은 앱에서 사용된다. 물론 Toast Message의 구현 난이도 자체는 높지 않기 때문에 직접 구현하는 것도 좋은 방법이지만, Toast Message가 서비스의 핵심 적인 기능은 아니다보니 적당한 라이브러리가 있을 경우 이를 활용하면 시간을 절약할 수 있다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 라이브러리를 소개하려고 한다 # 깃헙 페이지 https://github.com/calintamas/react-native-toast-message GitHub - calintamas/react-native-toast-message:..

# react-native-store-review 라이브러리를 활용해서 앱 리뷰 요청 기능을 추가해보자 - 사용자들에게 선택 받는 앱이 되기 위한 필수 조건 중에 별점과 리뷰가 있다. 문제는 이런 리뷰를 작성하는 것은 귀찮은 일이기 때문에 사용자는 앱이 마음에 들어도 알아서 리뷰를 작성하는 경우는 드물다. 이럴 때 조금이라도 사용자의 마음을 동하게 하는 것이 리뷰 요청 기능이다. 앱을 적절히 활용한 순간에 리뷰 작성에 대한 창이 뜰 경우, 조금 더 리뷰를 작성해줄 확률이 올라간다. 그렇기에 모든 앱 개발에 있어서 필수적으로 필요한 기능이 아닐까 한다. 본 포스팅에서는 이런 리뷰요청 기능을 쉽게 구현할 수 있게 만들어주는 라이브러리를 소개하려고 한다. # Github Page GitHub - oblador..

# react-native-system-bars를 활용해서 안드로이드 시스템 숨기는 방법 - RN으로 크로스 플랫폼 개발을 하다보면, 안드로이드에서는 시스템 바와 네비게이션 바로 인한 추가적인 처리가 필요한 경우가 있다. 안드로이드 운영체제 특성 상 하단 시스템 메뉴가 자리를 차지 하고 있기 때문이다. 특히 앱이나 게임에서 전체 화면을 다 사용하고 싶은 경우에는 이 처리가 필수적이다. 그렇다보니 이를 지원하는 다양한 라이브러리르들이 있지만, 최근에 사용해본 추가적인 삽질 없이 바로 동작하던 라이브러리를 하나 소개하려고 한다. # 깃헙 페이지 GitHub - hudl/react-native-system-bars: Control the visibility of Android's Status Bar and N..

# react-native-element-dropdown - Dropdown은 웹 또는 앱에서 많이 사용되는 선택 UI입니다. 문제는 이러한 UI들이 대부분 네이티브 UI를 사용하다보니, Android와 IOS에서 동일한 디자인이 아니라는 것입니다. 이러한 문제를 해결하기 위해서는 적절한 라이브러를 활용하는 것이 효율적입니다. 지난 번 관련 포스팅에서는 간단하고 쉽게 사용할 수 있는 깔끔한 라이브러리를 소개했었습니다. [React Native][라이브러리 소개] 지금까지 봤던 가장 깔끔한 Dropdown / Picker / Select # React Native에서 사용가능한 가장 마음에 드는 react-native-dropdown-picker - React Native에서 선택 옵션을 구현할 때, 일반..

# react-native-restart를 사용해서 런 타임 중에 앱 번 들을 재시작 하는 방법 - 안녕하세요 Jake입니다. 오늘은 react-native-restart 라이브러리를 이용해서 앱 실행 중에 앱 번들의 재시작 기능을 추가하는 방법을 소개하려고 합니다. 사실 앱 번들의 재시작 기능은 필요하지 않도록 개발을 하는 것이 가장 좋지만, 언어나 테마 변경, 데이터 삭제 등의 경우에 쉽게 상태를 초기화 할 수 있기 때문에 유용한 기능이기도 합니다. # 깃헙 페이지 https://github.com/avishayil/react-native-restart GitHub - avishayil/react-native-restart: React Native Package With One Purpose: To ..

# NativeWind 라이브러리를 이용해서 TailwindCSS를 쉽게 적용하는 방법 소개 - 최근 개발하고 있는 모든 웹 프로젝트에서 스타일링에는 TailwindCSS를 사용하고 있습니다. 그런데 얼마전 React Native로 개발할 일이 생겼습니다. 문제는 이미 Tailwind에 중독된(?) 몸이었기 때문에, 어떻게든 Tailwind를 사용하고 싶었습니다. 다행히도 RN에서 Tailwind를 사용할 수 있게 도와주는 라이브러리를 찾아냈습니다. tailwind-rn, nativewind 정도가 눈에 들어왔고, 검토 결과 nativewind를 사용하기로 하였습니다. 본 포스팅에서는 nativewind의 설치 및 적용 방법을 설명하면서, 왜 nativewind를 사용하게 되었는지도 말쓰드리려고 합니다...

# rn-emoji-keyboard 라이브러리를 활용해서 Emoji 입력 키보드 구현 방법 소개 - 안녕하세요 Jake입니다. 본 포스팅에서는 Emoji를 추가할 수 있는 키보드를 라이브러리를 사용해서 쉽게 추가할 수 있는 방법을 소개하려고 합니다. 이모지는 간결하고 색감 있게 여러 가지 상황이나 느낌을 표현할 수 있기 때문에, 사용자들한테 제공하기 좋은 UI 요소 중 하나입니다. 하지만 이모지 입력하기 위한 UI를 직접 만들기는 쉽지 않습니다. 이런 경우 오늘 오늘 소개할 라이브러리를 활용해보시면 어떨까 합니다. # 깃헙 저장소 - https://github.com/TheWidlarzGroup/rn-emoji-keyboard GitHub - TheWidlarzGroup/rn-emoji-keyboard:..