리액트 네이티브 차트 라이브러리를 사용하기 위해서 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 참고 문..

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..

State는 부모 → 자식으로 밖에 값을 전달하지 못한다고 배웠습니다. 하지만 컴포넌트를 분리했을 때 자식 컴포넌트에서 연산한 데이터를 부모에서 사용하고 싶은 경우가 있습니다. Redux 등 전역 상태관리 라이브러리를 사용하지 않고도 할 수 있는 방법을 찾았습니다.😀 함수를 전달하면 됩니다. 👍 📝 자식 컴포넌트 → 부모 컴포넌트 ⦁ 📑 부모 컴포넌트 //전달 함수 const [audio, setAudio] = useState({}) const getAudio = (x) => { setAudio(x) } //return 문 ... //state 넘기듯이 함수도 넘길 수 있습니다. ✔ 자식 컴포넌트에 전달할 함수를 선언합니다. 해당 함수를 자식에서 사용하면 결과적으로는 부모 컴포넌트의 State가 변경되어..

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 눌러서 ..

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-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..

리액트 네이티브 개발을 하다가 앱이 너무 느려진다거나, 소스 코드를 변경해도 적용이 안되는 이슈를 겪게 되었습니다. 에러 메시지도 보여주지 않기 때문에 해결하기 굉장히 힘들었습니다. 🤦‍♂️🤷‍♂️ 결국 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 ..

리액트 네이티브에서 가장 많이 사용되는 라이브러리 중 하나인 React Navigation을 활용해서 하단 탭 바를 구현해 보겠습니다. 리액트의 라우터를 사용하는 것과 비슷합니다. 📝 공식 문서 ✔ 공식 문서에 예제 코드가 나와있으니 따라 해 봅시다. 😀 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org ⦁ 설치하기 npm install @react-navigation/native or yarn add @react-navigation/native //Expo 사용 시 npx expo install react-native-screens reac..