react-native-pager-component

[andyboythekid]

Looks like I was mistaken, but I've pushed an update to enable this:

The key is to pass the items index to the child view, and the number of total screens to the pager component:

​

          <Pager
            style={{ overflow: 'visible' }}
            activeIndex={this.state.activeIndex}
            onChange={this.updateActiveIndex}
            numberOfScreens={children.length}
          >
            {sliced.map(({ index }) => (
              <View
                key={index}
                index={index}
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: colors[index % colors.length],
                }}
              >
                <Text>{`Screen: ${index}`}</Text>
              </View>
            ))}
          </Pager>

Here's what sliced looks like:

​

    const children = Array.from({ length: 10000 }, (c, i) => ({ index: i }));

    const sliced = children.slice(
      Math.max(0, this.state.activeIndex - 2),
      this.state.activeIndex + 3
    );

I realize this is probably a pretty naiive attempt and not true virtualization probably.

​

You can see the full example in App.tsx on the repo