Moves out IconText component

components/home.js

@@ -17,18 +17,9 @@ import { getFertilityStatusForDay } from '../lib/sympto-adapter'
 import styles, { cycleDayColor, periodColor, secondaryColor } from '../styles'
 import AppText from './app-text'
 import Button from './button'
+import IconText from './icon-text'
 import { formatDateForShortText } from './helpers/format-date'
 
-const IconText = ({ children, wrapperStyles }) => {
-  return (
-    <View style={[styles.homeIconTextWrapper, wrapperStyles]}>
-      <AppText style={styles.iconText}>
-        { children }
-      </AppText>
-    </View>
-  )
-}
-
 const HomeElement = ({ children, onPress, buttonColor, buttonLabel }) => {
   return (
     <View
@@ -106,9 +97,7 @@ class Home extends Component {
               <View>
                 <DripHomeIcon name="circle" size={80} color={cycleDayColor}/>
               </View>
-              <IconText wrapperStyles={styles.wrapperIcon}>
+              <IconText>{cycleDayNumber || labels.unknown}</IconText>
-                {cycleDayNumber || labels.unknown}
-              </IconText>
 
               <AppText style={styles.homeDescriptionText}>
                 {cycleDayMoreText}
@@ -122,7 +111,7 @@ class Home extends Component {
             >
               <DripHomeIcon name="drop" size={100} color={periodColor} />
 
-              <IconText wrapperStyles={{top: '45%', ...styles.wrapperIcon}}>
+              <IconText wrapperStyles={{ top: '45%' }}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 
@@ -138,9 +127,7 @@ class Home extends Component {
             >
               <View style={styles.homeCircle}/>
 
-              <IconText wrapperStyles={styles.wrapperIcon}>
+              <IconText>{ phase ? phase.toString() : labels.unknown }</IconText>
-                { phase ? phase.toString() : labels.unknown }
-              </IconText>
 
               { phase &&
                 <AppText style={styles.homeDescriptionText}>

components/icon-text.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import AppText from './app-text'
+
+import styles from '../styles'
+
+const IconText = ({ children, wrapperStyles }) => {
+  return (
+    <View style={[ styles.homeIconTextWrapper, wrapperStyles ]}>
+      <AppText style={styles.iconText}>
+        { children }
+      </AppText>
+    </View>
+  )
+}
+
+IconText.propTypes = {
+  children: PropTypes.node,
+  wrapperStyles: PropTypes.object,
+}
+
+export default IconText

styles/index.js

@@ -131,14 +131,12 @@ export default StyleSheet.create({
   homeIconTextWrapper: {
     alignItems: 'center',
     justifyContent: 'center',
+    width: 80,
+    position: 'absolute',
   },
   homeIconAndText: {
     justifyContent: 'center'
   },
-  wrapperIcon: {
-    width: 80,
-    position: 'absolute'
-  },
   homeCircle: {
     borderRadius: 100,
     borderWidth: 2.3,