react-native-sketch-canvas: react-native-sketch-canvas does not support new architecture even with RN v0.72 interop layer

Summary

Hi @terrylinla, We have identified that this library is not working with the RN new architecture. So we have moved forward with RN 0.72.1 to enable this legacy module with the interop layer and new arch as suggested here -> https://github.com/reactwg/react-native-new-architecture/discussions/135

Reproducible sample code -

import React, { Component } from ‘react’; import { AppRegistry, StyleSheet, View, } from ‘react-native’;

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas';

export default class example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <SketchCanvas
            style={{ flex: 1 }}
            strokeColor={'red'}
            strokeWidth={7}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('example', () => example);

Steps to reproduce

yarn add react-native-sketch-canvas
cd ios
bundle install
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
cd …
open android/gradle.properties
change the newArchEnabled boolean from false to true
Add the component to unstable_reactLegacyComponentNames array in react-native.config.js
npx react-native run-ios
npx react-native run-android
Update the App.js file with the snippet in the Reproducible Sample Code section

Expected result -

Module opens and we are able to save the edited sketch

Actual Result -

-Module opens and we are able to add a sketch but then it throws this exception -

Simulator Screenshot - iPhone 14 - 2023-07-03 at 10 56 09

React Native Sketch Canvas Version

0.8.0

What platforms are you seeing the problem on?

Android, iOS

React Native Version

0.72.1

What version of Expo are you using?

Not using Expo

Device(s)

iPhone 14 (iOS 16.4) | Android Pixel 5 (API 33)

Additional information

No response

About this issue

Original URL
State: open
Created a year ago
Comments: 17

Commits related to this issue

Fabric Interop - Properly dispatch integer commands Summary: This fixes a bug that got reported for the Fabric Interop for Android with Command dispatching. (See https://github.com/terrylinla/react-n... — committed to cortinico/react-native by cortinico a year ago
Fabric Interop - Properly dispatch integer commands (#38527) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38527 This fixes a bug that got reported for the Fabric Int... — committed to cortinico/react-native by cortinico a year ago
Fabric Interop - Properly dispatch integer commands (#38527) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38527 This fixes a bug that got reported for the Fabric Int... — committed to cortinico/react-native by cortinico a year ago
Fabric Interop - Properly dispatch integer commands (#38527) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38527 This fixes a bug that got reported for the Fabric Int... — committed to cortinico/react-native by cortinico a year ago
Fabric Interop - Properly dispatch integer commands (#38527) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38527 This fixes a bug that got reported for the Fabric Int... — committed to facebook/react-native by cortinico a year ago
Fabric Interop - Properly dispatch integer commands (#38527) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/38527 This fixes a bug that got reported for the Fabric Int... — committed to facebook/react-native by cortinico a year ago

Most upvoted comments

Hi @karthiktrcapgemini @ravindraguptacapgemini Thanks for sharing a reproducer which helped me understand what was going on.

The problem is with commands & the interop layer. Specifically react-native-sketch-canvas is using receiveCommand(View, int, ReadableArray) here: https://github.com/terrylinla/react-native-sketch-canvas/blob/b322a86dbaccfac7327095e505cf7d7cc9b4acde/android/src/main/java/com/terrylinla/rnsketchcanvas/SketchCanvasManager.java#L93

I would need to wait for @cipolleschi to be back in the office next week to discuss this, but I noticed a change for iOS: https://github.com/facebook/react-native/commit/c7aaae61ca259a546331aca3cce475ad981b1b22 is causing all events to be delivered as string, which ends up not delivering those events on this specific component.

We’ll investigate further and get back with a fix as this is definitely affecting other libraries.

cortinico on Jul 14, 2023

We are in the process of migrating one of our apps to new arch and this is one of the few blockers we are facing

I just want to highlight a thing. Although I really really appreciate the effort in migrating your app to the New Architecture, and all the feedback that comes with the migration, please remember that the New Architecture is still experimental. There will be breaking changes in the APIs while we work in releasing everything that’s needed and there will be new pieces of the Architecture that will arrive in 0.73.

cipolleschi on Jul 6, 2023

Thanks a lot @cipolleschi, this sounds great. I will keep this thread posted once I get a chance to test this fix for iOS

karthiktrcapgemini on Jul 6, 2023

ok, I found some time to investigate this for iOS.

I think that the root problem is in the logic of how the views are added/removed from the registry. Right now, we add a view to the legacyView registry right before a command is dispatched and we remove it right after.

The problem is that RNSketchCanvas expect the view to always be in the registry, so it tries to access the registry outside a command invocation (due to some async call) and that fails.

I prepared this PR that should fix the issue on iOS, but we have to wait for @cortinico for Android.

cipolleschi on Jul 6, 2023

@cipolleschi - Here is the reproducible repo for this -> https://github.com/karthiktrcapgemini/react-native-sketch-canvas-interop-layer-issue

Adding a few more details -

Android -

Without adding the component to unstable_reactLegacyComponentNames - Result - Standard “RNSketchCanvas is not fabric compatible yet” red screen is shown
After adding the component to unstable_reactLegacyComponentNames - Result - The feature opens but we are unable to sketch, there is no error or exception shown. Nothing happens, its a blank screen with the given background colour to sketch canvas.

Screenshot_1688641461

iOS -

Without adding the component to unstable_reactLegacyComponentNames - Result - Standard “RNSketchCanvas is not fabric compatible yet” red screen is shown
After adding the component to unstable_reactLegacyComponentNames - Result - We are able to sketch on the canvas but it seems the mechanism to fetch the base64 png image of the sketch is failing at the native code. Please see SS

Simulator Screenshot - iPhone SE (3rd generation) - 2023-07-06 at 07 06 21

Simulator Screenshot - iPhone SE (3rd generation) - 2023-07-06 at 07 02 39

karthiktrcapgemini on Jul 6, 2023

Sure @cipolleschi, We will share a reproducible repo as soon as possible.

karthiktrcapgemini on Jul 5, 2023

@ravindraguptacapgemini @karthiktrcapgemini thanks for testing this.

I don’t have an immediate answer, as this error looks a bit hard to identify for me. Can you prepare a repro using this template?

This will make it easier for us to run it and see what’s going wrong. Thank you so much!

cc. @cortinico as this is also failing for Android

cipolleschi on Jul 4, 2023