React-native-swiper: Swiper not show on Android Devices but iOS Devices it's work fine

[WeeradethSpj]

                                     <Swiper
                                         height={190}
                                         showsButtons={true}
                                         removeClippedSubviews={false}>
                                         <Text> test text</Text>
                                         <Text>test text</Text>
                                         <Text>test text</Text>
                                         <Text>test text</Text>
                                     </Swiper>

I can't use it for android but iOS it's work

And this solution from Collaborator it's " not work "

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

```

[wuhuaxiangjob]

I had the same problem。At first, it's visible,When I reload it, it disappears

[luckyzwei]

I had the same problem. I used in FlatList's header. IOS work. but nothing in android

[alenoir]

For me the bug appear when i use Swiper inside Modal component.

[yangliyang5544]

Me too.There was no work on the new project.

[yangliyang5544]

"react": "16.0.0",
"react-native": "0.51.0",
"react-native-swiper": "^1.5.13"

[WeeradethSpj]

Hey dude I found the solution it's work fine for me

https://github.com/react-community/react-navigation/issues/1572#issuecomment-303554029

It's not solution for use with react-navigation only.

but it's useful every time when I call swiper.

[gracepham]

@WeeradethSpj Thank you!

[a3diti]

Fixed it. Check my comment here https://github.com/leecade/react-native-swiper/issues/716#issuecomment-370617689 , works for modal too

[SamiChab]

@a3diti thank you so much!!!

[18111994]

I got success to solve the swiper issue for android..
Simple provide a static with(not in percentage) to the swiper style
I hope it works for you!

const window = Dimensions.get('window');

<Swiper style={styles.wrapper} showsButtons={true} autoplayTimeout={3} autoplay={true} pagingEnabled={true} removeClippedSubviews={false}>

                  <View style={styles.addressBlock}>
                      {/* <Image source={require('../assets/slider2/s1.png')} style={styles.blockImage2}>
                      </Image> */}
                        <Text style={styles.Heading}>
                          Welcome to DatamanWebPOS!
                        </Text>
                        <Text style={styles.instructions}>
                          Handle orders quickly with WebPOS
                        </Text>
                  </View>
                  <View style={styles.addressBlock}>
                      <Text style={styles.Heading}>
                          Create Orders!
                        </Text>
                        <Text style={styles.instructions}>
                          You can create orders very easly
                        </Text>
                      {/* <Image source={require('../assets/slider2/s2.png')} style={styles.blockImage2}>
                      </Image> */}
                  </View>
                  <View style={styles.addressBlock}>
                      <Text style={styles.Heading}>
                          Share With Co-workers!
                        </Text>
                        <Text style={styles.instructions}>
                          You Can Invide to Co-Workers to join this app
                        </Text>
                      {/* <Image source={require('../assets/slider2/s3.png')} style={styles.blockImage2}>
                      </Image> */}
                  </View>
                  <View style={styles.addressBlock}>
                        <Text style={styles.Heading}>
                          Print!
                        </Text>
                        <Text style={styles.instructions}>
                          You Can Print Your reports easly
                        </Text>
                      {/* <Image source={require('../assets/slider2/s3.png')} style={styles.blockImage2}>
                      </Image> */}
                  </View>
                  <View style={styles.addressBlock}>
                  <Text style={styles.Heading}>
                          Gets Started!
                        </Text>
                        <Text style={styles.instructions}>
                          Tab on SignUp button to continue..
                        </Text>
                      {/* <Image source={require('../assets/slider2/s3.png')} style={styles.blockImage2}>
                      </Image> */}
                  </View>

            </Swiper>
``
wrapper:{
  // marginTop:10,
   height:"100%",
   width:window.width,
  // backgroundColor:'blue'
}

[brunokiafuka]

const window = Dimensions.get('window');

<------->

 <Swiper ref='mySwiper' onIndexChanged={this.onSwipe}
            loop={false}
            showsPagination={false}
            scrollEnabled={false}
            height={window.height}
            width={window.width}
            containerStyle={{ alignSelf: 'stretch' }}
          >

Setting width and height for the swiper fixes the issues on Android. 🚀

[adhithiravi]

Setting the height and width of the swiper explicitly as a style, fixes the issue on android

[tobilastik]

If this still helps, import Dimensions from React Native and set

const window = Dimensions.get ('window');

and use it in your stylesheet
<Swiper style={{width:window.width}}> /**/ </Swiper>