Merge pull request #35 from okgrow/fix/copilotRefBeingNullSometimes

Fixes ref being null every other time

Author: mohebifar

src/components/CopilotModal.js

@@ -1,7 +1,6 @@
 // @flow
 import React, { Component } from 'react';
 import { Animated, Easing, View, Text, NativeModules, Modal, StatusBar, Platform } from 'react-native';
-
 import Tooltip from './Tooltip';
 import styles, { MARGIN, ARROW_SIZE, STEP_NUMBER_DIAMETER, STEP_NUMBER_RADIUS } from './style';
 
@@ -33,6 +32,8 @@ type State = {
   },
 };
 
+const noop = () => {};
+
 class CopilotModal extends Component<Props, State> {
   static defaultProps = {
     easing: Easing.elastic(0.7),
@@ -62,20 +63,32 @@ class CopilotModal extends Component<Props, State> {
     }
   }
 
+  layout = {
+    width: 0,
+    height: 0,
+  }
+
+  handleLayoutChange = ({ nativeEvent: { layout } }) => {
+    this.layout = layout;
+  }
+
   measure(): Promise {
     if (typeof __TEST__ !== 'undefined' && __TEST__) { // eslint-disable-line no-undef
       return new Promise(resolve => resolve({
         x: 0, y: 0, width: 0, height: 0,
       }));
     }
 
-    return new Promise((resolve, reject) => {
-      this.wrapper.measure(
-        (ox, oy, width, height, x, y) => resolve({
-          x, y, width, height,
-        }),
-        reject,
-      );
+
+    return new Promise((resolve) => {
+      const setLayout = () => {
+        if (this.layout.width !== 0) {
+          resolve(this.layout);
+        } else {
+          requestAnimationFrame(setLayout);
+        }
+      };
+      setLayout();
     });
   }
 
@@ -253,19 +266,18 @@ class CopilotModal extends Component<Props, State> {
 
   render() {
     const containerVisible = this.state.containerVisible || this.props.visible;
-    const contentVisible = this.state.layout && this.state.containerVisible && this.props.visible;
+    const contentVisible = this.state.layout && containerVisible;
 
     return (
       <Modal
         animationType="none"
         visible={containerVisible}
-        onRequestClose={() => { }}
+        onRequestClose={noop}
         transparent
       >
         <View
           style={styles.container}
-          ref={(element) => { this.wrapper = element; }}
-          onLayout={() => { }}
+          onLayout={this.handleLayoutChange}
         >
           {contentVisible && this.renderMask()}
           {contentVisible && this.renderTooltip()}