Content doesn't stretch when rotate (portrait mode) about react-native-swiper HOT 10 OPEN

Hopefully this helps if someone comes across this issue. I used https://github.com/yamill/react-native-orientation to add an event when orientation changes. I then get the dimensions and change the state to those dimensions re-rendering screen.

from react-native-swiper.

@esutton You don't need to modify react-native-swiper directly. The Swiper component will listen for changes to the width prop so using react-native-orientation's orientation change event, you can pass the updated Dimensions.get('window').width.

from react-native-swiper.

I'm seeing this also, the inspector shows that the calculated width is always 375 regardless of content or orientation. If I take away the Swiper element, the content expands as expected. Any ideas? Wonder if this is related to the fact that this is interpreted/rendered as an <index> element rather than Swiper or some other expected element...

from react-native-swiper.

Not quite sure what the automaticallyAdjustContentInsets property does per the docs, I tried setting this to true thinking it might affect layout but no luck.

from react-native-swiper.

the swiper take in a width and height parameter which can make it work in landscape, but it bugs out if a transition occurs.

from react-native-swiper.

Thanks @joshualcoffee

It sounds like the best solution may be to modify react-native-swiper to include react-native-orientation.

https://github.com/yamill/react-native-orientation

from react-native-swiper.

@joshualcoffee Could you please explain how did you do that?

from react-native-swiper.

@cosivox Sure thing!

This has not been tested but you should be able to get the idea from the example. This would be the internal slide component that you would include for each item in your slider.

In my code I found setting the view to be absolute and setting left, right, top, and bottom to 0 achieved the result I wanted.

import React, {Component} from 'react'
import Orientation from 'react-native-orientation'
const {
  View,
  Dimensions
} from 'react-native'
let window = Dimensions.get('window')
class Foo extend Component {
  constructor(_){
    super(_)
    this._orientationDidChange = this._orientationDidChange.bind(this)
    this.state = {
      width: window.width,
      height: window.height
    }
  }

  _orientationDidChange(orientation) {
    let window = Dimensions.get('window')
    this.setState({
      width: window.width,
      height: window.height
    })
  }

  componentDidMount() {
    Orientation.addOrientationListener(this._orientationDidChange);
  }

  render(){
    <View style={{width: this.state.width, height: this.state.height, position: 'absolute', left: 0, top:0, right: 0, bottom: 0}}>
  }
}

from react-native-swiper.

Setting width prop to Dimensions.get('window').width solved problem for me

from react-native-swiper.

@khrykin Does it working for you with vertical and horizontal mode?
Could you send your code?

from react-native-swiper.