본문 바로가기

React Native13

npx expo run:android fails: Plugin [id: 'expo-module-gradle-plugin'] was not found in any of the following sources: 에러 해결 기존 프로젝트에 push 알림 기능을 추가한 뒤 development build를 하니 제목과 같은 에러가 났다.expo-image-loader관련하여 에러 사항이 떴었는데 구글링을 통해 해결했다. npx expo install --check 위 명령어로 expo 라이브러리 버전을 체크하여 업데이트 시켜줬다. 이후에 다시 진행하니> Task :app:processDebugMainManifest FAILED/android/app/src/debug/AndroidManifest.xml:17:93-116 Error: Attribute meta-data#com.google.firebase.messaging.default_notification_channel_id@value value=(default).. 2025. 8. 13.
app build에 대하여 ReactNative에서 추가된 의존성이 있다면 cd ios && pod install을 해야 한다. https://imaustin.tistory.com/3 CocoaPods는 왜 쓰는거야?CocoaPods를 쓰는 이유를 모르면ReactNative를 사용하는 이유를 다시 생각해야 해요. ReactNative CLI 프로젝트를 구축할 때에 iOS를 위해서 CocoaPods를 사용합니다. 그런데 왜 CocoaPods를 사용하는 지 생각해imaustin.tistory.com pod install & pod update & pod repo updatehttps://onelife2live.tistory.com/30 2025. 8. 6.
[RN] react-native-root-toast 라이브러리로 gif 넣어 커스텀 Toast 만드는 법 라이브러리 공식문서https://www.npmjs.com/package/react-native-root-toast?activeTab=readme react-native-root-toastreact native toast like component, pure javascript solution. Latest version: 4.0.1, last published: 4 months ago. Start using react-native-root-toast in your project by running `npm i react-native-root-toast`. There are 89 other projects in the npm registrwww.npmjs.com기본 사용법에서 텍스트 넣는 자리에 컴포넌트 .. 2025. 7. 16.
[RN] expo Stack과 Tabs의 차이 이전화면으로 뒤로 가기 안되는 이유 회사에서 프로젝트 하나를 처음부터 혼자 맡아서 해보고 있다.api 나오기 전에 얼추 ui는 완성 했는데탭화면을 이동하다가 각 기종별로 제스처에 뒤로가기를 하면 이전화면으로 돌아갈 수 있도록 하라는 피드백을 받게 됐다.import { openModal } from "@/components/atom/Modal";import { useFocusEffect, useRouter, useSegments } from "expo-router";import { useCallback } from "react";import { BackHandler } from "react-native";import { colors } from "../constants";export const useBackHandler = () => { .. 2025. 7. 7.
yarn local package 만드는 법 ✅ 목표 구조my-ui-kit/├── src/│ ├── MyButton.tsx //예시│ └── index.ts ├── package.json├── tsconfig.json├── .gitignore├── README.md├── babel.config.js└── .npmignore (또는 설정으로 src 제외하지 않도록 주의) ✅ 1. 패키지 초기화 (터미널 사용)mkdir my-ui-kitcd my-ui-kityarn init -y ✅ 2. TypeScript 설정yarn add -D typescriptnpx tsc --init // build 시 타입에러 나면 타입스크립트 설치yarn add typescript --dev// 다시 빌드yarn build 🔍 왜 필요한가요?tsc는 TypeSc.. 2025. 5. 29.
[expo] expo-camera를 이용해서 바코드 스캔 구현하기 qr 말고 바코드 스캔하는 기능을 만들어야 하는데 전에 만든 기능은 RN 라이브러리이다 보니 Expo에서 제공하는 기능으로 바꾸려고 한다. Expo면 Expo 답게! RN이면 RN답게 ! 공식 문서를 보면 Expo BarCodeScanner 라이브러리가 있는게 이제는 사용하지 않는다고 나와 있으니 주의하시길! 안내문처럼 expo-camera를 사용하면 된다고 한다. https://docs.expo.dev/versions/latest/sdk/camera/ CameraA React component that renders a preview for the device's front or back camera.docs.expo.dev 위에 링크 들어가서 Expo 공식 문서 그대로 설치하고 사용하면 된다. 1. .. 2025. 4. 29.
[expo] eas buil 및 배포하기 및 재배포 expo eas 공식 문서 보고 그대로 따라하면 되는게 그냥 복기할겸 한번 더 남겨야징 1. 최신 eas cli 설치npm install -g eas-cliyarn global add eas-cli 2. expo 계정 로그인eas login 3. 프로젝트 구성eas build:configure 여기서 안드로이드 빌드 중 에러가 날 수 있음🤖 Android buildThe field "cli.appVersionSource" is not set, but it will be required in the future. Learn moreIt looks like that you are using a custom metro.config.js that does not extend @expo/metro-config... 2025. 4. 29.
Error: EBUSY: resource busy or locked, rmdir 키보드에서 Windows 키 와 R을 눌러 실행 명령 상자를 열고 다음을 입력하세요.resmon.exe확인을 클릭하여 리소스 모니터를 엽니다.모니터에서 CPU 탭 으로 이동합니다.검색 상자의 관련 핸들 에서 해당 파일 또는 폴더 경로 를 복사하여 붙여넣습니다.검색아이콘을 클릭하세요해당 파일이나 폴더를 사용하는 모든 프로그램을 볼 수 있어야 합니다.각각 마우스 오른쪽 버튼을 클릭하고 프로세스를 종료합니다.이제 파일이나 폴더에서 하려고 했던 것을 계속하세요.  https://stackoverflow.com/questions/55212864/error-ebusy-resource-busy-or-locked-rmdir 2025. 2. 27.
[RN] forwardRef를 사용하는 이유 1. forwardRef 없이 구현하는 경우import React, { useRef, useState } from "react";import { TextInput, View, Button } from "react-native";// CustomInput 컴포넌트 (ref를 사용하지 않음)const CustomInput = ({ value, onChangeText }) => { return ( );};const App = () => { const [text, setText] = useState(""); const inputRef = useRef(null); const focusInput = () => { if (inputRef.current) { inputRef.current.. 2025. 2. 21.
[RN] 프로젝트 시작하기 (+svg 넣는법) 1. expo 설치당연히 node 설치되어 있어야 함npx create-expo-app@latest 폴더명cd 폴더명 yarn 설치도 바로 하면 됨 2.  expo app 실행npx expo satrt// yarnyarn start 3. npm run reset-projectsvg 넣기 1. 라이브러리 설치yarn add react-native-svgyarn add --dev react-native-svg-transformer  2. Update the Metro ConfigurationOpen your metro.config.jsconst { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");const defaultConf.. 2025. 2. 13.
[RN] Failed to build iOS project. "xcodebuild" exited with error code 65. build 에러 Run script build phase '[CP-User] [Hermes] Replace Hermes for the right configuration, if needed' will be run during every build because it does not specify any outputs. To address this issue, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'hermes-engine' from project 'Pods')› .. 2025. 2. 11.
[RN] FlatList 사용 시 스크롤 막고 싶을 때 데이터가 적어서 화면 밖으로 나가지 않을때에도 FlatList를 사용하면 위아래로 스크롤 시 요소가 움직인다.이를 막기 위해 찾아보니  1 ? [groupedData.length - 1] : undefined} scrollEnabled={groupedData.length > 3} renderItem={/* 생략 */} keyExtractor={(item) => item.orderDate}/> stickyHeaderIndices에 데이터의 갯수를 주고scrollEnabled에는 화면에 넘어가지 않을만큼의 제한 갯수를 정해준다. 2025. 2. 6.