인프런 커뮤니티 질문&답변

2.14.0 버전으로 하니까 되었습니다.!

gesture-handler 라이브러리 설치 후 오류가 발생하나요?

1. cmd 창에서 java -version 후  결과

2. android/build.gradle 파일

3. android/gradle/wrapper/gradle-wrapper.properties 파일

    

을 보여주실 수 있나요?

1.  

   

   2

   

   3

   

gesture-handler 라이브러리 설치하고 나서 오류가 뜨네요ㅜㅜ

오류

PS C:\Users\m_k\mynewproject\front> npx react-native run-android
(node:7680) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
> Task :react-native-masked-view_masked-view:processDebugManifest FAILED                                                                                                                                                                                   

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/8.0.1/userguide/command_line_interface.html#sec:command_line_warnings
36 actionable tasks: 3 executed, 33 up-to-date

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 

Warning: SDK processing. This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-masked-view_masked-view:processDebugManifest'.
> A failure occurred while executing com.android.build.gradle.tasks.ProcessLibraryManifest$ProcessLibWorkAction
   > com.android.manifmerger.ManifestMerger2$MergeFailureException: Error parsing C:\Users\m_k\mynewproject\front\node_modules\@react-native-masked-view\masked-view\android\src\main\AndroidManifest.xml

* 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 17s
error Failed to install the app.
info Run CLI with --verbose flag for more details.

우선 build.gradle 맨 밑줄에

apply plugin: "com.facebook.react.rootproject"

추가하시고 gradle clean 후 다시 빌드해보시겠어요?

cd android
./gradlew clean
cd ..
npx react-native run-android

이렇게 넣었고

이런 오류가 떴고 gradlew clean 할 때도 저 문장 기입하고 오류가 뜨긴 했습니다.

그럼 새 폴더 만드시고 강의 리포지토리 클론해보시겠어요?

1. 클론

git clone https://github.com/InKyoJeong/Matzip.git

2. 브랜치 변경

cd Matzip
git checkout origin/lecture/2-3

3. npm install & run

cd front
npm install
npx react-native run-android

아래와 같은 compileDebugKotlin이 있긴 한데 정상적으로 실행이 되네요! 감사합니다 ㅠㅠ 저거는 무시해도 괜찮을까요?

다행이네요. 앱 개발 특히 네이티브가 아닌 크로스 플랫폼으로 처음 개발하다 보면 개인 개발 환경의 node, jdk, kotlin, gradle, adb, metro + iOS 종속성... 등의 버전 호환 문제 때문에 어려움이 있습니다.

그래도 몇 번 하다보면 익숙해 지실겁니다.

1번째 오류는 로컬 jdk 버전과 명시된 타겟 버전, kotlin 버전 차이 오류로 보여집니다.

2번째 사진에서 BUILD SUCCESSFUL이 되었다면 위에서 말한 종속성, 버전, 라이브러리 등 문제가 없는 것으로 이해하시면 됩니다.

3번째 사진처럼 앱에서 오류가 발생하는 경우 대부분 직접 작업한 src 폴더 안의 코드 문제로 보면 되는데, 아마 2-3강은 저 부분이 진행되지 않아서 그 이후 강의에서 추가하시는 것 같네요.

미리 확인해 보시려면

import React from 'react';
import {StyleSheet} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import AuthHomeScreen from '../screens/AuthHomeScreen';
import LoginScreen from '../screens/LoginScreen';
import {authNaviagtions} from '../constants';

export type AuthStackParamList = {
  [authNaviagtions.AUTH_HOME]: undefined;
  [authNaviagtions.LOGIN]: undefined;
};

function AuthStackNavigator() {
  const Stack = createStackNavigator<AuthStackParamList>();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name={authNaviagtions.AUTH_HOME}
        component={AuthHomeScreen}
      />
      <Stack.Screen name={authNaviagtions.LOGIN} component={LoginScreen} />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({});

export default AuthStackNavigator;

import React from 'react';
import {StackScreenProps} from '@react-navigation/stack';
import {Button, SafeAreaView, StyleSheet, View} from 'react-native';
import {AuthStackParamList} from '../navigation/AuthStackNavigator';
import {authNaviagtions} from '../constants';

type AuthHomeScreenProps = StackScreenProps<
  AuthStackParamList,
  typeof authNaviagtions.AUTH_HOME
>;

function AuthHomeScreen({navigation}: AuthHomeScreenProps) {
  return (
    <SafeAreaView>
      <View>
        <Button
          title="로그인화면으로 이동"
          onPress={() => navigation.navigate(authNaviagtions.LOGIN)}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

export default AuthHomeScreen;

이렇게 수정해보세요. 2-4강의 코드입니다.

정말 감사합니다!

react-native-gesture-handler 라이브러리는 네이티브(android의 경우 kotlin/java)을 포함하는 라이브러리입니다. 따라서 react native로 개발한 앱을 android로 빌드할 때 compileDebugKotlin를 통해서 기존 kotlin 버전 혹은 새로 명시한 버전과 충돌이 없는지 또는 라이브러리 패키지가 손상되진 않았는지 확인하는 과정이라고 생각하시면 됩니다.

호환이 되지 않는 라이브러리 버전 혹은 아까와 같은 다른 kotlin 버전을 사용하면 애초에 해당 Task에서 build가 실패하니 SUCCESS가 되었다면 상관없습니다.

앞으로 네이티브 설정이 필요한 라이브러리(android 또는 iOS 폴더에 직접 코드를 수정/추가)를 사용한다면 많이 보시게 될 Task입니다.