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.


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){
    }, 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) {


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

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

                contentOffset={{x: this.initialScrollOffset}}
                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 }
              startDate={this.state.filter.startDate}//the graph is rendered starting from this date

Source: React natvie