react-native-modal: 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?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 18
Comments: 27 (12 by maintainers)

Most upvoted comments

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.

+63

erickreutz on Aug 2, 2018

you can use

{
  transform: [{
    translateX: 50
  }]
}

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

+58

denieler on Oct 28, 2018

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

+26

ghost on May 22, 2018

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.

mmazzarolo on May 29, 2018

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.

erickreutz on Aug 2, 2018

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? 🤔

mmazzarolo on Aug 2, 2018

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.

ghost on May 22, 2018