3rd party libraries - updates and requests

[cortinico]

Please refer to the new discussion: #167

---

Hi all,
It's crucial that 3rd party libraries and tools for React Native are supporting the New React Native Architecture, both Fabric and TurboModules.

Known Libraries Status

library	status	relevant links
react-native-keys	completed	https://github.com/numandev1/react-native-keys/releases/tag/v0.6.0-alpha.0
react-native-compressor	completed	https://github.com/numandev1/react-native-compressor/releases/tag/v1.7.0
react-native-bottom-sheet	not started	gorhom/react-native-bottom-sheet#1010 / gorhom/react-native-bottom-sheet#1030
react-native-fast-image	not started	DylanVann/react-native-fast-image#919
react-native-device-info	not started	react-native-device-info/react-native-device-info#1470
react-native-navigation	not started	wix/react-native-navigation#7466
react-native-permissions	not started	zoontek/react-native-permissions#684
react-native-haptic-feedback	not started	mkuczera/react-native-haptic-feedback#87
react-native-pure-jwt	not started	zaguiini/react-native-pure-jwt#41
react-native-pdf	not started	wonday/react-native-pdf#663
react-native-PDFView	not started	rumax/react-native-PDFView#229
react-native-shimmer	not started	oblador/react-native-shimmer#35
react-native-firebase	not started	invertase/react-native-firebase#6200
react-native-skia	not started	Shopify/react-native-skia#387
react-native-video	not started	TheWidlarzGroup/react-native-video#2650
react-native-maps	investigation	react-native-maps/react-native-maps#4383
sentry-react-native	investigation	getsentry/sentry-react-native#2226
react-native-picker	in progress	react-native-picker/picker#456
react-native-datetimepicker	in progress	react-native-datetimepicker/datetimepicker#622
lottie-react-native	complete	https://github.com/lottie-react-native/lottie-react-native/releases/tag/v6.0.0
react-native-blurhash	in progress	mrousavy/react-native-blurhash#148
react-native-masked-view	in progress	callstack/masked-view#162
react-native-vision-camera	in progress	mrousavy/react-native-vision-camera#650
react-native-webview	RC ongoing	react-native-webview/react-native-webview#2686
react-native-netinfo	in progress	react-native-netinfo/react-native-netinfo#622
pendo-sdk	in progress	https://github.com/pendo-io/pendo-mobile-ios
react-native-gesture-handler	complete	https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.3.0
react-native-linear-gradient	(forked but) complete	https://github.com/FyndX/react-native-gradient
react-native-pager-view	complete	https://github.com/callstack/react-native-pager-view/releases/tag/v6.1.0-rc.1
react-native-reanimated	complete	https://github.com/software-mansion/react-native-reanimated/releases/tag/3.0.0-rc.0
react-native-safe-area-context	complete	https://github.com/th3rdwave/react-native-safe-area-context/releases/tag/v4.1.2
react-native-screens	complete	https://github.com/software-mansion/react-native-screens/releases/tag/3.12.0
react-native-slider	complete	https://github.com/callstack/react-native-slider/releases/tag/v4.3.0
react-native-svg	complete	https://github.com/react-native-svg/react-native-svg/releases/tag/v13.0.0
react-native-avoid-softinput	complete	https://github.com/mateusz1913/react-native-avoid-softinput/releases/tag/v3.0.0
react-native-blur	complete	margelo/react-native-blur#493
react-native-pushy	complete	reactnativecn/react-native-update#402

For Library Authors/Maintainers

If you're a library author/maintainer, feel free to open a discussion in this section to provide updates on the status of your library.

If you happen to have a Alpha/Beta/RC ready to share, feel free to do so. You can use this working group for getting visibility and early feedback.

Please open only one thread per library.

For Library User

If you're a library user, feel free to comment here if a library you're depending on it's not migrated yet.

This will help the library author/maintainer collect use cases and will help them prioritize the migration work.

[mk0116]

https://github.com/react-native-video/react-native-video
react-native-video needs to be migrated.
If help is needed, I can do some work for it.

[cortinico]

I've opened this TheWidlarzGroup/react-native-video#2650 to understand what's the status. If you're willing to contribute, please follow up over there so the maintainers are aware of it.

[mk0116]

Thanks!

[zolbooo]

It would be nice to have some kind of SVG support, for example: react-native-svg (there is a draft PR in progress).
As alternative, we use react-native-vector-image with fork of @klarna/react-native-vector-drawable so far.

[leotm]

all-in-one place looks good ^ kinda like we did in the blog
and one more maybe to add

• react-native-skia = not started (iOS: Add support for Fabric / new architecture Shopify/react-native-skia#387)

[kelset]

oh THAT'S WHY! I was so sure that a list like this existed somewhere but couldn't find it anymore 🤦‍♂️ it was in the blogpost 🤦‍♂️ thanks @leotm

if @cortinico gives me the 👍 I'll just edit the top comment and make it into a nice table :3

[kelset]

(added to the top post, added skia and svg)

[capezzbr]

One more library to add: https://github.com/lottie-react-native/lottie-react-native. Migration has started for Android: lottie-react-native/lottie-react-native#910

[kelset]

thanks!

[capezzbr]

Any PDF library: https://github.com/rumax/react-native-PDFView or https://github.com/wonday/react-native-pdf

[kelset]

sorry I'm not sure I follow - are these libs undergoing migration to the new arch or already support the new arch?

[capezzbr]

hey, unfortunately from what I can tell they haven't started any migration yet. With the above comment I mean that I'd be useful to track the progress of migration of at least one library that allows us to render a PDF 👍

[cipolleschi]

react-native-PDFView does not support it.

react-native-pdf has an issue to support it, but no PR and no work so far.

I think this is a request to migrate one of these two.

[capezzbr]

I have two more libraries that I'd like to track:

• @gorhom/bottom-sheet -- https://github.com/gorhom/react-native-bottom-sheet
• @react-native-community/datetimepicker -- https://github.com/react-native-datetimepicker/datetimepicker

[kelset]

@capezzbr for the future: can you check if it already exist or add an issue on those repos about new arch support and link it here along with the track requests?

[capezzbr]

Yes! Let me update it right now:

• For @gorhom/bottom-sheet I did create Fabric Support gorhom/react-native-bottom-sheet#1010, but the issue was closed due to (30 days) inactivity
• For @react-native-community/datetimepicker I did create Add support for the new architecture react-native-datetimepicker/datetimepicker#622

[guptaprnv]

pls include these library also
1 react-native-interactable
2 for react-native-shimmer i have created ticket (oblador/react-native-shimmer#35)

[numandev1]

@guptaprnv done

[numandev1]

I think we should add this discussion URL into react native docs so everyone may check new arch-supported libraries status before their project upgradation

[intergalacticspacehighway]

I've started working on turbomodule migration of @react-native-community/netinfo here. It's working on android and iOS, also backward compatible 🥳. I'll make a PR soon after some more testing. Some issues I faced are reported here and here

[intergalacticspacehighway]

PR - react-native-netinfo/react-native-netinfo#622

[dmahajan980]

Hello, it would be nice to track react-native-firebase: https://github.com/invertase/react-native-firebase
A discussion was opened in the repo regarding Fabric / TurboModules support: invertase/react-native-firebase#6200

[kelset]

added, thanks

[hansdesmedt]

react-native-device-info (not started)
react-native-device-info/react-native-device-info#1470
Great lib we use a lot. 😄

react-native-permissions (not started)
zoontek is asking for help to update his libraries
https://github.com/sponsors/zoontek?frequency=one-time
we use react-native-permissions a lot.

react-native-haptic-feedback (not started)
classic
mkuczera/react-native-haptic-feedback#87

react-native-pure-jwt (not started)
one of the rare old ones
zaguiini/react-native-pure-jwt#41

react-native-masked-view (in progress)
was looking into this on myself
callstack/masked-view#162
#80

[kelset]

is there an issue/pr tracking work on the new arch? I couldn't see anything

[hansdesmedt]

I can make one for all of them if needed

[hansdesmedt]

I added the issues 😄

[kelset]

awesome, thanks Hans! I'll update the top table right now

[mateusz1913]

👋 I recently added a Fabric/TurboModules support in react-native-avoid-softinput from v3.0.0 onwards

[gispada]

Support for Fabric has also been added to react-native-blur. See this PR.

[kelset]

great stuff, thanks for letting us know 🙏

[mrousavy]

Hey @cortinico, thanks for the awesome sum up.

JFYI: RN Skia is in progress: Shopify/react-native-skia#937

[mrousavy]

react-native-vision-camera and react-native-blurhash are written in Swift, and since Fabric Views use C++ code (.mm) it's probably gonna be a bit tricky to add Fabric support to my libs as of right now since Swift cannot interop with C++.

To unblock me (and other Swift libs), I think it'd make sense to either

1. Add a Swift/extern C wrapper to expose that to Swift, for example for the

   - updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps;

   function, where I get the props in a NSDictionary (ObjC bridged type), or a C-style array instead - or

2. Perform a lookup at runtime.
   Instead of hardcoding it like this:

   - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
    {
      const auto &oldViewProps = *std::static_pointer_cast<const BlurViewProps>(_props);
      const auto &newViewProps = *std::static_pointer_cast<const BlurViewProps>(props);
   
      if (oldViewProps.blurAmount != newViewProps.blurAmount) {
        NSNumber *blurAmount = [NSNumber numberWithInt:newViewProps.blurAmount];
        [self setBlurAmount:blurAmount];
      }
   
      if (oldViewProps.blurType != newViewProps.blurType) {
        NSString *blurType = [NSString stringWithUTF8String:toString(newViewProps.blurType).c_str()];
        [self setBlurType:blurType];
      }
   
      if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
        UIColor *color = RCTUIColorFromSharedColor(newViewProps.reducedTransparencyFallbackColor);
        [self setReducedTransparencyFallbackColor:color];
      }
   
      [super updateProps:props oldProps:oldProps];
    }

   We could have the default implementation be

   - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
    {
      const auto &oldViewProps = *std::static_pointer_cast<const BlurViewProps>(_props);
      const auto &newViewProps = *std::static_pointer_cast<const BlurViewProps>(props);
   
      // 1. loop over each prop
      // 2. compare if it changed, and if yes find a selector that updates this prop (by converting from C++ to ObjC types)
   
      [super updateProps:props oldProps:oldProps];
    }

wdyt?

[cipolleschi]

Hi @mrousavy, thank you for the suggestions.

I think that we can try something similar to a certain extent. However, I'm a bit worried concerned because C++ has various way to define its properties: you can have const and pointers, for example, and different kind of pointers.

I can't be tricky to automatically generate a functioning code for all these combinations. Plus, as you can see already with your example, we should have to hardcode in the Codegen the various conversions. For example:

[NSNumber numberWithInt:newViewProps.blurAmount];
[NSString stringWithUTF8String:toString(newViewProps.blurType).c_str()];
RCTUIColorFromSharedColor(newViewProps.reducedTransparencyFallbackColor);

This adds complexity and I think that these two are (at least) part of the reasons why we haven't codegen'd an automatic prop update.

PErhaps @sammy-SC has more insights on the problem.

[sammy-SC]

@cipolleschi that's a good summary. I think you mentioned all the important points.

@mrousavy
Question about the 1st approach, how would we get NSDictionary from old and new props struct? What about types which are stored in struct signature?
For the 2nd approach, how would we build the looping mechanism? As far as I know, C++ standard does not provide a way to loop over data members. How would we know the type of data member inside the loop?

it has been a while since I looked into C++ <-> Swift interoperability, but that would be one avenue to explore to add support for Swift native components. Maybe all of the requirements to support props, state updates and event emitters from Swift have been met and we could just expose it to Swift.

[MikePendo]

We are currently working on supporting our SDK for the new Arch Pendo
@kelset any chance u can include us in the list?
Thanks

[MikePendo]

@kelset
Do u mind if I update it?

[cortinico]

Lorenzo is on vacation till January. Please update the table following the current structure

[kelset]

@MikePendo any links to any open issues/PRs where people can follow along/check in on status in the sdk repo?

[MikePendo]

No, unfortunately we r not open source. As a first step we are verifying that our SDK is supported by enabling Turbo modules in the apps, after that we will add the support for new bridging of Turbo Modules. Currently we have some issues with Fabric(I cant supply accurate dates about that)

[matinzd]

First lottie-react-native release candidate version is now available for testing which supports new architecture both on iOS and Android.
We are still investigating some bugs facing in android but hopefully it will be available on stable channel soon.

https://www.npmjs.com/package/lottie-react-native/v/6.0.0-rc.1

Shoutout to @alfonsocj and @AlexanderEggers for helping us to get it out.

[cortinico]

Thanks you all for driving this forward! Super excited for this

[pushpender-singh-ap]

Hey @cortinico

This lib support react native new architecture fabric https://github.com/pushpender-singh-ap/react-native-scanner

[RonRadtke]

https://www.npmjs.com/package/react-native-blob-util is now fully supporting the new aritechture. Last known bug on iOS is fixed for now.
Thanks for the help!

[GZLiew]

I would like to monitor live video streaming player like VLC. Here is one I found razorRun/react-native-vlc-media-player#149

[matinzd]

React Native Lottie v6 is now out and it supports the new architecture.

Release: https://github.com/lottie-react-native/lottie-react-native/releases/tag/v6.0.0

@kelset @cortinico

[cortinico]

Amazing stuff!

[ngocle2497]

Hey @cortinico ,
react-native-keys is in progress PR

[ospfranco]

op-sqlite is compatible with old-arch and new-arch but not bridgeless. Should bridgeless get its own category now?

op-sqlcipher does not support new-arch yet, but it will soon, only need to merge op-sqlite into it.

[kelset]

Should bridgeless get its own category now?

That's a good question. @cortinico WDYT?

[cipolleschi]

No, I personally don't think so. The dichotomy of New Architecture (Bridged) / New Architecture (Bridgeless) is temporary for 0.73.
From 0.74 onwards, we expect to have only Old Architecture / New Architecture (Bridgeless) (unless something else major happens that we can't foresee now)

[cortinico]

Basically what @cipolleschi

If there are libraries that are New Architecture compatible AND are not working with Bridgeless, we should know it ASAP as we can potentially re-implement some Bridge-only APIs to work in Bridgeless mode. We want to avoid a 3-state world with Old/New (Bridge)/New (Bridgeless) as it's just too confusing

[sohayb]

Hello,
we're using the react-native@0.72.8, we added support for the new architecture, all is good (after overcoming some hurdles with code generation). We still can't roll it out though, as one feature depends on taking screenshots, we're using react-native-view-shot, which does not support the new arch. There's already an issue opened for it #452 and #469.
Another alternative would be react-native-skia, which does support the new architecture, but for the screenshot feature.

[brentvatne]

Hi folks! We're in the home stretch here! We're making a big push for New Architecture support with React Native 0.74. For updates and info on how to help: #167. Let's continue discussions there.

[michalchudziak]

Hey! @react-native-community/geolocation also supports the new architecture 😀 https://github.com/michalchudziak/react-native-geolocation