Fix landscape orientation auto resize!

Author: ahmed3mar

src/index.js

@@ -102,6 +102,7 @@ export default class extends Component {
   static propTypes = {
     horizontal: PropTypes.bool,
     children: PropTypes.node.isRequired,
+    containerStyle: ViewPropTypes.style,
     style: ViewPropTypes.style,
     pagingEnabled: PropTypes.bool,
     showsHorizontalScrollIndicator: PropTypes.bool,
@@ -156,7 +157,7 @@ export default class extends Component {
    * Init states
    * @return {object} states
    */
-  state = this.initState(this.props, true)
+  state = this.initState(this.props)
 
   /**
    * autoplay timer
@@ -166,10 +167,8 @@ export default class extends Component {
   loopJumpTimer = null
 
   componentWillReceiveProps (nextProps) {
-    const sizeChanged = (nextProps.width || width) !== this.state.width ||
-                        (nextProps.height || height) !== this.state.height
     if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer)
-    this.setState(this.initState(nextProps, sizeChanged))
+    this.setState(this.initState(nextProps))
   }
 
   componentDidMount () {
@@ -181,7 +180,7 @@ export default class extends Component {
     this.loopJumpTimer && clearTimeout(this.loopJumpTimer)
   }
 
-  initState (props, setOffsetInState) {
+  initState (props) {
     // set the current state
     const state = this.state || {}
 
@@ -200,8 +199,6 @@ export default class extends Component {
       // retain the index
       initState.index = state.index
     } else {
-      // reset the index
-      setOffsetInState = true // if the index is reset, go ahead and update the offset in state
       initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0
     }
 
@@ -211,22 +208,6 @@ export default class extends Component {
     initState.height = props.height || height
     newInternals.offset = {}
 
-    if (initState.total > 1) {
-      let setup = initState.index
-      if (props.loop) {
-        setup++
-      }
-      newInternals.offset[initState.dir] = initState.dir === 'y'
-        ? initState.height * setup
-        : initState.width * setup
-    }
-
-    // only update the offset in state if needed, updating offset while swiping
-    // causes some bad jumping / stuttering
-    if (setOffsetInState) {
-      initState.offset = newInternals.offset
-    }
-
     this.internals = newInternals
     return initState
   }
@@ -236,6 +217,29 @@ export default class extends Component {
     return Object.assign({}, this.state, this.internals)
   }
 
+  onLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout
+    const offset = this.internals.offset = {}
+    const state = { width, height }
+
+    if (this.state.total > 1) {
+      let setup = this.state.index
+      if (this.props.loop) {
+        setup++
+      }
+      offset[this.state.dir] = this.state.dir === 'y'
+        ? height * setup
+        : width * setup
+    }
+
+    // only update the offset in state if needed, updating offset while swiping
+    // causes some bad jumping / stuttering
+    if (width !== this.state.width || height !== this.state.height) {
+      state.offset = offset
+    }
+    this.setState(state)
+  }
+
   loopJump = () => {
     if (!this.state.loopJump) return
     const i = this.state.index + (this.props.loop ? 1 : 0)
@@ -627,10 +631,7 @@ export default class extends Component {
     }
 
     return (
-      <View style={[styles.container, {
-        width: state.width,
-        height: state.height
-      }]}>
+      <View style={[styles.container, this.props.containerStyle]} onLayout={this.onLayout}>
         {this.renderScrollView(pages)}
         {props.showsPagination && (props.renderPagination
           ? this.props.renderPagination(state.index, state.total, this)