끄적이는 개발노트

어플로 다양한 기능을 구현하다보면 특정 이미지를 확대한다던가 모달을 띄우거나 할 때 뒷 배경을 흐리게 처리하고 싶을 때가 있다. 정말 단순하게는 opacity를 통해 특정 색에 투명도를 적용하는 방법도 있지만 ui적으로 blur 처리가 더 어울리거나 요구되는 화면들이 있을 것이다. 이럴 때 @react-native-community/blur 라이브러리를 활용하면 된다.https://www.npmjs.com/package/@react-native-community/blur @react-native-community/blurReact Native Blur component. Latest version: 4.4.1, last published: 6 months ago. Start using @react-nat..

React Native에서 이메일을 발송하기 위해서는 react-native-mail 이라는 npm 혹은 기본으로 제공되는 기능을 사용하면 된다. 본인은 RN에서 제공하는 Linking 기능이 너무 간단하고 충분했기 때문에 별도의 라이브러리를 사용하지 않았다. Linking 기능을 통해 이메일을 발송하는 방법과 어플 스토어 링크를 연결하는 방법을 정리한다. 1. 코드// test2.tsximport CustomText from '@/components/text';import {Test2Props} from '@/types/stack';import {Button, Linking, Pressable, View} from 'react-native';import {SafeAreaView} from 'react-..

어플을 사용하는 휴대폰 디바이스 정보가 필요한 경우가 있다. 이럴 때 사용하면 편리한 라이브러리가 있다.https://www.npmjs.com/package/react-native-device-info react-native-device-infoGet device information using react-native. Latest version: 14.0.4, last published: 20 days ago. Start using react-native-device-info in your project by running `npm i react-native-device-info`. There are 650 other projects in the npm registry using react-nwww.n..

React Native의 Navigation 헤더 버튼을 추가하는 방법은 두 가지가 있다.그 동안 개발에서는 아래에 소개할 첫 번째 방법으로만 버튼을 생성해도 충분했다. 이번 프로덕션용 어플을 개발하는 도중에 screen 내 state와 상호작용이 필요한 event가 발생하여 props, recoil 등 방법을 구상해도 하나같이 만족스럽지 않아 찾아보니 간단한 기본 방법이 존재하여 정리한다. 1. Navigation options 활용아래와 같이 Stack.Screen을 통해 원하는 화면에 커스텀 헤더 버튼을 좌우에 추가할 수 있다.// navigation.tsx... ({ headerShown: true, headerBackVisible: false, headerTitleAlign: '..

이전 글에 이어서 스크린샷을 갤러리에 저장하는 방법을 살펴본다.이는 나중에 살펴볼 fs나 file-access 등과 같이 파일 시스템에 접근하여 파일과 디렉토리에 저장하는 것이 아닌 카메라 앨범에 저장하는 방법이다. https://www.npmjs.com/package/@react-native-camera-roll/camera-roll @react-native-camera-roll/camera-rollReact Native Camera Roll for iOS & Android. Latest version: 7.9.0, last published: 3 months ago. Start using @react-native-camera-roll/camera-roll in your project by runnin..

이번 글에서는 저번 스크린샷을 공유하는 기능을 알아본다. react native에서는 자체적인 share 기능을 제공한다. 굉장히 간단하기 때문에 해당 기능을 처음에는 사용했었다. 하지만, 파일을 공유하기 위해서는 url을 넣어주어야 하는데 이는 ios에서만 지원하는 기능이다. 따라서, 별도의 라이브러리인 react-native-share를 활용한다. https://www.npmjs.com/package/react-native-share react-native-shareSocial share, sending simple data to other apps.. Latest version: 12.0.9, last published: a day ago. Start using react-native-share i..