leecade / leecade/react-native-swiper

Until the first swipe the first slide doesn't show up

Open
#416 20 comments 12 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

I have build a simple swiper in android where 5 slides are supposed to be shown. On load I can see 5 dots below with the first dot being active but the content is not shown for the same.

Here is my code:

<ScrollView>
        <Swiper
          height={deviceHeight - 200}
          paginationStyle={{ bottom: 20 }}
          activeDot={<View style={mainStyles.sliderBullets} />}
          loop={false}
        >
          <SliderContent
             // some content
          />
          <SliderContent
             // some content
          />
          <SliderContent
            // some content
          />
          <SliderContent
            // some content
          />
          <SliderContent
            // some content
          />
        </Swiper>
      </ScrollView>

If I swipe to second slide and come back to first one it shows the first slide.

Can anyone tell that why is the first slide empty until first swipe?

Additional Info:

RN: 0.42.3
Android: 7.1.2 Nexus 5X
React native swiper: 1.5.4

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 by reproducing the empty-first-slide behavior with the provided Swiper and SliderContent snippet on the reported React Native 0.42.3, Android 7.1.2, and react-native-swiper 1.5.4 versions. Trace the initial rendering and first swipe behavior, then verify that the first slide content is visible immediately on load without swiping.

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.