React-native-swiper: active dot does not update on swipe when children have changed

[macrozone]

Which OS ?

IOS and android

Version

Which versions are you using:

• react-native-swiper 1.5.14?
• react-native v0.57.8

Expected behaviour

the active dot changes when i swipe

Actual behaviour

the first dot is always highlighted

How to reproduce it>

 <Swiper>
          {items.map(item => (
            <View key={item._id}><Text>{item.label}</Text></View>
          ))}
</Swiper>

Steps to reproduce

1. make sure that items is empty first []
2. on a later render. fill items with some objects
3. active dot is now broken

Workaround:

```
{items.map(item => (
{item.label}
))}

````

[retyui]

This repo dead: https://github.com/leecade/react-native-swiper/issues/713
Your issue is like other 480+ issues, will not be resolved in the short term.

[macrozone]

@retyui not very constructive to add this link to every issue. If you want to help, do a fork or write the maintainer a personal email and ask to put you as maintainer here.

[retyui]

I wrote authors in the mail, two months ago and a week ago, I did not receive an answer, an absolute ignore

[legion-zver]

@macrozone use patch-package and my patch file:

diff --git a/node_modules/react-native-swiper/src/index.js b/node_modules/react-native-swiper/src/index.js
index d9deeb4..d22bcf8 100644
--- a/node_modules/react-native-swiper/src/index.js
+++ b/node_modules/react-native-swiper/src/index.js
@@ -396,8 +396,9 @@ export default class extends Component {
     let index = state.index
     if (!this.internals.offset)   // Android not setting this onLayout first? https://github.com/leecade/react-native-swiper/issues/582
       this.internals.offset = {}
-    const diff = offset[dir] - this.internals.offset[dir]
-    const step = dir === 'x' ? state.width : state.height
+
+    const diff = (offset[dir] || 0) - (this.internals.offset[dir] || 0)
+    const step = (dir === 'x' ? state.width : state.height) || 0
     let loopJump = false

     // Do nothing if offset no change.

[fabriziobertoglio1987]

@macrozone

@retyui is right.. why use this repo when you can just build the functionality with Scroll View and a couple of lines of code

What is the point of using a library with 500 open issues

[dannam83]

a year later it's still not resolved. but this will make it work: set the key to the length of your items.

<Swiper key={items.length} style={styles.swiper}> {items} </Swiper>

[rt012]

Alternative horizontal Swiper Component:

import React, {useRef, useState} from 'react';
import {
Image,
View,
Dimensions,
StyleSheet,
TouchableOpacity,
useWindowDimensions,
ScrollView, Text,
} from 'react-native';
import Ionicons from 'react-native-vector-icons/SimpleLineIcons';

const Swiper = ({items,showDots= true,labelProperty = "name", showArrows = true, children, marginVertical = 0, labelColor ="white"}) => {
const scrollViewRef = useRef();
const [currentIndex, setCurrentIndex] = useState(0);
const [elementWidth, setElementWidth] = useState(0);
const [windowWidth, setWindowWidth] = useState(
Dimensions.get('window').width)

const updateElementWidth = value => {
if (value != elementWidth) {
setElementWidth(value);
}
};

const updateCurrentIndex = index => {
setCurrentIndex(index);
scrollViewRef.current.scrollTo({x: index * elementWidth});
};

return (

style={{
flex: 1,
}}>
horizontal={true}
scrollEventThrottle={32}
bounces={false}
ref={scrollViewRef}
directionalLockEnabled={true}
pagingEnabled
onMomentumScrollEnd={event => {
if (
event.nativeEvent.contentOffset.x &&
event.nativeEvent.contentOffset.x / elementWidth != currentIndex
) {
setCurrentIndex(event.nativeEvent.contentOffset.x / elementWidth);
} else if (event.nativeEvent.contentOffset.x / elementWidth == 0) {
setCurrentIndex(0);
}
}}
height={'100%'}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
removeClippedSubviews={false}
width={windowWidth - marginVertical}
scrollEnabled={true}
loop={false}
index={currentIndex}
activeDotStyle={{backgroundColor: 'white', height: 10, width: 10}}
paginationStyle={{
bottom: -40,
}}
dotStyle
style={styles.wrapper}
showsButtons={false}>
{children.length > 0 &&
children.map(child => {
return (
onLayout={e => {
updateElementWidth(e.nativeEvent.layout.width);
}}
style={{
overflow: 'visible',
width: Dimensions.get('screen').width - marginVertical,
}}>
{child}

);
})}


{showArrows && items && items.length > 1 && (
style={{marginTop: 10, flexDirection: 'row', alignItems: 'center'}}>
{currentIndex > 0 ? (
onPress={() => {
updateCurrentIndex(currentIndex - 1);
}}
style={{
flex: 1,
padding: 4,
flexDirection: 'row',
alignItems: 'center',
}}>

{items[currentIndex][labelProperty]}


) : (

)}
{showDots ?
style={{
flexDirection: 'row',
flex: 1,
textAlign: 'center',
justifyContent: 'center',
}}>
{items &&
items.map((location, index) => {
return (
style={{
borderRadius: 5,
margin: 2,
height: 10,
width: 10,
backgroundColor:
index == currentIndex
? labelColor
: "#ffffff33"
}}
/>
);
})}

: }
{showArrows && items && typeof items[currentIndex + 1] != 'undefined' ? (
onPress={() => {
updateCurrentIndex(currentIndex + 1);
}}
style={{
flex: 1,
padding: 4,
flexDirection: 'row',
alignItems: 'center',
}}>
{items[currentIndex + 1][labelProperty]}



) : (

)}

)}

);
};

const styles = StyleSheet.create({
wrapper: {
flexDirection: 'row',
overflow: 'visible'
},
});

export default Swiper;