question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DraxView's layout position is not updated when one of its prior sibling views changes size

See original GitHub issue

I wasn’t able to use DraxList so I now have the following structure:

<DraxProvider>
                <DraxScrollView>
                     <DraxView receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}>
                           <Text category="h5">Box 1</Text>
                           <DraxView draggable={true} receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}><List Item style={styles.alphaItem} name="Item 1"/></DraxView>
                           <DraxView draggable={true} receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}><List Item style={styles.alphaItem} name="Item 2"/></DraxView>
                           <DraxView draggable={true} receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}><List Item style={styles.alphaItem} name="Item 3"/></DraxView>
                      </DraxView>
                     <DraxView receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}>
                           <Text category="h5">Box 2</Text>
                           <DraxView draggable={true} receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}><List Item style={styles.alphaItem} name="Item 4"/></DraxView>
                           <DraxView draggable={true} receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}><List Item style={styles.alphaItem} name="Item 5"/></DraxView>
                           <DraxView draggable={true} receptive={true} receivingStyle={styles.receiving} onReceiveDragDrop{...}><List Item style={styles.alphaItem} name="Item 6"/></DraxView>
                      </DraxView>
                </DraxScrollView>
            </DraxProvider>

Works mostly as expected. However, when I add or remove an Item within a Box, the next item I drag is not aligned with the cursor, i.e. shifted some amount down. It seems like measurement values are not updating properly after the height of the list changes. Is it possible to manually re-calculate offsets for where to position the drag view upon dragging an item? If not, any other suggestions?

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

3reactions
ajstokarcommented, Feb 25, 2021

Changing the key of the container worked! I’m not sure if this will be a noticeable performance difference, but it gets the job done for now. Thanks!

1reaction
lafioscacommented, Jul 11, 2021

I’m sorry to hear that. It will probably be some time before I am able to dig in deeply on this code again and experiment. If anyone else has the availability, I’d be open to their findings.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Make child height update height of his siblings - Stack Overflow
I understand that you change the height/width of viewA programmatically. So you have the height and width resources available.
Read more >
Mastering General Sibling Selectors: Custom Tab Navigation
Welcome to the next in our series of tutorials where we use the general sibling combinator ~ to create various components for the...
Read more >
Adjacent sibling combinator - CSS: Cascading Style Sheets
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, ...
Read more >
CSS Previous sibling selectors and how to fake them - Medium
Either parent selectors or previous siblings selectors are simply not a thing. ... “remember” the current rating, just in case the user wants...
Read more >
The Adjacent-Sibling Selector - meyerweb.com
As previous articles in this series have shown, CSS has some interesting new selectors. Between the universal selector and the child selector, it's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found