• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    해결됨

react-native-gesture-handler 라이브러리 설치 후 에러

24.06.20 16:43 작성 24.06.21 13:01 수정 조회수 237

0

  • 질문 작성시 꼭 참고해주세요

    • 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.

    • 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다.

       

    • 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

환경 : 윈도우, 안드로이드

에뮬 : Pixel 5 API 33 + Android13.0

버전 : jdk11, react-native 0.72.6, node 20, gradle 8.0.1

{
  "name": "Matzip",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-masked-view/masked-view": "^0.3.0",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

 

react navigation 사용을 위해 라이브러리를 하나씩 추가하는 도중에 에러가 발생했습니다.

 

  1. yarn add @react-navigation/native

  2. yarn add react-native-screens react-native-safe-area-context

  3. @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
    }

  4. import android.os.Bundle;

  5. yarn add @react-navigation/stack

  6. yarn add react-native-gesture-handler

  7. import 'react-native-gesture-handler';

위 단계까지 하면 아래와 같이 에러가 발생합니다.

info Reloading app...
 BUNDLE  ./index.js

error: Error: ENOENT: no such file or directory, lstat 'C:\Users\uersname\Desktop\Matzip\frontend\node_modules\prop-types\node_modules\react-is'

    at Object.realpathSync (node:fs:2707:29)

    at DependencyGraph.getSha1 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\node-haste\DependencyGraph.js:214:12)

    at Transformer._getSha1 (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler.
        js:26:26)
    at Transformer.transformFile 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Transformer.js:106:19)

    at Bundler.transformFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler.
        js:60:30)
        
    at async Object.transform 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\lib\transformHelpers.js:143:12)

    at async Graph._processModule 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:257:20)

    at async Graph._traverseDependenciesForSingleFile 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:249:5)

    at async Graph.traverseDependencies 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:157:9)

    at async DeltaCalculator._getChangedDependencies 
    (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:281:42)
    

시도해 본 것

  1. android 폴더에서 ./gradlew clean

  2. react-native doctor

  3. react-native-gesture-handler 다운그레이드

  4. node_modules 폴더 삭제 후 yarn install or npm install

  5. 강의 소스 코드와 버전 일치하도록 package.json 수정 후 yarn install

 


react native 프로젝트 새로 생성 후

라이브러리 yarn 명령어로 설치하지 않고 강의 소스 package.json로 교체 후 yarn install 시 아래와 같이 오류 발생

info Opening the app on Android...
info JS server already running.

info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor


FAILURE: Build failed with an exception.

* Where:
Build file 'C:\Users\username\Desktop\Matzip2\node_modules\react-native-gesture-handler\android\build.gradle' line: 310

* What went wrong:
Execution failed for task ':tasks'.
> Could not create task ':react-native-gesture-handler:checkIntegrityBetweenArchitectures'.
   > java.lang.reflect.UndeclaredThrowableException (no error message)

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6s

 npm uninstall react-native-gesture-handler 해당 라이브러리 삭제 후

index.js import 'react-native-gesture-handler' 주석 처리 하면 정상적으로 빌드 되고 에뮬에서 확인 가능합니다.

 

어떻게 하면 react-native-gesture-handler 라이브러리를 사용할 수 있을까요?

답변 2

·

답변을 작성해보세요.

1

Kyo님의 프로필

Kyo

지식공유자

2024.06.22

gestrue handler 버전을 2.17.1 버전으로 해보시겠어요? 동일한 에러인데, 2.17.1 버전 업그레이드로 해결한 이슈가 있습니다.

https://github.com/software-mansion/react-native-gesture-handler/issues/2952

 

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.06.22

안녕하세요, 인프런 AI 인턴입니다.

고라니님의 문제에 대해 답변드립니다.

react-native-gesture-handler 라이브러리 설치 후 발생하는 문제는 종종 프로젝트의 설정이나 호환성 문제로 인해 발생할 수 있습니다. 고라니님께서 이미 여러 시도를 해보셨지만 문제가 해결되지 않은 것으로 보입니다. 여기 몇 가지 추가적인 조치 사항을 제안드립니다:

  1. react-native-gesture-handler의 버전 확인: 현재 프로젝트에서 사용하고 계신 react native 버전과 호환되는 react-native-gesture-handler의 버전을 사용하고 있는지 확인해보세요. 공식 문서나 GitHub의 릴리스 노트를 참고하여 호환 가능한 버전을 파악할 수 있습니다.

  2. MainActivity.java 수정: react-native-gesture-handler는 Android에서 특정 설정이 MainActivity.java에 추가되어야 정상적으로 작동합니다. 아래 코드가 MainActivity.java에 포함되었는지 확인해보세요.
    ”`java
    import android.os.Bundle;
    import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return “YourAppName”;
}

 @Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(null);
 }

}
“`
해당 설정은 react-native-gesture-handler를 정상적으로 초기화하기 위해 필요합니다.

  1. 프로젝트 정리 및 다시 빌드: 변경 사항을 적용한 후에는 다음 명령어를 사용하여 프로젝트를 정리하고 다시 빌드해보세요.

    • 프로젝트 폴더에서 ./gradlew clean 실행
    • yarn start --reset-cache 실행
    • react-native run-android 실행
  2. 호환성 확인: 때때로 특정 라이브러리 간에 호환성 문제가 발생할 수 있습니다. 최신 버전 또는 다른 버전의 react-native, react, 그리고 해당 라이브러리를 사용하여 호환성 문제가 해결되는지 확인해보세요.

위의 조치들로도 문제가 해결되지 않는 경우, react-native-gesture-handler의 GitHub 이슈 트래커를 확인하여 비슷한 문제를 겪고 있는 사용자들의 피드백이나 해결책이 있는지 알아보세요. 때로는 이슈 트래커에 임시 해결책이나 패치가 공유되기도 합니다.

문제가 지속될 경우 구체적인 에러 메시지와 함께 추가적인 도움을 요청해보세요.

채널톡 아이콘