feat: initial support for new architecture (fabric)

[AlexanderEggers]

This is the basic fabric integration for Android. I used a very basic fabric project to verify that the most basic props are working on both platforms - but that requires more testing to verify each and every permutation.

Changes made in this PR

• Fabric support for Android.
  • Note: Fabric support will only work for RN 0.70 and higher. That is due to the introduced autolinking which doesn't exists for older versions.
• I migrated the existing project setup to use a monorepo setup instead to simplify some of the tooling usage.
• Added a new sample project to cover fabric testing
  • Note: The fabric-example project does not contain the windows source files including the react-native-windows package. I also had to use a much simpler example project implementation due to multiple libs not supporting fabric yet.
• Update project to support the latest RN 0.70.x
• Refactor android project to allow old arch and new arch support. Essentially I created an implementation class that is called from both arch view manager files.
• Update JS project to include the definitions needed for the RN codegen and relevant files to compile correctly.
• Replace current output bundle creation with react-native-builder-bob.
• Remove the android LottieView prop "cacheStrategy". That prop does not have a way to be injected into the lottie integration outside the XML definition.
• Fix autoplay usage in the lottie view integration which was auto playing even if the prop was set to false. Potentially fixes Lottie is autoplaying on iOS even if AutoPlay is turned to False #931.

New project setup

You need to follow these steps to run the new monorepo structure:

1. Run yarn install in the root folder of the project to install all dependencies
2. Run yarn setup in the root folder of the project to build the library output files which are going to be consumed by third party projects (and examples).
3. Run the following scripts to run different parts of the project:

• yarn fabric:android - android example project running fabric
• yarn fabric:ios - ios example project running fabric
• yarn paper:android - android example project running paper
• yarn paper:ios - ios example project running paper

[AlexanderEggers]

@emilioicai @matinzd Can you have a look at the changes and the "Things to discuss" section? Just so that we can unblock the remaining work for this PR.

[matinzd]

Things to discuss:

• Please have a look at src/index.d.ts. I added a few comments pointing out certain props which cannot be supported by the new arch. I am actually confused how some of these were working in the first place because some were not even having a @ReactProp refering to them.
• The color and text filter props are something which we need to implement differently. The new arch doesn't support the current complex objects we are attempting to send to the native side. Instead I would suggest we parse jsons from the JS to native side and use for example GSON (on Android) to get the objects again.

• I also noticed that some props did not have @ReactProp annotation. Maybe @emilioicai can help you with that more since I don't have clue on those.
• For the support of complex objects, serializing it can be a good idea but in that case, we will lose type safety. We can investigate what other libraries are doing. But for now and the current situtation of codegen I think we have to serialize it in JS and deserialize it in native. But we need to make sure that serialized prop is valid with proper properties.

[AlexanderEggers]

@emilioicai @matinzd FYI, I moved the project to yarn workspaces to simplify our dependency handling between the lib and the examples. Let me know what you think about that change.

Unfortunately I am still unable to solve the new architecture issue - I hope to get some help from the RN team in the next few weeks.

[matinzd]

@emilioicai @matinzd FYI, I moved the project to yarn workspaces to simplify our dependency handling between the lib and the examples. Let me know what you think about that change.

Unfortunately I am still unable to solve the new architecture issue - I hope to get some help from the RN team in the next few weeks.

Thanks @AlexanderEggers ! I will check it out ASAP.

[AlexanderEggers]

@emilioicai @matinzd - can you have a look at the current changes in this branch? I am still blocked on that mentioned startup crash but I am hopening that maybe you can verify if my current setup looks fine and is not missing anything.

Steps to run the project:

• Make certain that you have yarn globally installed on your machine.
• Do a fresh clone with the branch
• Run yarn install && yarn setup in the root of the project
• After that run yarn fabric:android in the root of the project. That should start your emulator and deploy the application on that one.

Let me know if you are facing any issues.

[emilioicai]

Hey @AlexanderEggers , sure, I'll have a look into it

[AlexanderEggers]

@emilioicai @matinzd I finally managed to get android working via fabric. 🎉 The animation seems to run fine and the basic props are working. I will need to figure out something for the color filter and text filter props.

[AlexanderEggers]

@emilioicai @matinzd I already found some little time to also have a look at android paper and I was able to verify that paper ios and android is still working fine with the latest changes I made for android fabric. It would be great if you could review this PR. I think we are ready for an initial alpha version which just includes Android support for now. iOS should follow in the near future when I find enough time. Let me know if you have any questions/issues.

[AlexanderEggers]

@emilioicai I am unable to test if windows is still working fine with the latest js changes. Would you be able to do some testing around that?

[matinzd]

@emilioicai @matinzd I already found some little time to also have a look at android paper and I was able to verify that paper ios and android is still working fine with the latest changes I made for android fabric. It would be great if you could review this PR. I think we are ready for an initial alpha version which just includes Android support for now. iOS should follow in the near future when I find enough time. Let me know if you have any questions/issues.

Thanks, @AlexanderEggers!
I will try to check it out this week.

[AlexanderEggers]

@matinzd I did a bit more testing and I wasn't able to reproduce your issue. The only thing I found were duplicated .so files when building fabric-android. I resolved that as part of my most recent commits.

[capezzbr]

Hey, this looks awesome, great job @AlexanderEggers 👏 How can we help move this PR forward? 🙏

[alfonsocj]

@AlexanderEggers, please let us know if testing it would help you unblock the PR

[AlexanderEggers]

@alfonsocj The android integration still needs a bit of testing to verify that this implementation is actually stable. The iOS part is still missing and unfortunately something I haven't had the time to get started with.

[alfonsocj]

@AlexanderEggers thanks for the update! Are you planning on having a separate PR for iOS? I can try to tackle iOS based on the codegen work you've already done here. I have some experience adding fabric support for iOS as I did that for react-native-datetimepicker

[BloodyMonkey]

Is there a temporary workaround ?
Our project is broken after upgrading RN

[alfonsocj]

@BloodyMonkey, the new architecture is optional. If you are blocked by this you can disable the new architecture (which is disabled by default). If your app broke after upgrading RN then it sounds like a different problem than the new arch.

[AlexanderEggers]

@alfonsocj I think we should get this PR merged first before we start any real iOS work - just to avoid any larger merge conflicts. I will probably have some time in around 2 weeks to get started or help on the iOS work. If you keen to get started with that already in a differeny PR, that would be great 🙂

[matinzd]

I was on vacation for a week but I tested the latest changes last week with both Android and iOS. It seems that the issue with Android is fixed and we can merge this to avoid any further conflict.

/cc @emilioicai

[norbusonam]

When will this be released?

[alfonsocj]

If there are no other features or fixes in master, I think we should wait until the iOS support for the new architecture gets merged for a new release. @emilioicai what do you think?

[emilioicai]

agreed, this kinda blocks fixes for other issues but I think we better wait for that merge. That gives us more time to test this one

[norbusonam]

do you have an idea of how long it will be until a next release? @alfonsocj @emilioicai

[alfonsocj]

@norbusonam I think we are waiting on fixing these issues before releasing it:

• [Android] Crash on new arch when lottie animation finishes #963
• [Android] App crashes if lottie animation requires a font not found in the system #961

I don't have a lot of time right now to look at those. I believe @matinzd will be looking at those when he has some time.

If you have time to solve those, contributions are welcome!

[richierich1508]

Do you have an idea how long we need to wait for the new architecture (fabric) support in ios? @alfonsocj @emilioicai

[matinzd]

Hi @richierich1508,
As you may be aware, the community is working to transition to a new architecture. However, it will take time for all libraries to fully adopt this new architecture. Many developers are currently testing and evaluating the new architecture. At this time, not many apps have fully implemented the new architecture. I suggest disabling the new architecture for now and continuing to use the older architecture. Once the community is ready for release, you can then begin using the new architecture, although it is not recommended for use in production environments at this time.