How to sync two scrollviews in react native?

Question

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

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

Answer 1

Disable scrollTos animation like this:

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

Then there is no lag :)