Front-End/React Native

[React Native] react-native-vector-icons 아이콘 깨짐 현상 해결방법 (엑박)

react-native-voctor-icons를 설치했는데, 아이콘이 깨지는 현상이 발생했습니다. 해결 방법 알아봅시다. 😀 📝 해결 방법 https://github.com/oblador/react-native-vector-icons#android GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: C..

[React Native] 리액트 네이티브 차트 라이브러리 추천

웹이나 앱을 개발하다 보면 데이터를 예쁘게 차트로 시각화하고 싶은 경우가 생깁니다. 리액트 네이티브에도 다양한 차트 라이브러리가 존재합니다. ✔ 하지만 기업이 아닌 개인 사용자들이 만든 커뮤니티 라이브러리가 대부분이기 때문에 사용하기 전에 다운로드 수, 최근 업데이트 날짜 등을 잘 확인해야 합니다. 제가 사용해 보고 좋다고 생각한 차트 라이브러리 2가지를 추천해 드리겠습니다. 😀 1. react-native-chart-kit https://www.npmjs.com/package/react-native-chart-kit?activeTab=readme react-native-chart-kit If you're looking to **build a website or a cross-platform mobile..

[React Native] RNSVGSvsViewAndroid 에러, ReadableMap 에러 해결방법

리액트 네이티브 차트 라이브러리를 사용하기 위해서 install 했더니 다음과 같은 에러가 발생했습니다. 패키지 버전들이 충돌 나서 안되는 줄 알고 2일 동안 스택 오버플로와 깃허브 이슈를 엄청 찾아다녔습니다. 😪 2일간의 삽질의 흔적입니다. 😂 📝 해결방법 ⦁ java.lang.Double cannot be cast to abi47_0_0.com.facebook.react.bridge.ReadableMap ⦁ requireNativeComponent: "RNSVGSvgViewAndroid" was not found in the UIManager ✔ 다음 코드를 터미널에 순서대로 입력해 줍니다. 🎉 expo update expo prebuild rm node_modules yarn install 참고 문..

[React Native] Error: Requiring module "node_modules\react-native-reanimated\src\index.ts” 에러 해결법

Drawer Navigation을 설치하다가 다음과 같은 에러가 발생했습니다. ERROR Error: Requiring module "node_modules\react-native-reanimated\src\index.ts", which threw an exception: Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) Make sure reanimated's babel plugin is installed i..

[React Native] 리액트 네이티브 Expo Audio 녹음, 재생 구현하기

Expo에서 오디오 녹음 및 재생을 구현할 수 있는 Audio라는 Expo SDK를 지원합니다. 저는 프로젝트에 음성 일기를 구현하기 위해 사용했습니다. 공식 문서에 예제 코드가 잘 나와있지만, 저는 이런저런 에러로 꽤나 고생했습니다. 😂 📝Audio https://docs.expo.dev/versions/v47.0.0/sdk/audio/ Audio - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev ✔ Usage에 예제 코드가 잘 나와있습니다. Open In Snack 눌러서 ..

[React Native] 리액트 네이티브 링크 Linking 사용방법

HTML의 태그처럼 리액트 네이티브에서도 링크를 열 수 있는 기능이 있습니다. Expo에서 제공하는 Linking 컴포넌트입니다. 앱에서 링크를 왜 열어?라고 생각하실 수도 있지만 같은 URL이라도 모바일에서 접속하면 앱으로 접속되게 만들어 놓은 기업들이 많기 때문에 유용합니다. 😀 📝 사용 방법 https://docs.expo.dev/versions/v46.0.0/sdk/linking/ Linking - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev ✔ Expo 공식문서 입니..

[React Native] 리액트 네이티브 라인 차트 만들기 (react-native-chart-kit)

프로젝트를 하면서 라인 차트를 그려야 해서 리액트 네이티브에서 쓸만한 차트 라이브러리가 있는지 찾아봤습니다. 찾아보니, react-native-chart-kit라는 라이브러리가 주간 다운로드 수가 2만도 넘고 제일 적당한 것 같아서 사용하게 되었습니다.😀 📝 소스코드 https://www.npmjs.com/package/react-native-chart-kit react-native-chart-kit If you're looking to **build a website or a cross-platform mobile app** – we will be happy to help you! Send a note to clients@ui1.io and we will be in touch with you short..

[React Native] 리액트 네이티브 코드 적용 안되는 이슈 해결 (캐시 초기화)

리액트 네이티브 개발을 하다가 앱이 너무 느려진다거나, 소스 코드를 변경해도 적용이 안되는 이슈를 겪게 되었습니다. 에러 메시지도 보여주지 않기 때문에 해결하기 굉장히 힘들었습니다. 🤦‍♂️🤷‍♂️ 결국 Stack Overflow의 도움을 받아 해결하게 되었습니다! https://stackoverflow.com/questions/40985027/unable-to-resolve-module-in-react-native-app Unable to Resolve Module in React Native App I'm getting an error in React Native saying it can't resolve a module. It's saying a certain folder doesn't exist ..