Swiper not show on Android Devices but iOS Devices it's work fine

[metalwake]

                                     <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"

[metalwake]

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!

[xardit]

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 `

/**/

`