DrawerLayout throws errors originating from using setNativeProps

[coolersham]

Description

The function setNativeProps is not supported by the Fabric renderer. Therefore, the function updateShowing provided in the DrawerLayout.tsx component file outputs the following error/warning Warning: setNativeProps is not currently supported in Fabric.

  private updateShowing = (showing: boolean) => {
    this.drawerShown = showing;
    this.accessibilityIsModalView.current?.setNativeProps({
      accessibilityViewIsModal: showing,
    });
    this.pointerEventsView.current?.setNativeProps({
      pointerEvents: showing ? 'auto' : 'none',
    });
    const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;
    const fromLeft = drawerPosition === 'left';
    // gestureOrientation is 1 if the expected gesture is from left to right and
    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
    // to right gesture, thus orientation will be 1.
    const gestureOrientation =
      (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
    // When drawer is closed we want the hitSlop to be horizontally shorter than
    // the container size by the value of SLOP. This will make it only activate
    // when gesture happens not further than SLOP away from the edge
    const hitSlop = fromLeft
      ? { left: 0, width: showing ? undefined : edgeWidth }
      : { right: 0, width: showing ? undefined : edgeWidth };
    // @ts-ignore internal API, maybe could be fixed in handler types
    this.panGestureHandler.current?.setNativeProps({
      hitSlop,
      activeOffsetX: gestureOrientation * minSwipeDistance!,
    });
  };

Steps to reproduce

Use the DrawerLayout component and call either the openDrawer or closeDrawer function.

Snack or a link to a repository

https://github.com/software-mansion/react-native-gesture-handler/blob/main/src/components/DrawerLayout.tsx#L430

Gesture Handler version

2.9.0

React Native version

0.71.3

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

Real device

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[coolersham]

I am not aware of how the responsibilities are divided for this package, but could someone from the core team look into this issue, please? Maybe @j-piasecki or would you mind delegating? Thanks!

[Sowed]

Getting the same issue too. RN 0.71.3, Fabric enabled. React Native Gesture Handler 2.9.0.

[coolersham]

@j-piasecki any update on this matter? It would be nice to fix this issue and remove unnecessary patches from projects worldwide. If you need any help or additional information, please do not hesitate to let me know.

Note: It is still not fixed in 2.13.1.

[coolersham]

Actually setNativeProps support has been added to the Fabric renderer in react-native - 0.72.X. This leads to the fact, that the error is no longer thrown on native side (in web it still is). However, and I quote from the developer that backported this function: It is still recommended to move away from setNativeProps because the API will not work with future features.

@j-piasecki Do you already have that on your TODOs?

[j-piasecki]

DrawerLayout is broken since React Native 0.70 due to a bug in React Native core (#2208, #2573). Additionally, the best alternative to setNativeProps on the new arch is using state AFAIK, and that would have a negative impact on the performance, causing re-renders close to the top of the hierarchy twice for every drawer state change.

You can use the alternative implementation using Reanimated instead of RN'a Animated here: https://github.com/software-mansion/react-native-gesture-handler/tree/main/example/src/new_api/betterHorizontalDrawer. You would have to copy the file, but it should be a drop-in replacement.

[coolersham]

@j-piasecki Thank you very much for the reply and the reference! :)

Do you plan to move to the alternative implementation permanently in the future?

[j-piasecki]

That's definitely something to think about, although the new implementation depends on Reanimated, while both the old one and Gesture Handler itself do not. We'll need to discuss the best approach in this situation.