react-native-swiper: Doesn't fit inside container unless width/height are hard-coded

I’d like the Swiper to take up the full size of its parent View element. Approaches:

If I don’t specify width and height attributes, the Swiper element extends outside the parent container to full-screen (gets size from device properties?).
Styling the container doesn’t appear to have any effect.
If I hard-code width and height attributes it will sit inside the container, but I don’t want to hard-code these numbers.

If the container is indeed flex:1, I’d expect it to expand to the parent container size rather than the full screen dimensions. Is there a way to achieve this?

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

Okay, so this is horrendously ugly on multiple fronts, but depending on how many times you need to do this… This does work for me… I’m basically just measuring the parent container after it renders (plus a timeout), then just hard-coding it anyway. It’s really not great. Forgive the ES6/7 notation, but it should be reasonably straightforward. Let me know if not. Or if you have a better solution.

export default class ItemSwiper extends React.Component {

  constructor(props) {
    super(props)
    this.state = { width: null, height: null }
  }

  componentDidMount() {
    setTimeout(this.measureSwiper)
  }

  storeSwiperLayout = (ox, oy, width, height, px, py) => this.setState({ width: width, height: height })

  measureSwiper = () => this.refs.sillyWrapper.measure(this.storeSwiperLayout);

  renderSwiper = () => {
    if( this.state.width > 0 ) { 
      return (
        <Swiper style={styles.swiper} width={this.state.width} height={this.state.height}>
          { this.props.items.map(i => this.renderItem(i)) }
        </Swiper>
      )   
    }   
  }

  render() {
    return (
      <View style={styles.sillyWrapper} ref="sillyWrapper">
        { this.renderSwiper() }
      </View>
    )   
  }
}

rreusser on Sep 22, 2015