How to make Victory Native chart have more natural scrolling

Question

I have a basic bar graph chart that allows panning. The only problem is there is no momentum scrolling. In other words, when you scroll and release your finger, it stops scrolling immediately, which is not natural. How can I enable this?

  const getContainerComponent = () => {
    return (
      <VictoryZoomContainer 
            allowZoom={false}
            allowPan={true}
            zoomDimension="x"
            zoomDomain={{x: [props.data.length - 7, props.data.length]}}
            minimumZoom={{x: 1}}
            clipContainerComponent={<VictoryClipContainer />}
          />
    )
  }

  return ( 
    <VictoryChart 
      theme={theme}
      minDomain={{ y: 0 }}
      containerComponent={ getContainerComponent() }
      domainPadding={{ x : [10, 10] }}
      >
      <VictoryAxis 
        dependentAxis 
        tickFormat={(t: number) => `${Math.round(t)}`}
        crossAxis={false}
      />

      <VictoryAxis
        tickLabelComponent={ <VictoryLabel dy={10} />}
       />

      <VictoryBar 
        data={arrayOfData} 
        x="timePeriod"
        y="amount"
        alignment="middle"
        barWidth={25}
        cornerRadius={{ top:12, bottom: 12 }}
        />
    </VictoryChart> 
  )

Answer 1

The solution was to put the victoryChart with the x axis in a scroll view. The y axis stays on its own.

Here's how I did it (with some NativeBase Components):

<HStack marginRight={5} >
  <Box w="15%" >
      <VictoryAxis 
        dependentAxis 
        tickFormat={(t: number) => Number.isInteger(t) ? `${Math.round(t)}` : null}
        crossAxis={false}
        maxDomain={{y: domainMax} }

        tickCount={5}
      />
  </Box>
  <Box w="85%" >
    <ScrollView
      horizontal
    >
      <VictoryChart 
        theme={theme}
        minDomain={{ y: 0 }}
        padding={{ left: 1, right: 1, top:50, bottom:50 }}
        domainPadding={{ x : 17 }}

        width={ formattedData.length * (barWidth + betweenBarPadding)}
      >
        <VictoryAxis
          tickLabelComponent={ <VictoryLabel dy={10} />}
        />
        <VictoryBar
          data={formattedData} 
          x="timePeriod"
          y="amount"
          alignment="middle"
          barWidth={barWidth}
          cornerRadius={{ top:12, bottom: 12 }}
        />
      </VictoryChart> 
    </ScrollView>
  </Box>
</HStack>