Dynamic Swiper Index Prop Fails on Android

Currently trying to render an initial swiper page using the following code:

render() {
    const deviceWidth = Dimensions.get('window').width
    const deviceHeight = Dimensions.get('window').height

    return (
      <Swiper showsButtons loop = { false } index = { this.state.key }>
        { this.state.items.map((item) => {
          return (
            <View key = { item.id }>
              <Image
                style = {{ width: deviceWidth, height: deviceHeight }}
                resizeMode = 'contain'
                source = {{ uri: item.photo.image_url }}
              />
            </View>
          )
        })}
      </Swiper>
    )
  }

Where this.state.key is the index of a photo when pressed on a grid (going from grid -> full screen, hence why I want this image to be rendered first).

The following code works as it should on iOS, but I’m not having any luck on Android. If someone wants to point me in the right direction, I can look into submitting a PR.

[evancloutier]

@pgonzalez-santiago try adding a componentDidMount() method to your component. I had myrender(), componentDidMount() and constructor set up like this:

constructor(props) {
    super(props)

    // Initializing the state attributes to be the appropriate data types
    this.state = {
      page: '',
      key: '',
      items: [],
    }
  }

  componentWillMount() {
    const items = this._transformPhotoArray(this.props.navigation.state.params.array)

    // Note that I'm updating the state here
    this.setState({
      page: this.props.navigation.state.params.page,
      key: this.props.navigation.state.params.key,
      items: items
    })
  }

  render() {
    const navigationParams = this.props.navigation.state.params

    return (
      <View style = { styles.container }>
        <View style = { styles.swiperContainer }>
          <Swiper
            loop = { false }
            height = { height }
            index = { this.state.page == 1 ? this.state.key : (this.state.key) + ((this.state.page - 1) * 20) }
            onMomentumScrollEnd = { this._onMomentumScrollEnd.bind(this) }
            renderPagination = { this._renderPagination.bind(this) }
            renderNewItems = { this._renderNewItems.bind(this) }
            fetchNextPage = { this._fetchNextPage.bind(this) }>
            { this.state.items.map((item, key) => {
              return (
                <View key = { key } style = { styles.imageContainer }>
                  <Image resizeMode = 'contain' style = { styles.image } source = {{ uri: item.photo.image_url }}/>
                </View>
              )
            })}
          </Swiper>
        </View>
        <PhotoFooter
          avatar = { navigationParams.avatar }
          photographer = { navigationParams.photographer }
          created = { navigationParams.created }
          views = { navigationParams.views }
          votes = { navigationParams.votes }
          >
        </PhotoFooter>
      </View>

    )
  }

I believe the issue is that the index prop of the Swiper isn’t being updated fast enough when it comes to the Android platform, and is defaulting to a value of zero.

Note that I have a bit more going on here in my render() than you probably need - I was adding a custom footer component to the bottom of the swiper.

Hope this helps.

[cj4luv]

I try to solve this problem…