question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

swiper image not showing

See original GitHub issue

Swiper image not showing, only can see the dot changing the position. Saw this https://github.com/leecade/react-native-swiper/issues/416 but i added removeClippedSubviews={false} also have same issue. Every time i have to delete <swiper/> and save and reload and paste back it only show up. I try to export as apk also have same issue. Any idea to fix this ?

  <View style={styles.container}>
    <ScrollView>
      <Swiper height={Dimensions.get('window').width / 1.3} showsButtons={false} removeClippedSubviews={false} autoplay={true} autoplayTimeout={3} autoplayDirection={true}
        dot={<Swiperdot/>} activeDot={<Swiperactivedot/>} paginationStyle={{bottom: 10}}>
        <SwiperImgItem pathuri={this.state.path1}/>
        <SwiperImgItem pathuri={this.state.path2}/>
        <SwiperImgItem pathuri={this.state.path3}/>
      </Swiper>
    </ScrollView>
  </View>


const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor:'#000000'
  },
});

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:3
  • Comments:38

github_iconTop GitHub Comments

32reactions
gobinmateocommented, Sep 18, 2018

try setting removeClippedSubviews prop to false. <Swiper removeClippedSubviews={false}>

11reactions
srshah19commented, Feb 3, 2018

Guys, sometimes when the parent View has a flex-direction or align-items then it does not render correctly. Try to remove those flex properties from the parent and see if it renders correctly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

REACT SWIPER DOESN'T SHOW IMAGES - Stack Overflow
The main problem is the way you provide the src prop of your images: <image classname="swiper-image" src={images[0]}.
Read more >
How to Build a Responsive Image Slider With Swiper.js
Download unlimited photos, fonts & templates with Envato Elements: ...
Read more >
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
Read more >
Swiper for Angular is not displaying on page? - Reddit
Hi Erin, the biggest thing you're missing is the Swiper js styles which you will have to import to the style.css file. add...
Read more >
How to Build a Responsive Slider With Swiper.js - Web Design
By using, not only integers but also decimals, we'll be able to show just a portion of a slide. Even though it isn't...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found