React-native-swiper: swiper image not showing

[callmejm]

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'
  },
});

[arribbar]

is it only for android or also for iOS ?

[cyperus]

Same issue. Mine is only for android

[koansang]

+1, only Android

[callmejm]

@arribbar @cyperus @koansang guys, I have solution, I try using setTimeout to delay some time for swiper render. This worked for me, hope u guys also.

constructor(props) {
  super(props);

  this.state = { 
    startswiper:false,
  };
}

componentWillMount(){
  setTimeout(() => {this.setState({startswiper:true})}, 500);
}

_renderSwiper(){
  return(
    <Swiper height={300} showsButtons={false} removeClippedSubviews={false} autoplay={true} autoplayTimeout={3} autoplayDirection={true}
      dot={<Swiperdot/>} activeDot={<Swiperactivedot/>} paginationStyle={{bottom: 10}}>
      <SwiperImgItem />
      <SwiperImgItem />
      <SwiperImgItem />
    </Swiper>
  );
}

render() {
  const { navigate } = this.props.navigation;
  return(
    <View style={styles.container}>
        {
         this.state.startswiper === true ?
         this._renderSwiper()
         : null
        }
    </View>
  );
}

[wu928320442]

@JayricMok Using your solution, I can run normally on Android, IOS No.

[arribbar]

It worked for me changing width from 99% to 100%, for both iOS and Android

    constructor(props) {
      super(props);

      this.state = {
        width: '99%',
      };
    }

    componentWillMount() {
        setTimeout(() => {
            this.setState({
                width: '100%'
            });
        }, 500);
    }

    render() {
        console.log(' about to render swiper');
        const slides = this.props.dataList.map(this.renderView.bind(this));
        return (
            <Swiper
                width={this.state.width}
                dotColor={LIGHT_GREY_3}
                activeDotColor={YELLOW}
                containerStyle={this.props.style}
                style={styles.scrollStyle}
            >
                { slides }
            </Swiper>
        );
    }

[tonygentilcore]

+1, same issue here. It only repros in Android, iOS works fine for me. Sometimes the contents render, sometimes they don't. When they don't render, the inspector show that the children of Swiper are empty.

[tonygentilcore]

This is a sad, sad hack, but adding this to a parent of Swiper fixes the issue for me:

  componentDidMount() {
    this.forceUpdate()
  }

Hopefully this gives a clue as to the proper solution, I really can't find a library I'd like to use as an alternative to this.

Update: The above hack made it happen less frequently, but it was still flaky at a lower rate. So I ended up switching to https://github.com/archriss/react-native-snap-carousel (which works great).

[adamnator92]

+1, images didnt show on android device

[dylancom]

+1, same here. A lot of times the images won't shop up in Android.

[jordyvanraaij]

I'm experiencing this issue on Android as well. Sometimes the images won't show at all and sometimes it only renders the first 3 images (loadMinimalSize = 2). I these cases the pagination doesn't update properly either.. Can we give this problem some priority as a lot of people seem to have issues on Android devices?

[PerspectivesLab]

having the same here on android with all latest versions, needed the trick of @arribbar , but it shows double slides now ...

[cotra]

same too

[legend27sg]

same problem i facing now

[Tae69]

@JayricMok's solution fixed my problem
In my case, you also need to set height property for Swiper if you run on iOS

[haowangcxy]

+1, images didnt show on android device

[YanHong1997]

I added swiper in my project,sometimes it was wrong.Specifically,it didn't work.The fact is images and dots all missing.Why?

[wk1017553772]

I use blow code resolve this problem,but why?

componentDidMount(){
    //to fix react-native-swiper in android bug
        if (Platform.OS === 'android') {
            setTimeout(() => {
                this.setState({ visiableSwiper: true })
            }, 0)
        }
}

{this.state.visiableSwiper&&<Swiper/>}

[srshah19]

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.

[aesyungan]

Solution
the problem is by the height in Swiper

• 1)import Dimensions of react-native and get dimensions

import  {Dimensions} from 'react-native';
let ScreenHeight = Dimensions.get("window").height;

• 2)use dimensions

 <View style={{height: ScreenHeight}}>


          <Swiper  showsButtons={true}>
            <View style={styles.slideDefault}>
              <Text style={styles.text}>Hello Swiper</Text>
            </View>
          </Swiper>

      </View>

• style

const styles = StyleSheet.create({
  slideDefault: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  }
});

• All code

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper';
let ScreenHeight = Dimensions.get("window").height;

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      auterScrollEnable: true,
    }
  }


  render() {
    return (
      <View style={{height: ScreenHeight}}>


          <Swiper  showsButtons={true}>
            <View style={styles.slideDefault}>
              <Text style={styles.text}>Hello Swiper</Text>
            </View>
          </Swiper>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  slideDefault: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#9DD6EB'
  },
  text: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
  }
});

[rafaelgrilli92]

@aesyungan it does the trick but it's still not good enough... Once you have a component that needs to scroll, the screen height cut the view and it messes up with the scrolling.

[Johncy1997]

             <Swiper
                autoplay
                autoplayTimeout={5}
                height={240}
                showsButtons={false}
                showsPagination={true}
                loop={true}
                backgroundColor='transparent'
                activeDotColor='black'
                // dotColor='white'
            >
         {
           this.props.data.banner.map((item,i)=>{
                console.log("the image url is"+item.BannerUrl);
                <View>
              <Image style={{flex:1,width,resizeMode:'contain'}} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}/>
              </View>
            })
            }
            </Swiper>

I have to display item.BannerUrl in Image component.The url is passing required times to item.BannerUrl.But i am not getting the images.It shows only 7dots.Please anyone tell me what is the problem here?

[rizalibnu]

I get the same problem. Thanks @wk1017553772 for temporary solution.

[maulikakapure]

I tried following and worked for me, hope it helps you:

showsPagination={true}
autoplay={true}
width={width-20}
loop={true}
backgroundColor='#00FF00'
showsButtons={false}
dot={ }
activeDot={ }

I have wrapped swiper in a view tag.

[tuthanh82]

I experienced a problem on iOS with RN 0.55.3. Using with images, only 2 first items are shown, the third one is blank.

Does anyone else have the same problem?

UPDATE: it turns out that my styles is not good enough. I use the styles provided on the example "Swiper Number" and it works properly now.

[chasecs]

I don't know if this issue has something to do with the "resizeMode" of component.
In my situation. when resizeMode="stretch", like below

<Swiper style={{flex: 1}} >
          {
              wallpapers.map((imgsrc, index) => (
                <TouchableWithoutFeedback
                  key={index}
                  style={{flex: 1}}
                >
                  <Image source={imgsrc} style={styles.image} resizeMode="stretch"/>
                </TouchableWithoutFeedback>
              ))
          }
        </Swiper>

one of images will not show up, only one of them.
But, every thing woks fine if you change the props to resizeMode="cover".

[ggepenyan]

Why There Is No Solution Yet?????

[bingxuelover]

For me, in Android is fine, but in IOS only show the first image.
I checked my codes, i write height={h} like this, but i write width in style,
<Swiper height={h} style={{width:w}} >
then i write width like height ,
<Swiper height={h} width={w} >
it's ok for me in ios.

[tandat2209]

any updates for this

[hpmax00]

+1, change to react-native-snap-carousel

[gobinmateo]

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

[abdymm]

in my case, you guys only need to add a timeout to the swiper

[psglee]

My solution for this. You must set 'height' & 'width' for image. Example (render dynamic):

function

return (
  <View style={styles.container}>
    <Swiper showsButtons={true} index={photoViewIndex}>
      {list.map((item) => {
        return (
          <View style={styles.slide}>
            <Image source={{ uri: item.uri }} style={styles.img} resizeMode='center' />
          </View>
        )
      })}
    </Swiper>
  </View>
)

styles

const styles = StyleSheet.create({
container: {
flex: 1
},
slide: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
img: {
height: WINDOW_SIZE.HEIGHT - verticalScale(50), // Ex: 300, 400, ...
width: WINDOW_SIZE.WIDTH // Ex: 300, 400, ...
}
});

[nguyenvanphuc2203]

loadMinimalSize={2}

resolve for me!

[guaizi149]

574

add key={pages.length}.

[sterswift]

Tried everything above but nothing helps.

1. Added overflow: 'hidden' to swiper View parent
2. Removed "position: absolute" from swiper style
3. Added width: '100%', height: 180, resizeMode: 'cover' to swiper item

And it works!

[davebrewer]

Persevered with this a day or so, seems overly difficult to get sliders working performantly in android. I have a nested slider use case, however switching to the attached package (which has similar UI design) has been much more straight forward:
https://www.npmjs.com/package/react-native-web-swiper

Sorry "react-native-swiper".