leecade / leecade/react-native-swiper

Not getting correct index

Open
#1,249 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

Which OS ?

Both iOS and Android

Version

Which versions are you using:

  • react-native-swiper v?
    1.6.0
  • react-native v0.?.?
    0.63.3
Expected behaviour

Neither onMomentumScrollEnd nor onIndexChanged would give the correct index. Resulting in unpredictable behavior

Actual behaviour

Random results and unusable indexes. After swiping 4-6 times I will usually be delivered the value -1.
Created the following function to get the correct index:

calculateIndex(nativeEvent) {
        if (!nativeEvent) {
            return 0
        }
        if (!nativeEvent.layoutMeasurement) {
            return 0
        }
        if (!nativeEvent.contentOffset) {
            return 0
        }
        const screenWidth = nativeEvent.layoutMeasurement.width
        const xOffset = nativeEvent.contentOffset.x
        const index = xOffset / screenWidth

        return index
    }

How to reproduce it>
<Swiper
                        horizontal={true}
                        width={c.WIN_WIDTH}
                        height={c.WIN_HEIGHT}
                        index={this.state.currentIndex}
                        scrollEnabled={true}
                        loadMinimal={false}
                        showsPagination={false}
                        pagingEnabled
                        automaticallyAdjustContentInsets
                        onMomentumScrollEnd={this.onMomentumScrollEnd}
                        bounces={true}
                        loop={false}
                        autoplay={false}
                        showsButtons={false}
                        removeClippedSubviews={false}>
                        <View style={styles.slide1}>
                            <Text style={styles.text}>Hello Swiper</Text>
                       </View>
                     <View style={styles.slide2}>
                          <Text style={styles.text}>Beautiful</Text>
                    </View>
                   <View style={styles.slide3}>
                         <Text style={styles.text}>And simple</Text>
                  </View>
  </Swiper>
Steps to reproduce

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Swiper callbacks onMomentumScrollEnd and onIndexChanged, using the supplied three-slide reproduction and the reported React Native 0.63.3 and react-native-swiper 1.6.0 versions. Reproduce the incorrect and -1 indexes on both iOS and Android, then verify that the callbacks consistently report the active slide index.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.