[Question] v6 - How to dynmically set height

[nicolasbraun]

Description

In previous version I could only specify width to 100% and LottieView would automatically have the correct height, keeping the json ratio.

I read #1078 but I think I am missing something here.
In my scenario the content team can manage the content of our pages from a CMS and they upload animation's json to it.
We then fetch them from URL, having no way to know their size, or ratio.

The current README states we can use this code

  return (
    <LottieView source={require("../path/to/animation.json")} autoPlay loop />
  );

but it does not work except if width and height are set, which seems coherent with the v6 changelog.

Can you please explain if there is a way to achieve this in v6?

Lottie Version

Version: 6.4.0

[matinzd]

Hey there,

Save the width and height of each animation with their JSON files in your CMS. This data can be used to create styles based on the server's response.

[nicolasbraun]

@matinzd Thanks, that what I though, there is no longer any way to dynamically do it client side, meaning we cannot move to v6 until we add this functionality to our CMS.
Truth be told we are using Prismic (so we have to add fields and request content manager to manually add it into a new field).

Thanks for your reply

PS : any plans to add this functionality back? Or some king of helper to get the animation ratio ?

[TomCorvus]

This functionality was really appreciate. It is bizarre that no more developer create tickets about it.
I had this problem too, btw #1078

I start a function to get proportional size but it need some adjustments:

/**
 * Get proportional size from the other reference.
 * @param source
 * @param type
 * @param reference
 * @returns
 */
export const getProportionalSize = (source: any, type: 'width' | 'height', reference?: number | null) => {
	let defaultSize: any = { h: 0, w: '100%' };
	if (type === 'height') defaultSize = { h: '100%', w: 0 };

	if (!source) return defaultSize;
	if (!reference) return defaultSize;

	const { h, w } = source;

	if (type === 'width') {
		if (reference >= w) return { h, w };

		const difference = (reference * 100) / w;
		const cHeight = (h / 100) * difference;

		return { h: cHeight, w: reference };
	}

	if (reference >= h) return { h, w };

	const difference = (reference * 100) / h;
	const cWidth = (w / 100) * difference;

	return { h: reference, w: cWidth };
};

getProportionalSize('./path/to/json', 'width', 420);

In this example, 420 is my screen width, and I want to get proportional height.
The source need to include w and h keys like this:
{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.0.2","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":120,"w":800,"h":1300, ...

I think, it is by default, when your export your animation.

It's working only with Lottie JSON file, not this DotLottie file.

[matinzd]

PS : any plans to add this functionality back? Or some king of helper to get the animation ratio ?

When I find some time. I will try to expose a native method so that you get the width and height of the animation file. The previous default behavior could cause a lot of problems in terms of the API. With dotLottie coming up, it's not possible anymore to read the width and height directly from the file itself unless I read their protocol for its binary implementation.

[TheRogue76]

I think we should probably pin this issue for future reference. Sadly, the API that we used to provide for this functionality was extremely flawed and relied too much on Lottie only using JSON and that JSON file being formatted in a specific way.

[markholland]

@matinzd Any update on exposing a method for this? With v6 being necessary for Apple guidelines sometime soon this is still a blocker for us to upgrade.

[ShaneZhengNZ]

@matinzd Really need a guideline for this issue. If you can suggest a solution, I think if you don't have time to do it, there will be plenty people willing to help. We have upgraded to v6, and all of the sudden, all the lottie views disappear.