active dot does not update on swipe when children have changed

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:

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

[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>

[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.