How to sync two scrollviews in react native?

10
votes

My requirement is to create a table with fixed header and first column, table data will scroll in both horizontal and vertical directions.

for this I have used 3 scrollviews , following gif will make it clear enter image description here

  1. 1st scrollview is the header name row, it is set to horizontal = true (i.e its scroll direction is horizontal)
  2. 2nd scrollview is kcname 1st column of the table, it is vertical scroll, both of these have scrollEnabled={false}, as they wont take scroll gesture, they are scroll programmatically using scrollTo
  3. 3rd scrollview is body cell table filled with data, this view has 2 scrollviews as parent , one to take horizontal scroll and another to take vertical scroll.

the scroll values of two body scroll views are put in scrollTo of the other two scrollview using refs on onScroll event, scrollEventThrottle value is 16 .

My problem is how to sync these scrollviews scrolls as this clearly shows lag, which is not acceptable

1
datatablereact-nativescrollview
What happens when the default scrollEventThrottle is used. According to docs, The default value is zero, which results in the scroll event being sent only once each time the view is scrolled. - agenthunt
no doesn't works 0 means once per scoll , definitely lags - Abhinav Singh
@carelesslyChoosy did you found any solution or workaround? - Michał Šrajer
Did you find a solution? - Erik Grosskurth

1 Answers

1
votes

Disable scrollTos animation like this:

this.toolbar.scrollTo({
  x: yourXValue,
  animated: false,
});

Then there is no lag :)