Drax measurement system completely brakes when items resize

[ofersadgat]

If you have a list:

function resizingText(props){
   const [height, setHeight] = useState(20);
   useEffect(() => {
       const t = setTimeout(() => {
          setHeight(40);
       }, 1000);
       return () => clearTimeout(t);
   });
   return <View height={height}><Text>{props.children}</View>;
}

function renderList(){
  return (
     <>
      <DraxView><Text>1<Text></DraxView>
      <DraxView><resizingText>2<resizingText></DraxView>
      <DraxView><Text>3<Text></DraxView>
      <DraxView><Text>4<Text></DraxView>
     </>
  )
}

in the above case, drax will detect and correctly update the resize and positioning of the resizingText but what fails is that the position of the elements after (text 3 and text 4) have changed due to being positioned relatively, but Drax fails to update their locations causing drag/drop to fail. The current algorithm is to look up the tree on change, but I think it also needs to look at siblings. Thoughts?

[LunatiqueCoder]

Hey @ofersadgat. Could #112 be related? I think it might be a duplicate actually.

[ofersadgat]

That thread seems to be talking about absolutely positioned elements, this one is about relative positioned elements. Unless you're saying that drax will convert relative positioning to absolute?

[olivertylsar]

Same here. The problem also occurs when there are items dynamically added above the already renderered items. Typically when there are multiple items in a list and each of those items fetches data from a different endpoint and the items are rendered as they load.

Changing render key is a working workaround but it gets messy very fast and you have to consider every case that can cause the items to change their position. There are a lot of problems with this approach.

@LunatiqueCoder Would a reproduceable example in the example app help you with the investigation?