Horizonal ScrollView within a RN Vertical ScrollView...

[mattwoberts]

I'm working on a "unlimited scroll" chart, kind of like a wallchart, where you can scroll up/down for your users, and left/right across your calendar days.

I've got this working so that as you reach the last item in the horizontal scrollview, it then loads new content and appends it onto the end. This works, but it's very slow - appending new views seems to take a while and I get the impression I'm missing out on some of the perf benefits of a FlatList too. On slower android devices such as my Pixel 1, it's almost unusably slow when you just swipe around.

I realise this could be one of those "need more context", but does this look right for a performant way to solve this problem?

import {View, Text, ScrollView} from 'react-native';
import {ScrollView as GestureHandlerScrollView} from 'react-native-gesture-handler';

...

return (
<ScrollView
  directionalLockEnabled={true}
  contentContainerStyle={{
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingBottom: 100,
  }}>
  <View style={{flex: 1}}>{state.users?.map(renderUserAvatar)}</View>
  <GestureHandlerScrollView
    horizontal={true}
    ref={scrollViewRef}
    disableScrollViewPanResponder={true}
    disableIntervalMomentum={true}
    contentOffset={{x: CONTAINER_WIDTH, y: 0}}
    nestedScrollEnabled={true}
    style={{maxWidth: CONTAINER_WIDTH}}
    snapToAlignment={'start'}
    alwaysBounceHorizontal={false}
    bounces={false}
    snapToInterval={CONTAINER_WIDTH}
    pinchGestureEnabled={false}
    showsHorizontalScrollIndicator={false}
    decelerationRate="fast">
    {state.pages?.map(page => (
      <View key={page.start}>
        {state.users?.map(u => renderDays(u, page))}
      </View>
    ))}
  </GestureHandlerScrollView>
</ScrollView>
)