search

facebook / react-native-website

The React Native website and docs
https://reactnative.dev
MIT License
1.96k stars 4.38k forks source link

Android app fails when using Kotlin with Fabric Native Component Creation guide. #3681

Closed ddepu11 closed 1 year ago

ddepu11 commented 1 year ago

Description

Repo: https://github.com/ddepu11/FabricComponent

Followed this guide to create Fabric Native Component with kotlin but when i run app it fails with below error:

> Task :app:compileDebugJavaWithJavac FAILED
47 actionable tasks: 31 executed, 16 up-to-date
/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:15: error: cannot find symbol
import com.rtncenteredtext.CenteredTextPackage;
                          ^
  symbol:   class CenteredTextPackage
  location: package com.rtncenteredtext
/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:61: error: cannot find symbol
      new CenteredTextPackage()
          ^
  symbol:   class CenteredTextPackage
  location: class PackageList
2 errors

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

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

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (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 24s

Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:15: error: cannot find symbol
import com.rtncenteredtext.CenteredTextPackage;
                          ^
  symbol:   class CenteredTextPackage
  location: package com.rtncenteredtext
/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java:61: error: cannot find symbol
      new CenteredTextPackage()
          ^
  symbol:   class CenteredTextPackage
  location: class PackageList
2 errors

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

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

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (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 24s

    at makeError (/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/execa/index.js:174:9)
    at /Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/execa/index.js:278:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOnAllDevices (/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:82:7)
    at async Command.handleAction (/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/@react-native-community/cli/build/index.js:108:9)
info Run CLI with --verbose flag for more details.

React Native Version

0.71.6

Output of npx react-native info

System: OS: macOS 13.2 CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz Memory: 510.51 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.13.0 - /usr/local/opt/node@18/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.3 - /usr/local/opt/node@18/bin/npm Watchman: 2023.01.23.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 29, 30, 31, 32, 33 Build Tools: 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0 System Images: android-24 | Google Play Intel x86 Atom, android-29 | Intel x86 Atom, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom, android-31 | Google APIs Intel x86_64 Atom Android NDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9619390 Xcode: 14.1/14B47b - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.2.0 => 18.2.0 react-native: 0.71.6 => 0.71.6 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Download the project - https://github.com/ddepu11/FabricComponent

Run yarn && yarn android

Snack, code example, screenshot, or link to a repository

https://github.com/ddepu11/FabricComponent

cortinico commented 1 year ago

Thanks for reporting this. The issue you're havign is that you used Kotlin and you haven't extended the Gradle setup to compile Kotlin files.

Please see my comment here: https://github.com/reactwg/react-native-new-architecture/discussions/8#discussioncomment-5588737

I also believe we need to update the website guides to include this instructions. This is up for grab if someone wants to contribute to the website

ddepu11 commented 1 year ago

Hey @cortinico thanks, I did the Gradle setup to compile Kotlin files, now i am getting this error.

BUILD FAILED in 21s

Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
e: /Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/rtn-centered-text/android/src/main/java/com/rtncenteredtext/CenteredTextManager.kt: (14, 55): 2 type arguments expected for class RTNCenteredTextManagerDelegate<T : View!, U : BaseViewManagerInterface<T!>!> where U : RTNCenteredTextManagerInterface<T!>!

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* What went wrong:
Execution failed for task ':rtn-centered-text:compileDebugKotlin'.
> A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction
   > Compilation error. See log for more details

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

2: Task failed with an exception.
-----------
* What went wrong:
java.lang.StackOverflowError (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 21s

    at makeError (/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/execa/index.js:174:9)
    at /Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/execa/index.js:278:16
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async runOnAllDevices (/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:82:7)
    at async Command.handleAction (/Users/deepanshutiwari/Desktop/Learning/RN/FabricComponent/MyApp/node_modules/@react-native-community/cli/build/index.js:108:9)
info Run CLI with --verbose flag for more details.
ddepu11 commented 1 year ago

So on line no 14 in file CenteredTextManager.kt the variable delegate has type RTNCenteredTextManagerDelegate<CenteredText> and it asking for second type i just replaced it with ViewManagerDelegate<CenteredText> and it worked.

cortinico commented 1 year ago

So on line no 14 in file CenteredTextManager.kt the variable delegate has type RTNCenteredTextManagerDelegate<CenteredText> and it asking for second type i just replaced it with ViewManagerDelegate<CenteredText> and it worked.

Fix for this is here:

OmarThinks commented 12 months ago

Thank you @ddepu11 for posting this error. And thank you @cortinico for clarifying how to solve the issue.

I would like to add that the code on the website has not been updated yet.

Thanks a lot!

CenteredTextManager.kt

line 14

private val delegate: RTNCenteredTextManagerDelegate<CenteredText> = RTNCenteredTextManagerDelegate(this)

When I edited it to 

private val delegate: ViewManagerDelegate<CenteredText> = RTNCenteredTextManagerDelegate(this)

It worked.

Thanks a lot!