Enable New Architecture in Bluesky on RN 0.76

[WoLewicki]

PR enabling New Architecture in the app. Based on work from @haileyok in #6211 and a bit on #4853. Great work on those PRs so far 💪

There are still some issues like small input text on iOS, glitches with bottomsheet on both platforms and probably some more.

[WoLewicki]

I'm happy to help investigate some of the issues if you'd like it @haileyok. We've already got much experience with all things New Arch related, like:

• migrating libraries
• migrating apps
• investigating issues
• improving performance

[WoLewicki]

Ok it should be ready @haileyok . From quick testing, discarding additional posts is broken for now on both iOS and Android. Is it known issue already?

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-09.at.16.15.36.mp4

[gaearon]

@WoLewicki Is this problem specific to New Architecture, or do you see it on main as well?

[WoLewicki]

After switching back to old arch (I had to revert the react-native-mmkv update since it only supports new arch in 3.x), it works correctly on both platforms, so it must be something with new arch. I can spend some time this week to research it if you are open for pushing this PR forward.

[gaearon]

Thanks, please do!

[WoLewicki]

Ok I merged newest main and in this PR: #6979 @snowp added @bitdrift/react-native which has private github repo and does not work on new arch. For some reason it has some of the configuration added but not the whole. It might be the case that new arch was not tested there. I'll try to make a patch to make it work but unfortunately I won't be even able to make a PR in their repo 😞

[WoLewicki]

Also, I cannot build Android now with this change:

[gaearon]

What does it mean? Does it not support New Architecture?

[gaearon]

Let's temporarily remove that package on this branch so that you're not blocked by that. I raised the problem to bitdrift maintainers.

[gaearon]

Pushed temporary reverts to this branch.

[WoLewicki]

I have it working already on iOS but Android does not let me download the package for some reason and it doesn't look connected to the new arch. Working on a fix for bottomsheet too.

[gaearon]

Just got this branch running on Android. Nice job! I’m noticing that the home header is glitchy. It seems to flash a wrong state every now and then if you swipe up and down a few times.

IMG_2305.mov

[WoLewicki]

@gaearon I made bottomSheet work on new arch, the issue was due to view flattening and not implementing needed methods in swift module.

I also added patch for @bitdrift/react-native too, but cannot do the same on Android due to some problems with downloading the sdk. Would be nice to have it tested pretty thoroughly 🚀

[WoLewicki]

Ok I merged the newest main and bumped bitdrift package and now it works correctly on iOS 🚀 . Still, I seem to not have permission to download bitdrift android package so I cannot test there. What would be the next steps @gaearon ? Do you maybe have a QA team to test and find all the issues?

[gaearon]

Have you had a chance to look at the cause of #6755 (comment)? I don't believe this was happening with Paper.

[WoLewicki]

If I understand it correctly, the header animation is controlled here: https://github.com/bluesky-social/social-app/blob/a3031de19ba41717c8e83b818e294d44577fb434/src/view/com/util/MainScrollProvider.tsx yeah? And then the value is interpreted in transformY here:

social-app/src/lib/hooks/useMinimalShellTransform.ts

Line 17 in a3031de

transform: [

. I'm logging the value and seems like headerHeight and when I scroll it down slowly, the headerModeValue is decreasing without any jumps in the value and at the same time, the header jumps a little sometimes, so it must be a problem somewhere deeper. I am no expert in reanimated unfortunately 😞

[gaearon]

Hm, we can't merge without getting to the root of it. It would be nice to reduce this to a minimal reproducing example (just a single file like App.native.tsx) and then report it to Reanimated, if possible.

[bartlomiejbloniarz]

@gaearon We looked into it with @WoLewicki more. The issue is that when no layout styles are updated, reanimated goes through a fast path, applying props synchronously on the UI thread. This fast path avoids our mechanisms that ensure the correct order of our updates. This results in the header jumping.

The fast path causes also other problems, and we want to get rid of it at some point - the problem is that would mean bad performance on lower end devices (so we need more time to figure out how to properly optimize this).

We tried to remove this fast path for your case, but for some reason the animation appears laggy (but in a different way - now the header doesn't jump back and forth, it just looks like it's skipping frames). It's weird because the UI thread is fairly unoccupied, so it seems that the animation for some reason is influenced by the heavy load that is done on the JS thread. We added an infinite animation there, and it seems that the performance is directly related to scrolling - we need to investigate that further.

[gaearon]

Makes sense. Thanks for the details.