In a react-native, I have to create a table View which should match the following conditions:

1. The first row should be the header where the First & last Items should be sticky and items in the centre can be horizontally scrollable, also, the header should be sticky for vertical scroll.
2. From the second row onwards we will have actual data where again, the First & last Items should be sticky and items in the centre can be horizontally scrollable.
3. Other than the header table, it should be vertically scrollable including the first & last item of each row, also when scrolling vertically it should look like the complete row is scrolling together.
4. Also when the user scrolls horizontally all the items with the header should scroll together and the first & last item of each row should stick at their position.

I can achieve all but the table is either vertically scrollable or horizontally scrollable.

I don't want to use ref because with ref scrolling is not synchronised. Below I am sharing a video of how it's currently working. The only problem is horizontal scrolling which is not synchronised.

Scrolling Table In React-Native

In a react-native, I have to create a table View which should match the following conditions:

1. The first row should be the header where the First & last Items should be sticky and items in the centre can be horizontally scrollable, also, the header should be sticky for vertical scroll.
2. From the second row onwards we will have actual data where again, the First & last Items should be sticky and items in the centre can be horizontally scrollable.
3. Other than the header table, it should be vertically scrollable including the first & last item of each row, also when scrolling vertically it should look like the complete row is scrolling together.
4. Also when the user scrolls horizontally all the items with the header should scroll together and the first & last item of each row should stick at their position.

I can achieve all but the table is either vertically scrollable or horizontally scrollable.

I don't want to use ref because with ref scrolling is not synchronised. Below I am sharing a video of how it's currently working. The only problem is horizontal scrolling which is not synchronised.

Scrolling Table In React-Native

• react-native
• react-native-flatlist

1 Answer 1

Here's how you can go about it

divide layout:

• first row would be its own component with a scroll view, and fixed label
• remaining data in a flatlist, that renders custom data with fixed dates

synchronise list scrolls to enable body scrolling

here's a link to a working example - https://snack.expo.dev/gJJCLlFS0dghuUv6XUlx7