Error property 'left' is not supported by native animated module when using swipe

[ghost]

<Modal isVisible={this.state.isTimelineOpen}
                       onSwipe={() => this.setState({isTimelineOpen: false})} swipeDirection="up">
                    <Text>Test<Text/>
                </Modal>

Keeping it as simple as the above, I'm getting an error that says "property left is not supported by native animated module. Any ideas?

[mmazzarolo]

Hi!
Are you sure the error is related to the modal?
Could you try removing some props just to isolate the issue?
Also, a repository for reproducing the issue would be great.

[ghost]

Seems like it's due to having useNativeDriver={true} which I really need to have a smooth animation.

[mmazzarolo]

Are you setting other props? Seems related to react-native-animatable

[ghost]

Well my complete code looks like this:

Modal isVisible={this.state.isTimelineOpen} onBackButtonPress={() => this.setState({isTimelineOpen: false})} onBackdropPress={() => this.setState({isTimelineOpen: false})} onModalHide={() => this.setState({isTimelineOpen: false})} onSwipe={() => this.setState({isTimelineOpen: false})} swipeDirection="down" useNativeDriver={true} hideModalContentWhileAnimating={true} style={{margin: 0}}> <Text>Test<Text/> </Modal>

If you remove useNativeDriver={true}, it works.

[mmazzarolo]

I investigated a bit and I think that useNativeDriver currently does not support the swiping due to React-Native limitations 😞 .
The issue might be addresses soon though thanks to all the recent contributions to the React-Native gesture system.

[erickreutz]

This is not due to react native limitations. This is a problem because getLayout is being used which animates the left and top style properties of a view which are not supported by useNativeDriver. an alternative to getLayout exists called getTranslateTransform (See here) that animates translateX and translateY instead of top and left but since react-native-animatable animations are using those properties to pull off the in/out transitions and react-native-animatable will override the transform on the view when you try and set the transform explicitly this is not currently possible.

[mmazzarolo]

Thanks for expanding the discussion, re-opening.
IIRC what made me write "React-Native limitations" was exactly that top and left cannot be animated by useNativeDriver. Yeah, I should have been a much more explicit, my bad.
Implementing the animations using translateX and translateY might not be straightforward since we also have to keep in mind we're using react-native-animatable.
@erickreutz do you have any idea on how this could be solved? 🤔

[erickreutz]

The problem is that you have to define react-native-animatable animations ahead of time and don't seem to have a way to dynamically influence them or manipulate them from an interaction so I can't think of a way to solve this outside of getting rid of react-native-animatable in favor of defining the animations ourselves.

[mmazzarolo]

Gotcha. I agree. I think defining the definitions ourselves might be the best solution (replacing only the ones used on the swiping interactions).

[pongponglau]

I encounter the same issue. Using useNativeDriver is so good for smooth animation. Any idea how to fix this? Thanks a lot

[berpcor]

Any code, please?
The same problem:

[mmazzarolo]

@berpcor unfortunately this is still an open issue, see the comments above

[denieler]

you can use

{
  transform: [{
    translateX: 50
  }]
}

to simulate animation for the left positioning if you don't have strict restrictions about using left property

[01dr]

If I try to show a modal without useNativeDrive, then the animation does not work. Else I'm getting error Error property 'left' is not supported by native animated module when using swipe.

Does anybody progress with that issue?

[denieler]

@amazing-space-invader read my previous answer

[jfrolich]

I think this issue is also happening when not animating left.

[cjroth]

Look into https://github.com/maxs15/react-native-modalbox if you absolutely need native animations for now.

[mmazzarolo]

I think this issue is also happening when not animating left.
Yes, it is

@denieler mind expanding a bit? I understand that the translateX prop can be animated natively but are you proposing to make the change it directly in the modal component?

I'm available for helping out if someone is willing to tackle the issue 👍

[cjroth]

Here's a temporary workaround if you are willing to sacrifice the the visual drag feedback in exchange for native driver animations: #247

[mmazzarolo]

@cjroth Funny thing is, if you use an animatable animation that doesn't use the translate property (e.g.: fadeIn and fadeOut), the swiping animation works correctly with getTranslateTransform even with the useNativeDriver={true}.

If there's a way to override the translateX/translateY of a react-native-animatable View we might be able to fix it in all cases (with both nativeDriver on and off)

[DimitryDushkin]

Looks like it is fixed in 8.0.0-beta, but now swiping is not actual dragging children anymore.

[mmazzarolo]

@DimitryDushkin Hm, I just tested it and the swiping is working fine for me (still having issues with the scrollable content though).
Could you add a bit more details? Also, thanks for the feedback 👍

[mahdinba97]

I still have this problem: #332

[raynor85]

I have the following implementation:

const FullScreenModal = ({
  children,
  modalStyle,
  contentStyle,
  closeButtonStyle,
  hideCloseButton = false,
  onClose,
  onModalShow,
  transparency,
  ...other
}: Props) => {
  const [useNativeDriver, setUseNativeDriver] = useState(true);

  const handleOnModalShow = useCallback(() => {
    setUseNativeDriver(false);
    if (onModalShow) {
      onModalShow();
    }
  }, []);

  return (
    <RNModal
      style={[styles.container, modalStyle]}
      backdropOpacity={typeof transparency === 'number' ? transparency : transparency ? 0.9 : 1}
      backdropColor={DARK_INDIGO}
      onSwipeComplete={onClose}
      swipeDirection={onClose ? 'down' : null}
      animationIn="fadeInUp"
      animationOut="fadeOutDown"
      onBackButtonPress={onClose}
      onBackdropPress={onClose}
      useNativeDriver={useNativeDriver}
      onModalShow={handleOnModalShow}
      {...other}
    >
      <View style={contentStyle}>
        {children}
        {!hideCloseButton && !!onClose && (
          <ModalCloseButton
            onPress={onClose}
            containerStyle={[styles.closeButton, closeButtonStyle]}
          />
        )}
      </View>
    </RNModal>
  );
};

It looks like switching useNativeDriver from true to false trigger the error mentioned. If I set useNativeDriver={true} or useNativeDriver={false} I don't get any error, but if I try to change it while the component is mounted, I get the crash.

[kesha-antonov]

How about using https://github.com/kmagiera/react-native-gesture-handler?

[mmazzarolo]

How about using https://github.com/kmagiera/react-native-gesture-handler?

react-native-gesture-handler is great and I'm all for using it... someone would have to tackle it though, which is not an easy task

[kesha-antonov]

Swipe up/down is easy
Not sure how to connect backdrop though
Maybe I look into it but can't promise