Issue with index for loading initial slide when using map function

[ivanovzlatan]

// When I use index={2} here, the slider shows as Active-dot the third slide, but renders content from the first slide.

  renderContent() {
      return (
       <Swiper loop={false} index={2}>
          {this.renderAlbums()}
        </Swiper>
      );
    }

Image:

If I use the same index={2}, without MAP, but with hard-code - It renders as Active-dot the third one, and renders the content from the third slide. Which is correct. When using this:

   renderContent() {
     <Swiper loop={false} index={2}>
        <View><Text>Page 1</Text></View>
        <View><Text>Page 2</Text></View>
        <View><Text>Page 3</Text></View>
      </Swiper>
      );
    }

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Swiper from 'react-native-swiper';

class AlbumList extends Component {
  state = { albums: ['Page 1', 'Page 2', 'Page 3', 'Page 4'] };

  renderAlbums() {
    return this.state.albums.map(album =>
      <View><Text>{album}</Text></View>
    );
  }

// When I use index={2} here, the slider shows as Active-dot the third slide, but renders content from the first slide.
  renderContent() {
      return (
       <Swiper loop={false} index={2}>
          {this.renderAlbums()}
        </Swiper>
      );
    }

/* If I use the same index={2}, without MAP, but with hard-code - It renders as Active-dot the third one, and renders the content from the third slide. Which is correct. When using this:
   renderContent() {
     <Swiper loop={false} index={2}>
        <View><Text>Page 1</Text></View>
        <View><Text>Page 2</Text></View>
        <View><Text>Page 3</Text></View>
      </Swiper>
      );
    }
    
  
*/
  render() {
    return (
        <View>
          {this.renderContent()}
        </View>
    );
  }
}

export default AlbumList;

[YvanGuidoin]

same problem for me: <Swiper index={this.state.swiperPosition} loop={false} showsPagination={false} loadMinimal> {this.state.imagePosts.map((i, k, arr) => this._renderImage(i, k, arr))} </Swiper>

[stefensuhat]

+1 using map statement

[stokesbga]

+1. cant imagine what the hell causes this.

[AtticusFetch]

Same for me

[AtticusFetch]

After a bit of investigation I discovered that, for ScrollView, which is rendered for iOS, contentOfsset is undefined.

onLayout = (event) => {

    ...
   // At this point, this.state.width and this.state.height equal values from Dimensions.get('window')
    if (width !== this.state.width || height !== this.state.height) {
      state.offset = offset   <---- This never happens
    }
    this.setState(state) 
}

So, for my case, when swipers width equals to Dimensions.get('window').width, a quick hack to fix is would be to simply set width={myWidth - 1} as swiper prop, which will allow to set offset inside onLayout. But a better way would be to check whether this.state.offset is defined

[AbdullahJaspal]

i am having the same issue anyone solved it...?