diff --git a/index.js b/index.js
index 5dc2841..4fdafa4 100644
--- a/index.js
+++ b/index.js
@@ -5,18 +5,38 @@ 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,
+      }
+    });
+
+   // 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 { contentOffset } = event.nativeEvent;
+    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) {
@@ -27,23 +47,21 @@ 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 });
   };
 
   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}>
         <ScrollView
           ref="scroll"
           pagingEnabled={true}
@@ -59,8 +77,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>