React-native-reanimated: Task: check useAnimatedProps parity with v1

[kyle-ssg]

Description

From what I can see there are a few issues here, but basically I haven't been able to get useAnimatedProps to work in any usecase.

Replication

https://github.com/kyle-ssg/reanimated2-experiments/blob/master/App/components/AnimatedOnOffImage.tsx

Given a simple example there's perhaps maybe a clue of What's happening, when the image source uri property is adjusted from the previous I see.

Then also given the following code:

https://github.com/kyle-ssg/reanimated2-experiments/blob/master/App/components/AnimatedBlur.tsx#L43

Package versions

    "react": "16.13.1",
    "react-native": "0.63.1",
    "react-native-reanimated": "2.0.0-alpha.5",

[terrysahaidak]

This is more like a problem with BlurView itself. Are you able to reproduce this with Reanimated 1?

[kyle-ssg]

I'm almost certain there is regression here @terrysahaidak having run https://github.com/software-mansion/react-native-reanimated/blob/2576ab80ef8cec6900d054dd080b44234f709a4a/Example/test/SimpleTest.js I think in this test the text input value should change?

[terrysahaidak]

For text input, you need to pass initial text as a value and then animating text as a text property.

https://github.com/software-mansion/react-native-reanimated/issues/937#issuecomment-663988021

[kyle-ssg]

Hmm ok, I guess I don't really understand what use cases useAnimatedProps work for then. Are there rules that determine what properties are supported ? Every property I've tried so far either doesn't work or throws an error.

[terrysahaidak]

First of all, I recommend you to try to use the prop you're testing with Reanimated 1 first. If this doesn't work – it won't work with Reanimated 2.

Unfortunately, not all properties can be animated. But if something works for 1 then it should work the same way for 2.

Would be cool to have a list of properties that work for 1 and don't for 2.

[kyle-ssg]

Ok fair enough. I haven't actually found one that works in v2 at the moment, they all seem to initialise fine but then not update but I'll try a few out on v1 and see what I find and post here.

[terrysahaidak]

Cool, thank you, looking forward to it

[kyle-ssg]

Could you point me in the direction of how this is done in v1? I'm not sure if it's me being dumb but I can't see anything like this mentioned in the old docs.

[terrysahaidak]

With Reanimated 1 you need to createAnimatedComponent and pass Animated.Value as a prop you want to animate. Check out Retext from react-native-redash.

[kyle-ssg]

Ok I'm starting to understand this a bit better, you were right about the blur view, I've added a PR to the lib that fixes iOS and Android to support reanimated 2. There does seem to be 1 key rule in that the component in question needs to expose a setNativeProps function.

Next I'm going to see what's going on with images.

[terrysahaidak]

The library should provide setNativeProps natively - I mean the underlying native view should provide it. Because Reanimated doesn't use js version of setNativeProps.

[kyle-ssg]

Hmm, odd, it hit the js version when I added it. Without adding this I simply got a load of undefined errors on this line https://github.com/software-mansion/react-native-reanimated/blob/master/src/createAnimatedComponent.js#L183.

Adding this function fixed things for me:

https://github.com/kyle-ssg/react-native-blur/blob/master/src/BlurView.android.js#L66

[terrysahaidak]

Yeah, you're right too. It sets the initial state of the view I think - that's why it needs it.

[kyle-ssg]

Think this is fine to close, image does throw a slightly different conversion error and other props I've tried react the same in both. I'll take a look at what can be done with animating image source in reanimated v2.