React-native-animatable: Native animations with transition and transitionTo

[davidskaarup]

I'm trying to enable native animations (useNativeDriver) when using transitionTo with translateY and opacityas props, but as far as I can see it is not supported. Am I missing something?

Would it be possible to add this option?

[orenklein]

I'm pretty sure setting useNativeDriver={true} as a prop will be enough.

<TouchableOpacity
        onPress = {() => this.refs.view.transitionTo({ opacity: 0.5, width: 50, margin: 10 }, 500, 'linear')}>
    <Animatable.View useNativeDriver={true} ref='view' style={{ width: 100, height: 100 }}>
        <Text>Hello World</Text>
    </Animatable.View>
</TouchableOpacity>

[davidskaarup]

I have tried that, but as far as I can see it does not work. I tested it by animating a prop that the native driver does not support, and I did not get an error, thus I concluded that it was not being used.

[orenklein]

I just checked the code and it seems like you're right. +1
Regarding the animatable package, adding useNativeDriver argument to the functions and pass it to transitionToValues and then to transitionToValue could be an easy solution.

[grundmanise]

Also interested in the useNativeDriver prop. Should we make a PR or it is already made?

[grundmanise]

Just rechecked the docs and I see that useNativeDriver prop is already defined. Does not it work?

[flybayer]

I just submitted a PR: #106

[davidskaarup]

@flybayer very nice 👍

[orenklein]

It might be better to introduce useNativeDriver as an argument of transition and transitionTo functions, so it will be available when calling these functions imperatively (e.g [using argument destructoring]: this.refs.view.transitionTo({ toValues: {opacity: 0.2}, useNativeDriver: true}); )

[flybayer]

@orenklein I didn't do that because:

1. All animations for a component must all use the same driver (JS or native). You can't mix them. My fix enforces this since there's only one place to configure the driver (component props)
2. I think it's more intuitive to set the driver once on the component and have all animations, declarative or imperative, use that setting.

[orenklein]

You can't mix them.

Good point. I was not aware of that.

[kaelinda]

• transition is ok

var fromValues = {opacity:1}//这是一个style
var toValues = {opacity:0.1}//这是一个 style,
this.refs.testView.transition(fromValues,toValues,2000,'esa-out');

• transitionTo is not work??
  this.refs.testView.transitionTo({ opacity: 0.1 }, 500, 'ease-in');