Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix iOS frames being calculated incorrectly #1019

Merged
merged 2 commits into from May 4, 2023
Merged

Fix iOS frames being calculated incorrectly #1019

merged 2 commits into from May 4, 2023

Conversation

TheRogue76
Copy link
Collaborator

@TheRogue76 TheRogue76 commented May 3, 2023

As of RC4 (This PR), Lottie no longer wraps the Native component in a separate view, and passes all the view props to the native implementation. This causes an issue with Lottie on iOS, as the iOS version of Lottie is made of two different views:

  1. A RCTView from react native that gets all of the props (Like background color, etc)
  2. A LottieAnimationView which is a Subview of the RCTView

The LottieAnimationView is tapping into the RCTView's frame and giving it to itself. But this is incorrect as the frame property on iOS has the coordinates of the RCTView as well, leading to a rather gnarly offset. Instead of frame, the bounds property should be used.

This PR does three things:

  1. Update both example apps to 71.7 to fix the issue of the newest version of XCode not building
  2. Changes the property wrapper for setting the frame of LottieAnimationView from frame to bounds and removes the hacky override at the top.
  3. Document how the setup for the views on iOS works at the top of the file

NOTE: The reason wrapping the Native component with a view fixed the issue is that the frame of the RCTView would be equal to the bounds, due to the styling being applied to the parent and the fact that frame is calculated relative to the parent

@matinzd matinzd self-requested a review May 4, 2023 06:41
Copy link
Collaborator

@matinzd matinzd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Thanks for your contribution.

@matinzd matinzd merged commit 3039b73 into lottie-react-native:master May 4, 2023
@TheRogue76 TheRogue76 deleted the fix/iOSBoundingIssues branch July 21, 2023 08:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants