leecade / leecade/react-native-swiper

swiper have an issue while display first time

Open
#1,310 2 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

In my code I did swiper with the "react-native-swiper" directory. There is a problem that when the swiper screen is displayed then the last page jumps to the first page and stop there. (for example if I have 4 points in the swiper view then the leftmost point jumps to the rightmost) I would love direction in solving my problem.

<Swiper
            scrollsToTop={true}
            showsVerticalScrollIndicator={true}
            bounces={true}
            dotStyle={styles.NonActiveDot}
            activeDotStyle={styles.activeDot}
          >
            {Object.keys(groupFacilities).map((key) => (
              <SafeAreaView key={key} style={styles.safeArea}>
                <View key={key}>
                  <View style={styles.secondaryTitleView}>
                    <Text style={styles.secondaryTitleText}>{`${selectedEpicenter[0]?.EpicenterName} - ${key}`}</Text>
                  </View>
                  <FlatList
                    data={groupFacilities[key]}
                    renderItem={renderItem}
                    keyExtractor={item => item.ID}
                  />
                </View>
              </SafeAreaView>
            ))}
          </Swiper>

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 at the Swiper component entry point and reproduce the initial display with children generated by the Object.keys(groupFacilities).map call. Inspect the first-render and page-transition behavior; done means the initial screen remains on the intended page without jumping to the opposite end.

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
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.