React-native-swiper: The dot doesn't move when I swipe, and when I set the loop to true, it doesn't loop.

[ytt123]

Who can give me some advice

[ytt123]

key={this.state.list.length}

[adimshev]

+1

[FinnGu]

Same issue here. I use v1.5.13 and the issue occurs on both iOS and Android real devices. I have not changed the code and I know for sure that it worked a couple versions ago.

[massisc]

I have the same issue here, the dot doesn't change and the onIndexChange is never called also.

[massisc]

Apparently that behavior only occur when then Swiper childrens are dynamic generated.

[FinnGu]

For some reason the dots started moving again, after I set a custom color for them. Maybe this can help someone else, too.

[massisc]

Thx @FinnGu for the support, but that doesn't worked for me.

[FinnGu]

That's a shame. Would it help you, if I share my code? I use the swiper to display an unknown number of images that are stored online.

[massisc]

Yes, please.

[FinnGu]

I load list items and image urls in a component higher up the hierarchy. When they are loaded, I pass them to MyComponent.js and show the images as list header. Once I added the activeDotColor prop to the Swiper component, they started moving again.
Btw, I use react-native v0.57.8 and react-native-swiper v1.5.13.

MyComponent.js

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

export default class MyComponent extends Component {
  renderHeader = () => {
    return (
      <Swiper
        style={styles.headerSwiper}
        loop={false}
        showsButtons={false}
        bounces={true}
        activeDotColor={'#efefef'}
      >
        {this.props.headerImages.map((imgPath) => 
          <Image style={styles.headerImg} key={imgPath} source={{ uri: imgPath }} />
        )}
      </Swiper>
    )
  }

  render() {
    return (
      <FlatList
        style={styles.list}
        data={this.props.listItems}
        keyExtractor={(item, _index) => `list-item-${item.id}`}
        ListHeaderComponent={this.renderHeader}
        renderItem={({ item }) =>
          <View style={styles.cardView}>
            <Text>{item.title}</Text>
          </View>
        }
      />
    );
  }
}

const styles = StyleSheet.create({
  list: {
  },
  headerImg: {
    height: 250,
    borderRadius: 4,
  },
  headerSwiper: {
    height: 250,
    marginBottom: 8,
  },
  cardView: {
  },
});

[zhllucky]

@FinnGu I have the same question, did you resolve it

[massisc]

@zhllucky did you use a dynamic state to create the Swiper childrens? This seems to be the issue with my code. Like @FinnGu said I just load mine list of item in a component higher up the hierarchy, and then it started to work again.

But anyway this is a problem that should be fixed.