Assign variable in ref.current.measure callback

user_16329469 0
Viewed 225

I have a problem with measuring value of my views. I have to get pageX and pageY value.

One component looks like:

  useEffect(() => {
    setTimeout(() => {
      updateElementPositions(index)
    })
  }, [])
....

 <StyledElement ref={elementRef[index]} style={style} index={index} type={type}> .....

Update element position is a function declared in the context

 const updateElementPositions = (index: string) => {
    elementRef[index].current.measure((x: number, y: number, height: number, width: number, pageX: number, pageY: number) => {
      // HERE IS A PROBLEM
    })
  }

in this function I would like to assign pageY and pageX value to variable. The problem is that I have a lot of components like that ( about 300 ) and I need to get a dimensions of each element. Hence I can't use setState or methods which causing re-render.I was trying to use ref.

 elementRef[index].current.measure((x: number, y: number, height: number, width: number, pageX: number, pageY: number) => {
      element.current[index] = {pageX, pageY}
    })

But I've encountered this error which is very odd to me

Error

Assign to "normal" variable also causes an error TypeError: Attempted to assign to readonly property.

I'm running out of ideas how can I do it.

I will be grateful if someone will be able to help me :) .

Regards

react-native reactjs measure javascript ios
1 Answers

The elementRef[index].current value is currently a reference to an HTMLElement, so you probably shouldn't mutate it. I suggest using a second set of refs to hold the pageX|Y coordinate values. Set the current value of a specific ref by index.

elementRef[index].current.measure((x: number, y: number, height: number, width: number, pageX: number, pageY: number) => {
  pageXYRefs.current[index].current = { pageX, pageY }
});
user_86908570
Related