React-native-reanimated: Flicker on first frame

[Ashoat]

Description

I am trying to set up a fairly simple height animation. The height should start at 0, based on interpolation from a Value that I initialize to 0.

For some reason, on mount I sometimes see a "flicker" effect. When using react-native's default Animated, using the JS (non-native driver), this effect does not occur.

Screenshots

Steps To Reproduce

Note that this only reproduces on prod builds. I've only tried iOS so far.

You can see the source code for the working version based on react-native's Animated here. This patch switches to Reanimated and "breaks" it.

Snack or minimal code example

I'm only able to reproduce this issue on prod builds, so Snack wouldn't work. What I should do is set up a repo that reproduces the issue, but...

Since I am able to avoid this issue by switching back to react-native Animated, it is not a serious blocker for me, and I am too short on cycles to set up an MCVE. Sorry!!

I wanted to put this issue up for now so there is a place to discuss.

Package versions

• React: 16.9.0
• React Native: 0.61.5
• React Native Reanimated: 1.9.0

[jakub-gonet]

This _may_ be related to #219.

[jakub-gonet]

Check if #1027 fixes it.

This isn't really actionable without repro, so I'm closing it for now.

[Ashoat]

I checked and the problem is indeed resolved! Thanks so much for your work @jakub-gonet. Looking forward to 1.10.2 :)

[Ashoat]

Hey @jakub-gonet, unfortunately it looks like #1080 reintroduced this problem :(

Should I open a new issue, or should we reopen this one?

[jakub-gonet]

I can't really help you without any repro example. I presume you're using some animated nodes in styles and from #1080 we only support animated Values. I took a more conservative approach after noticing that complex animations were breaking our example app (probably due to Event nodes or nodes which have their value after init on the native side). I didn't have much time to investigate it further, so it'll stay in the current form for now.

If it works for you, you can use patch-package to revert those changes. If you find time to check out why it may crash we'll happily merge PR fixing it.

[Ashoat]

Hey @jakub-gonet, totally understand that you need a repro. Pretty much impossible to fix a bug if you can't test to see if it's been fixed.

I think right now the plan is for @zrebcu411 to help reproduce the issue on his laptop, since he already has a working checkout of the SquadCal repo. This is how I am able to reproduce the issue:

1. git cherry-pick 30a850d7bc9e00782213720cf33cb276ecbcab52
2. Set XCode to release build
3. Run on actual iPhone (rather than simulator)
4. Go to the More tab and rapidly navigate back and forth to different settings

You can probably reproduce the issue on your laptop too. Our dev environment instructions are fairly long, but you probably already have all the React Native parts, and you can skip all the server parts (MySQL, Redis, etc.).

[jakub-gonet]

I will look at that at some time in this / following week, thanks for the followup.

[Ashoat]

Hi Kuba, wanted to check in. @zrebcu411 mentioned he had shown you the repro on his laptop, but that you wanted to repro it in your environment as well.

Let me know if there's any way I can help with the repro. I think it should be possible to repro the release build without the dev environment instructions, assuming you already have a working React Native setup. I can provide log-in credentials over PM for a test user if you'd rather not bother with the registration step!

(And please let me know if you'd prefer a separate issue, since this one is closed!)

[jakub-gonet]

Sorry for the delay, other things popped up, and I haven't had time to debug this one but I still have in mind this issue :>

In the meantime, you can use patch-package to use #1027 but it may be crashing due to the same reason it crashes on our example app. But you can try it and test if every animated component renders correctly (i.e. doesn't crash on render), and if that's a case you should be good to go.

[Ashoat]

Thanks Kuba! Right now we're just using Animated instead of Reanimated for this particular screen. It's very choppy since it doesn't support the native driver, but otherwise it's not horrible. Given that, I'd rather not risk any crashes by trying patch-package, and it's going to be hard to prioritize testing every single Reanimated usage in the app (there are a lot).

Looking forward to hearing back from you once you get a chance to look into this one!

[normanzb]

can confirm this issue still exist in 1.13.0

[Ashoat]

@jakub-gonet spent some time looking into this issue, along with several other folks from Software Mansion. They're making the decision to treat it as a "won't fix" for the 1.x branch.

The ultimate issue seems to be that the relationship between React Native rendering layer and Reanimated 1.x's node-computation layer is asynchronous. When React Native begins rendering the Reanimated.View, it doesn't yet know the result of the first pass through the Reanimated code you may have provided as part of the style. When that happens, those style properties are simply left out.

In my case, height: undefined means the component will show up, whereas the initial result of the Reanimated code I provided should lead to a height: 0. Once Reanimated completes the first pass through its node-computation layer, the rendering layer is corrected to hide the component.

I imagine React Native's core Animated library had to solve similar issues, since it's my understanding that they have a separate native thread for running animations. For the core Animated library, I can confirm useNativeDriver: false does not have this flicker issue in my use case. I can't confirm useNativeDriver: true because it does not support animating height properties at this time.

The team recognizes that it would be possible to address this issue, but from their evaluation it would be rather complex. They're not looking to make major changes to the 1.x branch at this time, and prefer to leave the code in a more stable state while prioritizing Reanimated 2 work.

(Note that Reanimated 2 should address this issue because of its synchronous architecture. Reanimated 2 can call into JSX worklets synchronously in a way that lets it evaluate the first result without blocking render.)

I'll defer to @jakub-gonet and the rest of the team on whether to close this issue.

[jakub-gonet]

Thanks to @Ashoat for the great summary!

As mentioned we won't fix it in the near future (unless it'll affect more users) so I'm closing it for now. We're accepting PRs though.