From 1aef6ec989b46dbe3bde86cb1f3d419ebe07716a Mon Sep 17 00:00:00 2001
From: Stefano Acerbetti <acerbetti@gmail.com>
Date: Tue, 24 Jan 2017 16:30:32 -0800
Subject: [PATCH 1/3] update layout on orientation change

---
 index.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index 5dc2841..7c1f24c 100644
--- a/index.js
+++ b/index.js
@@ -5,15 +5,30 @@ import tinycolor from 'tinycolor2';
 import PageData from './components/PageData';
 import Paginator from './components/Paginator';
 
+var {height, width} = Dimensions.get('window');
+
 export default class Onboarding extends Component {
   constructor() {
     super();
 
     this.state = {
       currentPage: 0,
+      layout:{
+        height:height,
+        width: width,
+      }
     };
   }
 
+  onLayout = (event) => {
+   this.setState({
+      layout: {
+        height: event.nativeEvent.layout.height,
+        width:  event.nativeEvent.layout.width,
+      }
+    });
+  };
+
   updatePosition = (event) => {
     const { contentOffset, layoutMeasurement } = event.nativeEvent;
     const pageFraction = contentOffset.x / layoutMeasurement.width;
@@ -36,14 +51,13 @@ export default class Onboarding extends Component {
   };
 
   render() {
-    const { width, height } = Dimensions.get('window');
     const { pages, bottomOverlay, showSkip, showNext, showDone } = this.props;
     const currentPage = pages[this.state.currentPage] || pages[0];
     const { backgroundColor } = currentPage;
     const isLight = tinycolor(backgroundColor).getBrightness() > 180;
 
     return (
-      <View style={{ flex: 1, backgroundColor: backgroundColor, justifyContent: 'center' }}>
+      <View style={{ flex: 1, backgroundColor: backgroundColor, justifyContent: 'center' }} onLayout={this.onLayout.bind(this)}>
         <ScrollView
           ref="scroll"
           pagingEnabled={true}
@@ -59,8 +73,8 @@ export default class Onboarding extends Component {
               image={image}
               title={title}
               subtitle={subtitle}
-              width={width}
-              height={height}
+              width={this.state.layout.width}
+              height={this.state.layout.height}
             />
           ))}
         </ScrollView>

From 2c27505fe8983fe39d75f59e433393b3f7309b96 Mon Sep 17 00:00:00 2001
From: Stefano Acerbetti <acerbetti@gmail.com>
Date: Tue, 24 Jan 2017 17:14:15 -0800
Subject: [PATCH 2/3] adjust the scrolling after the orientation change

---
 index.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index 7c1f24c..bd34963 100644
--- a/index.js
+++ b/index.js
@@ -27,11 +27,16 @@ export default class Onboarding extends Component {
         width:  event.nativeEvent.layout.width,
       }
     });
+
+   // adjust the scrolling
+    const { currentPage } = this.state;
+    const offsetX = currentPage * event.nativeEvent.layout.width;
+    this.refs.scroll.scrollTo({ x: offsetX, animated: false });
   };
 
   updatePosition = (event) => {
     const { contentOffset, layoutMeasurement } = event.nativeEvent;
-    const pageFraction = contentOffset.x / layoutMeasurement.width;
+    const pageFraction = contentOffset.x / this.state.layout.width;
     const page = Math.round(pageFraction);
     const isLastPage = this.props.pages.length === page + 1;
     if (isLastPage && pageFraction - page > 0.3) {
@@ -42,10 +47,9 @@ export default class Onboarding extends Component {
   };
 
   goNext = () => {
-    const { width } = Dimensions.get('window');
     const { currentPage } = this.state;
     const nextPage = currentPage + 1;
-    const offsetX = nextPage * width;
+    const offsetX = nextPage * this.state.layout.width;
     this.refs.scroll.scrollTo({ x: offsetX, animated: true });
     this.setState({ currentPage: nextPage });
   };
@@ -57,7 +61,7 @@ export default class Onboarding extends Component {
     const isLight = tinycolor(backgroundColor).getBrightness() > 180;
 
     return (
-      <View style={{ flex: 1, backgroundColor: backgroundColor, justifyContent: 'center' }} onLayout={this.onLayout.bind(this)}>
+      <View style={{ flex: 1, backgroundColor: backgroundColor, justifyContent: 'center' }} onLayout={this.onLayout}>
         <ScrollView
           ref="scroll"
           pagingEnabled={true}

From 97ebbb1211b27dc298573ce269e773648ea4b9b9 Mon Sep 17 00:00:00 2001
From: Stefano Acerbetti <acerbetti@gmail.com>
Date: Wed, 25 Jan 2017 12:24:16 -0800
Subject: [PATCH 3/3] applied suggested changes from code review

---
 index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index bd34963..4fdafa4 100644
--- a/index.js
+++ b/index.js
@@ -5,7 +5,7 @@ import tinycolor from 'tinycolor2';
 import PageData from './components/PageData';
 import Paginator from './components/Paginator';
 
-var {height, width} = Dimensions.get('window');
+var { height, width } = Dimensions.get('window');
 
 export default class Onboarding extends Component {
   constructor() {
@@ -14,7 +14,7 @@ export default class Onboarding extends Component {
     this.state = {
       currentPage: 0,
       layout:{
-        height:height,
+        height: height,
         width: width,
       }
     };
@@ -35,7 +35,7 @@ export default class Onboarding extends Component {
   };
 
   updatePosition = (event) => {
-    const { contentOffset, layoutMeasurement } = event.nativeEvent;
+    const { contentOffset } = event.nativeEvent;
     const pageFraction = contentOffset.x / this.state.layout.width;
     const page = Math.round(pageFraction);
     const isLastPage = this.props.pages.length === page + 1;