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 not show on Android Devices but iOS Devices it's work fine

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:13

Top GitHub Comments

15reactions

alenoircommented, Dec 12, 2017

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

11reactions

18111994commented, Aug 3, 2018

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