⚙️

health-mate-weight-target/components/StartModal.js

@@ -0,0 +1,57 @@
+// @flow
+import * as React from "react";
+import {
+  View, Image, Text, StyleSheet, Dimensions,
+} from "react-native";
+
+import Overlays from "./Overlays";
+
+const backgroundColor = "#409aee";
+const { width, height } = Dimensions.get("window");
+
+type StartModalProps = {
+  children: React.Node,
+};
+
+export default class StartModal extends React.PureComponent<StartModalProps> {
+  render() {
+    const { children } = this.props;
+    return (
+      <Overlays>
+        <View style={styles.container} pointEvents="none">
+          <Text style={styles.title}>What is the target weight (kg) that you would like to reach?</Text>
+          <Text style={styles.subtitle}>Drag the bubble  to set your target weight</Text>
+        </View>
+        {children}
+        <Image
+          style={{
+            width: 100, height: 100, resizeMode: "contain", alignSelf: "flex-end", marginRight: 16,
+          }}
+          source={require("../assets/pinch.png")}
+        />
+      </Overlays>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width,
+    height,
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    backgroundColor,
+  },
+  title: {
+    color: "white",
+    fontSize: 24,
+    width: 300,
+    textAlign: "center",
+  },
+  subtitle: {
+    width: 150,
+    color: "white",
+    fontSize: 14,
+    textAlign: "center",
+  },
+});

health-mate-weight-target/components/WeightTarget.js

@@ -9,6 +9,7 @@ import { scaleLinear } from "d3-scale";
 
 import Scale, { ROW_HEIGHT } from "./Scale";
 import Overlays from "./Overlays";
+import StartModal from "./StartModal";
 
 const { height } = Dimensions.get("window");
 const backgroundColor = "#409aee";
@@ -143,26 +144,11 @@ export default class WeightTarget extends React.PureComponent<WeightTargetProps,
           </Overlays>
           {
             visibleModal && (
-            <Overlays>
-                  <View
-                    style={{
-                  flex: 1, justifyContent: "space-evenly", alignItems: "center", backgroundColor,
-                }}
-                    pointEvents="none"
-                  >
-                    <Text style={styles.title}>What is the target weight (kg) that you would like to reach?</Text>
-                    <Text style={styles.subtitle}>Drag the bubble  to set your target weight</Text>
-                  </View>
-                  <View style={styles.mainCursor}>
-                    <TextInput ref={this.modalInput} style={styles.mainCursorLabel} />
-                  </View>
-                  <Image
-                    style={{
-                  width: 100, height: 100, resizeMode: "contain", alignSelf: "flex-end", marginRight: 16,
-                }}
-                    source={require("../assets/pinch.png")}
-                  />
-                </Overlays>
+              <StartModal>
+                <View style={styles.mainCursor}>
+                  <TextInput ref={this.modalInput} style={styles.mainCursorLabel} />
+                </View>
+              </StartModal>
             )
           }
         </View>
@@ -212,16 +198,4 @@ const styles = StyleSheet.create({
     color: backgroundColor,
     fontSize: 26,
   },
-  title: {
-    color: "white",
-    fontSize: 24,
-    width: 300,
-    textAlign: "center",
-  },
-  subtitle: {
-    width: 150,
-    color: "white",
-    fontSize: 14,
-    textAlign: "center",
-  },
 });