updateNumberOnScrollCalculation

const DATA_POINTS_ON_SCREEN = 6;
const WIDTH = Math.round((DATA.length / DATA_POINTS_ON_SCREEN) * Dimensions.get('window').width);

calculateXPosition = (index: number): number => {
    const linearScale = scaleLinear()
        .domain([0, DATA.length])
        .range([0, WIDTH]);

    return linearScale(index);
}

_updateDataPointOnGraph = (event) => {
    const { pinIndex } = this.state;
    const scrollPos = event.nativeEvent.contentOffset.x;
    const index = pinIndex + 1;

    if (scrollPos > this.calculateXPosition(index)) {
        this.setState({ pinIndex: this.state.pinIndex + 1 });
    } if (scrollPos < this.calculateXPosition(index) && scrollPos < this.calculateXPosition(index - 1)) {
        this.setState({ pinIndex: this.state.pinIndex - 1 });
    }
}

Do you have access to the scrolled SVG group element?

https://github.com/eikhunter/horizontal-line-chart-react-native - this is the repo I was working out of, but it hasn't been updated to use the code above, this version tries to calculate each increment between the points and update it that way, but I then realised d3 had the scaleLinear() func but it shows the way I render the graph

https://github.com/eikhunter/horizontal-line-chart-react-native/blob/master/GradientLine.js

const INCREMENT_WIDTH = DIMENSION_WIDTH / (DATA_POINTS_ON_SCREEN - 1); Is the way I have now calculated the width, as each new screen afterwards needs to be divisible by the what you have on screen - 1 to take into account the fact that you're only adding -1 data points on each screen each time, if that makes sense

const DIMENSION_WIDTH * ((data.length - DATA_POINTS_ON_SCREEN) / (DATA_POINTS_ON_SCREEN - 1) + 1);