react-native-swiper: Until the first swipe the first slide doesn't show up

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

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 12
  • Comments: 20 (3 by maintainers)

Most upvoted comments

Disabling removeClippedSubviews from the Swiper component fixed this issue for me.

              <Swiper
                height={190}
                showsButtons={true}
                removeClippedSubviews={false}>

@douglaswissett this facing this issue, I added removeClippedSubviews={false} to Swiper image also not showing

@douglaswissett cool! this issue bothered me for a long time. now it works!