I need to set the height of SVG so that it would only take as much space as the form below would allow so that all elements would fit in the viewport. For that I have forwarded ref to the form component and calculated the dimension it should take with the measureLayout function, according to the docs
measureLayout(relativeToNativeComponentRef, onSuccess, onFail)Like measure(), but measures the view relative to an ancestor, specified with relativeToNativeComponentRef reference. This means that the returned coordinates are relative to the origin x, y of the ancestor view.
And the examples show that they just attach two refs to the parent and a child with the starting value of null and it works.
In typescript the first argument - relativeToNativeComponentRef is of type RefObject<number | HostComponent> and the ref that is on the element expects to be LegacyRef | undefined and although the code works I do not know how to type it properly and also on initial load all the values are 0 0 0 0 only when I manually refresh it gets properly displayed, can you hint me with that as well?The code is
const { height: viewportHeight } = Dimensions.get("window");export const Home: React.FC<HomeScreenProps> = ({ navigation }) => { const [svgHeight, setSvgHeight] = useState(0); const svgHeightForwardedRef = useRef<View | null>(null); const dispatch = useAppDispatch(); const onSumbit = (data: UserMetrics) => { const { gender, age } = data; dispatch(setUserData(data)); navigation.navigate("Tests", { gender, age }); }; const homeScreenContainerRef = useRef<number | HostComponent<unknown>>(null); useLayoutEffect(() => { if (svgHeightForwardedRef.current && homeScreenContainerRef.current) { svgHeightForwardedRef.current?.measureLayout( homeScreenContainerRef.current, (left, top, width, height) => { console.log(left, top, width, height); const svgHeightPerPlatform = Platform.OS === "web" ? viewportHeight - height + top : viewportHeight - height - top; setSvgHeight(svgHeightPerPlatform); }, () => { console.log("fail"); } ); } }, [svgHeightForwardedRef, homeScreenContainerRef]); return (<View style={styles.container} ref={homeScreenContainerRef}><View style={styles.wrapper}><StatusBar style="auto" /><Text style={styles.welcomeText}>Test Reminder</Text><View style={styles.heroWrapper}><HeroSVG width={PLATFORM_WIDTH} height={svgHeight} preserveAspectRatio="xMidYMid meet" /></View><HealthCheckForm onSubmit={onSumbit} ref={svgHeightForwardedRef} /></View></View> );};Many thanks
EDIT:I have solved "and also on initial load all the values are 0 0 0 0 only when I manually refresh it gets properly displayed, can you hint me with that as well? " by putting [svgHeightForwardedRef.current, homeScreenContainerRef.current] in the dependancy array instead of [svgHeightForwardedRef, homeScreenContainerRef], I still need help with the typescript however, thanks.