Fabric support for iOS

[alfonsocj]

Summary

Adding Fabric support for iOS.

• Update podspec file to match new architecture's paved path.
• Implementation of LottieAnimationViewComponentView objective-c++ class that uses existing ContainerView.swift.

[alfonsocj]

@AlexanderEggers, here's what I have so far. The fabric example works, but I still have to figure out a frame issue that prevents ContainerView's animationView not visible (because the frame is (0.0, 0.0, 0.0, 0.0)) here

[alfonsocj]

@AlexanderEggers I tested on Android and it seems like it's accepting the structs. The problem I see now is I get this error when the animation ends
java.lang.AssertionError: Method overloading is unsupported: com.facebook.react.uimanager.events.RCTModernEventEmitter#receiveEvent
This happens when the sendOnAnimationFinishEvent method runs and receiveEvent gets called. Can you reproduce this? It's happening to me on the fabric example in master as long as loop prop is set to false which is when the onAnimationFinish gets triggered.

[alfonsocj]

@emilioicai @AlexanderEggers @matinzd I think the PR is ready!

[matinzd]

I am going to test it this weekend. Thanks for the PR!

[alfonsocj]

Happy New Year! @matinzd, did you have a chance to test it?

[matinzd]

Happy New Year! @matinzd, did you have a chance to test it?

I am going to test this tonight. 🚀

[matinzd]

I ran into some issues while building and testing it last night. I will give more update on it later today.

[matinzd]

Try playing with examples and adding the view to different hierarchies. It starts throwing an error.

Video:

Untitled.mp4

[bukhari-flip]

I think the Cannot read property '_nativeTag' of null appeared when fast reload was enabled. Because when an error appeared and then you force to refresh the app, the error will disappear.

This behavior happened on both iOS and Android.

[matinzd]

I think the Cannot read property '_nativeTag' of null appeared when fast reload was enabled. Because when an error appeared and then you force to refresh the app, the error will disappear.

This behavior happened on both iOS and Android.

I think we might need to refactor javascript code as well. There are some deprecated methods used in our js files.

[alfonsocj]

@matinzd, which deprecated methods are you referring to? I'd be happy to refactor those.
Are you referring to AnimatedLottieView being a class based component with lifecycle events like componentDidUpdate?

[matinzd]

@matinzd, which deprecated methods are you referring to? I'd be happy to refactor those. Are you referring to AnimatedLottieView being a class based component with lifecycle events like componentDidUpdate?

Sorry, my bad. I thought we are still using dispatchViewManagerCommand and dispatchCommand.

[alfonsocj]

I'm not sure why that's happening on Fabric when using fast reload. It's related to the native component having a ref. I couldn't reproduce the issue when removing the ref from the native component in LottieView.tsx.

[alfonsocj]

@matinzd, let me know when you can test my findings. I'll investigate further what's going on with the refs.

[matinzd]

@matinzd, let me know when you can test my findings. I'll investigate further what's going on with the refs.

Ok, I found the issue. According to this note first callback of ref will be initiated as null during the first render of DOM (it is related to react internals). So if we wrap ref with null check it fixes the problem. But I don't know if this is a good idea.

  _captureRef(ref: React.ElementRef<typeof NativeLottieAnimationView>) {
+   if (ref === null) {
+      return
+   }

    this._lottieAnimationViewRef = ref;
    if (this.props.autoPlay === true) {
      this.play();
    }
  }

[alfonsocj]

I think this makes sense. I don't see any issues with not assigning the ref until it's not null.

[alfonsocj]

I added color filters to the example. I see those working fine on iOS. Android is not getting them.

[alfonsocj]

Android is getting the values and assigning a color filter. I think the problem is that the color filter keypath for Android is not the same than for iOS.

[alfonsocj]

@matinzd have you tried using a lottie animation that includes a text before? I tried one that uses Roboto font and it crashes on Android since the font is not there. I tried adding it to assets/font but that didn't work.
All this to try the textFilters (which works on iOS)

[matinzd]

Hey @alfonsocj ,
Example upgrade is ready! Try rebasing/updating your branch.

[matinzd]

Looks good! 🚀