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

Elevation style property applied to view rather than animation on android #1048

Open
Monkhai opened this issue Jul 16, 2023 · 4 comments
Open

Comments

@Monkhai
Copy link

Monkhai commented Jul 16, 2023

Description

When I add a new animation and add elevation to it, it is added to the view that contains the animation rather to the animation object itself. This only happens on android. When I add a shadow to the Lottie component the shadow is added to the animated object itself like it should.
I only need this feature as I cannot use the shadows I define in after effects.

Steps to Reproduce

  1. Create an animation in After Effects
  2. Export the animation as a Lottie JSON file using bodymovin
  3. Import a Lottie component from 'lottie-react-native'
  4. add a style prop with: {{width: 400, height: 400, elevation: 10, shadowColor: 'black', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.2, shadowRadius: 10}}

Expected behavior: [What you expected to happen]
I expect the elevation to be added to the animation.
Actual behavior: [What actually happened]
On IOS the shadow is added correctly directly to the animated object (which is for me a big circle moving around), but, on android, it is not added to the animation but to the view it is contained in. So that the ball, that changes sizes, does not have elevation but the whole view (which remains the same size the entire time) is getting that elevation instead.

Versions

"lottie-ios": "^4.2.0",
"lottie-react-native": "^5.1.6",
"expo": "~48.0.18",
"react-native": "0.71.8",
"react": "18.2.0",
npm: 9.6.7
node: 20.2.0

@matinzd
Copy link
Collaborator

matinzd commented Jul 17, 2023

You cannot assign any style to the animation elements inside. All styles will only get applied to the container of the lottie animation renderer view.

@Monkhai
Copy link
Author

Monkhai commented Jul 17, 2023

You cannot assign any style to the animation elements inside. All styles will only get applied to the container of the lottie animation renderer view.

But it does works perfectly with iOS

@Robert6321
Copy link

@Monkhai Were you able to find a fix for this ? I have tried exporting a lottie with a drop shadow but it just doesn't show up on Android. Ironically, on iOS I can use the shadow property on the wrapping View of Lottie and it nicely follows the path of the Lottie shape.

@Robert6321
Copy link

@matinzd Is drop shadow not supported for lottie-react-native Android ?

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

No branches or pull requests

3 participants