React-Native Horizontal scroll jumps when scrolling

So I am working on this react-native app, in this part I am working on a graph that look much like a calendar really you can scroll horizontally to see different days; you start by today on the very far right and you can scroll left to see previous days.

My issue is that as the user scroll to go left, the graph fetch more data and extend the size of the graph. and when it happens the day I am looking at get pushed and find my self looking to a different day as the graph size change.

I tried to have it scroll all the way to the top at every fetch, but that’s not convenient at all.

I tried to make up some calculation and jump to the place where I am supposed to be looking, but that’s not a good user experience to jump every time it fetch and the graph size change. I want to have a more user friendly experience.

Please let me know if my explanation is bad so maybe I can try to explain it better.

Thanks,

and that’s how my code looks like



state = {
    filter: { startDate : new Date(new Date().setDate(new Date().getDate() - 2))}, 
    graphData: this.props.graphData
  };
var days;

  get initialScrollOffset(){
    const {startDate, endDate} = this.props
    const colCount = hourIntervals(this.state.filter.startDate, endDate).length
    const graphWidth = colCount * cellWidth
    const screenWidth = Dimensions.get('window').width
    //the 100 is to make up for padding and the left icons
    return screenWidth - graphWidth  + 100
  }

  componentDidMount() {
    setTimeout(() => {
      if(this.scrollView != null){
        this.scrollView.scrollToEnd()
      }
    }, 0.00001);
  }
  /**
   * Scroll all the way to the right of the ScrollView
   * This needs to be triggered at mount and again if the ScrollView changes size,
   * because its contents don't load all at once (if it's big).
   * This means there's some flicker and performance hit,
   * so we're only doing this on Android where contentOffset isn't supported
   * @returns {undefined}
   */

 androidAutoScroll = () => {
    if (Platform.OS === 'android' && this.scrollView) {
     this.scrollView.scrollToEnd()
    }
  }

  LastDaySummary

  render() {
    const {userData: userData} = this.props.graphData
    return (
      <View style={activityStyles.containerNoHorizontalPadding}>

        <Text style={activityStyles.h1}>Activity</Text>
        <View style={activityStyles.graphContainer}>
          <GraphRowIcons
            userData={userData}
          />

          <ScrollView
                horizontal
                contentOffset={{x: this.initialScrollOffset}}
                onContentSizeChange={this.androidAutoScroll}
                onMomentumScrollBegin = {(event) => {

               days += 10
               this.setState({filter: {startDate : new Date(new Date().setDate(new Date().getDate() - days))}}, ()=>{ //now fetching more days
               this.props.fetchGraphEvents(this.props.currentUser,  this.state.startDate)
               })

                  }
                }
              }
                ref={(scrollView) => { this.scrollView = scrollView }
                }
          >
            <GraphContentArea
              userData={userData}
              startDate={this.state.filter.startDate}//the graph is rendered starting from this date
              endDate={this.props.endDate}
            />
          </ScrollView>
        </View>
      </View>
    )
  }
}

Source: React natvie