react-native-swiper: swiper image not showing

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

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.

@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>
  );
}

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

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

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/>}

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?

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).

Why There Is No Solution Yet???

loadMinimal
loadMinimalSize={2}

resolve for me!

I don’t know if this issue has something to do with the “resizeMode” of <Image/> 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".

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

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

+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.