Android - Dynamic Pages Index Problems

[iKettles]

When dynamically loading pages in componentDidMount, if the new array of pages has more than what was set in the constructor you cannot scroll to these pages. The following will reproduce the bug:

  constructor(props) {
    super(props)

    this.state = {
      posts: [{
        id: 'FOO'
      },
      {
        id: 'BAR'
      }]
    }
  }

  componentDidMount() {
    this.setState({
      posts: [{
        id: 'FOO'
      },
      {
        id: 'BAR'
      },
      {
        id: 'FOOBAR'
      },
      {
        id: 'BARFOO'
      }]
    })
  }

This works fine:

  constructor(props) {
    super(props)

    this.state = {
      posts: [{
        id: 'FOO'
      },
      {
        id: 'BAR'
      }]
    }
  }

  componentDidMount() {
    this.setState({
      posts: [{
        id: 'FOOBAR'
      },
      {
        id: 'BARFOO'
      }]
    })
  }

Using React Native 0.38

[andyjamesdavies]

I came across this issue also. Looks like its due to https://github.com/facebook/react-native/issues/4775

The quick fix would be to add this prop to swiper: key={this.state.posts.length}

[wolfg1969]

@andyjamesdavies Thanks, it works for iOS too.