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

<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.

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

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