wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.04k stars 2.67k forks source link

React Native 0.75.x #7905

Open ertugruldogan opened 3 months ago

ertugruldogan commented 3 months ago
`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 (https://github.com/react-native-community/discussions-and-proposals/discussions/802) compileSdkVersion = 35 targetSdkVersion = 35 ndkVersion = "27.0.12077973" kotlinVersion = "2.0.20"

Note: React Native 0.74.5 also works.

### Tasks
- [ ] https://github.com/wix/react-native-navigation/issues/7915
arashkevich25 commented 3 months ago

any updates?

jkirira commented 2 months ago

Also encountered the same error...

alexjs87 commented 2 months ago

+1

quintenbox commented 2 months ago

+1

peteAhn commented 2 months ago

+1

shubhamdhingra98973 commented 2 months ago

any update on this ?

aliisajokinen commented 2 months ago

+1

edoardocarpentiero commented 2 months ago

Any update?

ertugruldogan commented 2 months ago

We are waiting...

i couldn't wait any longer :)

siddarthkay commented 2 months ago

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

ertugruldogan commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

@ertugruldogan : was that a chatgpt response?

ertugruldogan commented 2 months ago

@ertugruldogan : was that a chatgpt response?

some of them yes.

mrenann commented 2 months ago

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 commented 2 months ago

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 https://github.com/wix/react-native-navigation/issues/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"
  }
}