Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fix iOS frames being calculated incorrectly#1019

Merged
matinzd merged 2 commits into
lottie-react-native:masterfrom
TheRogue76:fix/iOSBoundingIssues
May 4, 2023
Merged

Fix iOS frames being calculated incorrectly#1019
matinzd merged 2 commits into
lottie-react-native:masterfrom
TheRogue76:fix/iOSBoundingIssues

Conversation

@TheRogue76

@TheRogue76 TheRogue76 commented May 3, 2023

Copy link
Copy Markdown
Collaborator

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

@matinzd matinzd left a comment

Copy link
Copy Markdown
Member

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.

2 participants