Lottie-react-native: How to add JSON with source?

[duringg]

I can run the example JSON .
and run the JSON without Image source export by AE

but can't run the JSON by use Image source export by AE

JSON :

{"v":"4.5.9","fr":25,"ip":0,"op":750,"w":750,"h":1334,"ddd":0,"assets":[{"id":"image_0","w":154,"h":154,"u":"images/","p":"img_0.png"},{"id":"image_1","w":154,"h":154,"u":"images/","p":"img_1.png"},{"id":"image_2","w":154,"h":154,"u":"images/","p":"img_2.png"},{"id":"image_3","w":154,"h":154,"u":"images/","p":"img_3.png"}],"layers":[{"ddd":0,"ind":0,"ty":2,"nm":"img_0.png","cl":"png","refId":"image_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":0,"s":[159,1415,0],"e":[349,485,0],"to":[31.6666660308838,-155,0],"ti":[-279.666656494141,-620,0]},{"t":45}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":0,"s":[100,100,100],"e":[86,86,100]},{"t":45}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":2,"nm":"img_0.png","cl":"png","refId":"image_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[285,1591,0],"e":[269,1131,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[-10.6666669845581,184.33332824707,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":11,"s":[269,1131,0],"e":[349,485,0],"to":[10.6666669845581,-184.33332824707,0],"ti":[-279.666656494141,-620,0]},{"t":56}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":11,"s":[100,100,100],"e":[86,86,100]},{"t":56}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":2,"nm":"img_1.png","cl":"png","refId":"image_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[493.863,1633.527,0],"e":[477.863,1173.527,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[24.1438236236572,191.421157836914,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":5,"s":[477.863,1173.527,0],"e":[349,485,0],"to":[-24.1438236236572,-191.421157836914,0],"ti":[232.33332824707,-272,0]},{"t":21}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":0,"s":[100,100,100],"e":[86,86,100]},{"t":16}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":2,"nm":"img_1.png","cl":"png","refId":"image_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[184,1544,0],"e":[168,1084,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[-27.5,176.5,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":5,"s":[168,1084,0],"e":[349,485,0],"to":[27.5,-176.5,0],"ti":[-279.666656494141,-620,0]},{"t":50}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":0,"s":[100,100,100],"e":[86,86,100]},{"t":45}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":2,"nm":"img_2.png","cl":"png","refId":"image_2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[247,1522,0],"e":[231,1062,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[-17,172.83332824707,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":3,"s":[231,1062,0],"e":[349,485,0],"to":[17,-172.83332824707,0],"ti":[-279.666656494141,-620,0]},{"t":48}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":3,"s":[100,100,100],"e":[86,86,100]},{"t":48}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":2,"nm":"img_3.png","cl":"png","refId":"image_3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[459,1653,0],"e":[443,1193,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[18.3333339691162,194.66667175293,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":6,"s":[443,1193,0],"e":[349,485,0],"to":[-18.3333339691162,-194.66667175293,0],"ti":[-55.6666679382324,76,0]},{"t":25}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":6,"s":[100,100,100],"e":[86,86,100]},{"t":25}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":2,"nm":"img_3.png","cl":"png","refId":"image_3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[183,1577,0],"e":[167,1117,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[-27.6666660308838,182,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":16,"s":[167,1117,0],"e":[349,485,0],"to":[27.6666660308838,-182,0],"ti":[-279.666656494141,-620,0]},{"t":61}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":16,"s":[100,100,100],"e":[86,86,100]},{"t":61}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":2,"nm":"img_2.png","cl":"png","refId":"image_2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":0,"s":[362,1591,0],"e":[349,485,0],"to":[-2.16666674613953,-184.33332824707,0],"ti":[-231.66667175293,-152,0]},{"t":45}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":0,"s":[100,100,100],"e":[86,86,100]},{"t":45}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":2,"nm":"img_1.png","cl":"png","refId":"image_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":0,"s":[324,1522,0],"e":[349,485,0],"to":[4.16666650772095,-172.83332824707,0],"ti":[-71.6666641235352,-36,0]},{"t":25}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":0,"s":[100,100,100],"e":[86,86,100]},{"t":45}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":2,"nm":"img_2.png","cl":"png","refId":"image_2","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[639,1583,0],"e":[623,1123,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[48.3333320617676,183,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":7,"s":[623,1123,0],"e":[349,485,0],"to":[-48.3333320617676,-183,0],"ti":[428.333343505859,-672,0]},{"t":31}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":7,"s":[100,100,100],"e":[86,86,100]},{"t":31}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":10,"ty":2,"nm":"img_3.png","cl":"png","refId":"image_3","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":0,"s":[578,1615,0],"e":[349,485,0],"to":[-38.1666679382324,-188.33332824707,0],"ti":[272.333343505859,-456,0]},{"t":45}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":0,"s":[100,100,100],"e":[86,86,100]},{"t":45}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":11,"ty":2,"nm":"img_0.png","cl":"png","refId":"image_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.833,"y":1},"o":{"x":0.333,"y":0},"n":"0p833_1_0p333_0","t":0,"s":[562,1583,0],"e":[546,1123,0],"to":[-2.66666674613953,-76.6666641235352,0],"ti":[35.5,183,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"n":"0_1_0p333_0","t":4,"s":[546,1123,0],"e":[349,485,0],"to":[-35.5,-183,0],"ti":[224.33332824707,-108,0]},{"t":23}]},"a":{"a":0,"k":[77,77,0]},"s":{"a":1,"k":[{"i":{"x":[0.692,0.692,0.667],"y":[1,1,0.667]},"o":{"x":[0.662,0.662,0.333],"y":[0,0,0.333]},"n":["0p692_1_0p662_0","0p692_1_0p662_0","0p667_0p667_0p333_0p333"],"t":4,"s":[100,100,100],"e":[86,86,100]},{"t":23}]}},"ao":0,"ip":0,"op":750,"st":0,"bm":0,"sr":1}]}

[jdpigeon]

The current version of lottie-react-native doesn't support images. Support was just added in lottie-android, however, so there's hope you'll be able to run JSON animations with images in RN soon

[ahanriat]

Any update on this ? :)

[alexcanessa]

I think could be linked to #145.

Any updates?

[juiceo]

@alexcanessa @ahanriat Unfortunately the owners of this project don't seem very active in answering issues, but there seems to now be a prop for defining an imageAssetsFolder, added in the docs.

I haven't yet been able to figure out how to use it, might have to add the animations to the android assets folder and define imageAssetsFolder as a relative path from there. Will update once I figure it out.

[kelset]

I agree with @alexcanessa, #145 is a duplicate - I can't get the image to get loaded on iOS, any update anyone? :/

---

EDIT: this PR seems related to the issue #105, by reading the comment it looks like there is a way to have everything work, gonna try it tomorrow.