Dynamically add children at the beginning

I’m trying to implement a Calendar (such as Google Calendar) and I’m having trouble with the swipe left feature.

Since I don’t want to load all the existing previous months since 1900, I simply want to add/load them dynamically. Let’s say I start with three months and set my initial index to be in the middle. The swiper will look like this: [ ] [ x ] [ ]

When I swipe to right, I need to add a month to my content, so I simply push a new month and the index moves by one, resulting in: [ ] [ ] [ x ] [ ]

The problem is when I swipe left. The index of the swiper will naturally move by one to the left, but I also need to add one new month at the beginning. If I use the event onMomentumScrollEnd to handle my logic, the index has already changed when I’m adding a new month at the beginning, which result in a bug. The index does not seem to be synced with its children.

I’m a bit loss on how I could implement this.

[superandrew213]

@ALWAL12 not sure if you still need this but I sort of came up with the a solution that is working quite well for me.

I use a swiper component with 3 screens, set initial screen to index 1 (middle screen).

          <Swiper
            loadMinimalSize={0}
            index={1}
            loadMinimal
            onScrollBeginDrag={(e, { index }, context) => this.setState({ swiperOldIndex: index })}
            onMomentumScrollEnd={(e, { index }, context) => this.setState({ swiperCurrentIndex: index })}
          >

            {this._renderScreenComponent()}

            {this._renderScreenComponent()}

            {this._renderScreenComponent()}

          </Swiper>

How it works is that when the user swipes you update the ScreenComponent with the new data. Essential you only have one ScreenComponent, the other two are used as placeholders so that the user can swipe and also to determine the swipe direction which you can then use to load the data for the ScreenComponent. To determine the direction I use this:

_getSwipeDirection(oldIndex, newIndex) {
    if (oldIndex === 0 && newIndex === 2) {
      return -1;
    } else if (oldIndex === 2 && newIndex === 0) {
      return 1;
    } else if (newIndex > oldIndex) {
      return 1;
    } else if (newIndex < oldIndex) {
      return -1;
    }
    return 0;
  }

Everytime you swipe, a loader appears before the component loads (if you turn this off then the previous screen component will show during the scroll until the scroll is completed then the direction can be determined and the ScreenComponent can be updated). The loader could be a deal breaker for some but for me it works quite well since I need to fetch data anyway.

[npaulConnvertex]

_getSwipeDirection(oldIndex, newIndex) {
    if (oldIndex === 0 && newIndex === 2) {
      return -1;
    } else if (oldIndex === 2 && newIndex === 0) {
      return 1;
    } else if (newIndex > oldIndex) {
      return 1;
    } else if (newIndex < oldIndex) {
      return -1;
    }
    return 0;
  }

When does the _“getSwipeDirection” get called in the component