Lottie-react-native: PNG not working in json

[turooblanco]

Hi

Im exporting a json file with after effects and the animated text seems to be ok, the issue I'm dealing with is the png file within the animation, is not showing on the json file, it just show a PNG file icon

How can i fix this?

[turooblanco]

That's exactly what I've been doing and doesn't seems to work

[rodrigoelp]

Hi @turooblanco, you need to set the assets folder as part of the lottie view, as you can read it here under the section imageAssetsFolder

Do notice, it indicates iOS will ignore this property (I do not know if that means the image is not going to load at all). The recommendation I've read from the community is that is always best to render all the content as vector graphics, which is pretty easy to deal with when most of your content has been designed in Illustrator (drag the illustrator file in AE, then create shape layers as described here

[joaohenrifranco]

Where should this folder be? Is the imageAssetsFolder a relative path from the .js file instantiating LottieView or is it an absolute path? If the latter, which folder should I consider root? android/?

[emilioicai]

You need to copy your images into [PROJECT FOLDER]/android/app/src/main/assets. It is suggested to create a lottie subfolder, and eventually a folder per animation.

You will then need to refer that folder, via its relative path, in the imageAssetsFolder prop for the animation - ex: imageAssetsFolder={'lottie/animation_1'}.

[joaohenrifranco]

Thanks for the quick reply! Minutes after posting the question I found the answer in the docs, my bad ;).

Adding to your answer, if somebody finds this having the same problem, remember to run react-native run-android every time you update the assets.