Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native 0.75.x #7905

Open
1 task
Tracked by #7915
ertugruldogan opened this issue Aug 15, 2024 · 17 comments · May be fixed by #7913
Open
1 task
Tracked by #7915

React Native 0.75.x #7905

ertugruldogan opened this issue Aug 15, 2024 · 17 comments · May be fixed by #7913

Comments

@ertugruldogan
Copy link

ertugruldogan commented Aug 15, 2024

`BUILD FAILED in 15s
error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
e: /node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/utils/ReactViewGroup.kt:7:59 Unresolved reference: fullBorderRadius e: /node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt:11:45 Smart cast to 'ReactContext' is impossible, because 'instanceManager.currentReactContext' is a property that has open or custom getter e: /node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/viewcontroller/LayoutDirectionApplier.kt:12:45 Smart cast to 'ReactContext' is impossible, because 'instanceManager.currentReactContext' is a property that has open or custom getter e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:53:56 Type mismatch: inferred type is MotionEvent? but MotionEvent was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:53:70 Type mismatch: inferred type is EventDispatcher? but EventDispatcher was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:56:56 Type mismatch: inferred type is MotionEvent? but MotionEvent was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:56:70 Type mismatch: inferred type is EventDispatcher? but EventDispatcher was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:59:54 Type mismatch: inferred type is MotionEvent? but MotionEvent was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:59:68 Type mismatch: inferred type is EventDispatcher? but EventDispatcher was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:77:45 Type mismatch: inferred type is MotionEvent? but MotionEvent was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:77:52 Type mismatch: inferred type is EventDispatcher? but EventDispatcher was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:82:45 Type mismatch: inferred type is MotionEvent? but MotionEvent was expected e: /node_modules/react-native-navigation/lib/android/app/src/reactNative71/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt:82:52 Type mismatch: inferred type is EventDispatcher? but EventDispatcher was expected FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-navigation:compileReactNative71DebugKotlin'. > 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. > Get more help at https://help.gradle.org. BU�LD FAILED in 15s.`

react-native: 0.75.0, 0.75.1, 0.75.2, 0.75.3 and 0.75.4
react-native-navigation: 7.40.1
java: 17
node: 21.1.0
gradle: 8.8
buildToolsVersion = "35.0.0"
minSdkVersion = 24 (react-native-community/discussions-and-proposals#802)
compileSdkVersion = 35
targetSdkVersion = 35
ndkVersion = "27.0.12077973"
kotlinVersion = "2.0.20"

Note: React Native 0.74.5 also works.

Tasks

  1. 0 of 1
    platform: Android type: accepted/bug
@arashkevich25
Copy link

any updates?

@jkirira
Copy link

jkirira commented Aug 27, 2024

Also encountered the same error...

@alexjs87
Copy link

alexjs87 commented Sep 2, 2024

+1

2 similar comments
@quintenbox
Copy link

+1

@peteAhn
Copy link

peteAhn commented Sep 4, 2024

+1

@shubhamdhingra98973
Copy link

any update on this ?

@aliisajokinen
Copy link

+1

@edoardocarpentiero
Copy link

Any update?

@ertugruldogan
Copy link
Author

ertugruldogan commented Sep 16, 2024

We are waiting...

i couldn't wait any longer :)

@siddarthkay
Copy link

I have fixed these issues in my project by creating patches, I will send in a PR after I do some tests.

@siddarthkay siddarthkay linked a pull request Sep 17, 2024 that will close this issue
@ertugruldogan
Copy link
Author

ertugruldogan commented Sep 17, 2024

react-native: 0.75.3
react-native-navigation: 7.40.1
java: 17
node: 22.5.1
gradle: 8.8
buildToolsVersion = "35.0.0"
minSdkVersion = 24
compileSdkVersion = 35
targetSdkVersion = 35
ndkVersion = "27.0.12077973"
kotlinVersion = "2.0.20"

android\gradle.properties
newArchEnabled=false
hermesEnabled=true

It has only been tested for Android.

FIX:1 (0.74.x and 0.75.x )
node_modules\react-native-navigation\lib\android\app\src\main\java\com\reactnativenavigation\utils\ReactTypefaceUtils.java

-import com.facebook.react.views.text.ReactTextShadowNode;
+import com.facebook.react.common.ReactConstants;

    if ((weight == Typeface.BOLD)
-        || ((oldStyle & Typeface.BOLD) != 0 && weight == ReactTextShadowNode.UNSET)) {
+        || ((oldStyle & Typeface.BOLD) != 0 && weight == ReactConstants.UNSET)) {
       want |= Typeface.BOLD;
     }
 
     if ((style == Typeface.ITALIC)
-        || ((oldStyle & Typeface.ITALIC) != 0 && style == ReactTextShadowNode.UNSET)) {
+        || ((oldStyle & Typeface.ITALIC) != 0 && style == ReactConstants.UNSET)) {
       want |= Typeface.ITALIC;
     }

FIX:2 (0.75.x)
node_modules\react-native-navigation\lib\android\app\src\main\java\com\reactnativenavigation\utils\ReactViewGroup.kt

package com.reactnativenavigation.utils

import com.facebook.react.views.view.ReactViewBackgroundDrawable
import com.facebook.react.views.view.ReactViewGroup

val ReactViewGroup.borderRadius: Float
    get() =  0f

FIX:3 (0.75.x)
node_modules\react-native-navigation\lib\android\app\src\main\java\com\reactnativenavigation\viewcontrollers\viewcontroller\LayoutDirectionApplier.kt

package com.reactnativenavigation.viewcontrollers.viewcontroller

import com.facebook.react.ReactInstanceManager
import com.facebook.react.modules.i18nmanager.I18nUtil
import com.reactnativenavigation.options.Options
import com.facebook.react.bridge.ReactContext

class LayoutDirectionApplier {
    fun apply(root: ViewController<*>, options: Options, instanceManager: ReactInstanceManager) {
        // currentReactContext'in null olup olmadığını kontrol ediyoruz
        val reactContext = instanceManager.currentReactContext as? ReactContext
        if (options.layout.direction.hasValue() && reactContext != null) {
            root.activity.window.decorView.layoutDirection = options.layout.direction.get()
            I18nUtil.getInstance().allowRTL(reactContext, options.layout.direction.isRtl)
            I18nUtil.getInstance().forceRTL(reactContext, options.layout.direction.isRtl)
        }
    }
}

FIX:4 (0.75.x)
node_modules\react-native-navigation\lib\android\app\src\reactNative71\java\com\reactnativenavigation\react\modal\ModalContentLayout.kt

package com.reactnativenavigation.react.modal

import android.content.Context
import android.view.MotionEvent
import android.view.View
import com.facebook.react.bridge.*
import com.facebook.react.uimanager.*
import com.facebook.react.uimanager.events.EventDispatcher
import com.facebook.react.views.view.ReactViewGroup

class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView {
    private var hasAdjustedSize = false
    private var viewWidth = 0
    private var viewHeight = 0
    private val mJSTouchDispatcher = JSTouchDispatcher(this)

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        viewWidth = w
        viewHeight = h
        this.updateFirstChildView()
    }

    private fun updateFirstChildView() {
        if (this.childCount > 0) {
            hasAdjustedSize = false
            val viewTag = getChildAt(0).id
            val reactContext: ReactContext = this.getReactContext()
            reactContext.runOnNativeModulesQueueThread(object : GuardedRunnable(reactContext) {
                override fun runGuarded() {
                    val uiManager = this@ModalContentLayout.getReactContext().getNativeModule(
                        UIManagerModule::class.java
                    ) as UIManagerModule
                    uiManager.updateNodeSize(
                        viewTag,
                        this@ModalContentLayout.viewWidth,
                        this@ModalContentLayout.viewHeight
                    )
                }
            })
        } else {
            hasAdjustedSize = true
        }
    }

    override fun addView(child: View?, index: Int, params: LayoutParams?) {
        super.addView(child, index, params)
        if (hasAdjustedSize) {
            updateFirstChildView()
        }
    }

    override fun onChildStartedNativeGesture(child: View, androidEvent: MotionEvent?) {
        androidEvent?.let {
            mJSTouchDispatcher.onChildStartedNativeGesture(it, this.getEventDispatcher()!!)
        }
    }

    override fun onChildStartedNativeGesture(androidEvent: MotionEvent?) {
        androidEvent?.let {
            mJSTouchDispatcher.onChildStartedNativeGesture(it, this.getEventDispatcher()!!)
        }
    }

    override fun onChildEndedNativeGesture(child: View, androidEvent: MotionEvent?) {
        androidEvent?.let {
            mJSTouchDispatcher.onChildEndedNativeGesture(it, this.getEventDispatcher()!!)
        }
    }

    override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}

    private fun getEventDispatcher(): EventDispatcher? {
        val reactContext: ReactContext = this.getReactContext()
        return reactContext.getNativeModule(UIManagerModule::class.java)?.eventDispatcher
    }

    override fun handleException(t: Throwable?) {
        getReactContext().handleException(RuntimeException(t))
    }

    private fun getReactContext(): ReactContext {
        return this.context as ReactContext
    }

    override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
        event?.let {
            mJSTouchDispatcher.handleTouchEvent(it, getEventDispatcher()!!)
        }
        return super.onInterceptTouchEvent(event)
    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        event?.let {
            mJSTouchDispatcher.handleTouchEvent(it, getEventDispatcher()!!)
        }
        super.onTouchEvent(event)
        return true
    }
}

Working!!!!
I leave the detailed solution to my friends.

@mrenann
Copy link

mrenann commented Sep 18, 2024

after, i receive the error:

 LOG  Running "com.awesomeproject" with {"rootTag":11,"initialProps":{"componentId":"Component1"},"fabric":true}
 ERROR  Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes
 LOG  Failed to print error:  Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime
 ERROR  Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes
 LOG  Failed to print error:  Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime

@ertugruldogan
Copy link
Author

ertugruldogan commented Sep 19, 2024

after, i receive the error:

 LOG  Running "com.awesomeproject" with {"rootTag":11,"initialProps":{"componentId":"Component1"},"fabric":true}
 ERROR  Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes
 LOG  Failed to print error:  Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime
 ERROR  Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes
 LOG  Failed to print error:  Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime

The error you're encountering, "Could not enqueue microtask because they are disabled in this runtime," is related to the Hermes JavaScript engine in React Native. This happens because Hermes does not support certain asynchronous task scheduling methods (like microtasks) that are used in some third-party libraries or parts of React Native.

To resolve this issue, try the following steps:

Check Hermes Compatibility: Make sure all the libraries you're using are compatible with the Hermes engine. Some libraries may rely on microtasks that Hermes doesn't support.

Disable Hermes: If the library causing the issue is essential, you can try disabling Hermes to avoid the microtask limitation. In your android/app/build.gradle, set enableHermes to false:


so in short "com.awesomeproject" is not related to react native navigation.
You seem to have newArchEnabled enabled as well
LOG Running "com.awesomeproject" with {"rootTag":11,"initialProps":{"componentId":"Component1"},"fabric":true}

android\gradle.properties

newArchEnabled=false

hermesEnabled=true

@siddarthkay
Copy link

@ertugruldogan : was that a chatgpt response?

@ertugruldogan
Copy link
Author

@ertugruldogan : was that a chatgpt response?

some of them yes.

@mrenann
Copy link

mrenann commented Sep 19, 2024

So the only way is by disabling Hermes? Or reverting the React Native version? Or disable the newArch
Because i start my project and not add nothing, only the react native navigation
And i tried and still the error

  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.0-rc.1",
    "react-native-navigation": "^7.40.1"
  },

@ertugruldogan
Copy link
Author

So the only way is by disabling Hermes? Or reverting the React Native version? Or disable the newArch Because i start my project and not add nothing, only the react native navigation And i tried and still the error

  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.0-rc.1",
    "react-native-navigation": "^7.40.1"
  },

Because it's only 0.75.x the version has not been fully resolved.
newArchEnabled=false
hermesEnabled=true
The solution given above will work in this way.

The react native version of the project version 0.76.x you use?
0.76.x in version, newArchEnabled comes with "true" by default, and some libraries have been added.
and. It is a process that requires a major update on the "React-Native-Navigation" side.
If so, write here #7915

{
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.76.0-rc.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
    "@react-native/babel-preset": "0.76.0-rc.1",
    "@react-native/eslint-config": "0.76.0-rc.1",
    "@react-native/metro-config": "0.76.0-rc.1",
    "@react-native/typescript-config": "0.76.0-rc.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.