nuclearpasta / react-native-drax

A drag-and-drop system for React Native
MIT License
554 stars 69 forks source link

Drax measurement system completely brakes when items resize #179

Open ofersadgat opened 1 day ago

ofersadgat commented 1 day ago

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 commented 1 day ago

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

ofersadgat commented 1 day ago

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?