Only show the hints if minimum not selected

components/app-text.js

@@ -22,15 +22,20 @@ export function AppTextLight(props) {
 }
 
 export function ActionHint(props) {
-  return (
+  if(props.isVisible) {
-    <View
+    return (
-      style={styles.actionHintWrappingView}>
+      <View
-      <AppText
+        style={styles.actionHintWrappingView}
-        style={[styles.actionHint, props.style]}>
+        isVisible={false}>
-        {props.children}
+        <AppText
-      </AppText>
+          style={[styles.actionHint, props.style]}>
-    </View>
+          {props.children}
-  )
+        </AppText>
+      </View>
+    )
+  } else {
+    return null
+  }
 }
 
 export function SymptomSectionHeader(props) {

components/cycle-day/symptoms/cervix.js

@@ -36,6 +36,7 @@ export default class Cervix extends Component {
       { label: labels.position.categories[1], value: 1 },
       { label: labels.position.categories[2], value: 2 }
     ]
+    const mandatoryNotCompletedYet = typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
@@ -82,7 +83,7 @@ export default class Cervix extends Component {
             />
           </SymptomSection>
         </ScrollView>
-        <ActionHint>{labels.actionHint}</ActionHint>
+        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='cervix'
           date={this.props.date}
@@ -95,7 +96,7 @@ export default class Cervix extends Component {
               exclude: Boolean(this.state.exclude)
             })
           }}
-          saveDisabled={typeof this.state.opening != 'number' || typeof this.state.firmness != 'number'}
+          saveDisabled={mandatoryNotCompletedYet}
           navigate={this.props.navigate}
         />
       </View>

components/cycle-day/symptoms/mucus.js

@@ -34,6 +34,7 @@ export default class Mucus extends Component {
       { label: labels.texture.categories[1], value: 1 },
       { label: labels.texture.categories[2], value: 2 }
     ]
+    const mandatoryNotCompletedYet = typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
@@ -70,7 +71,7 @@ export default class Mucus extends Component {
             />
           </SymptomSection>
         </ScrollView>
-        <ActionHint>{labels.actionHint}</ActionHint>
+        <ActionHint isVisible={mandatoryNotCompletedYet}>{labels.actionHint}</ActionHint>
         <ActionButtonFooter
           symptom='mucus'
           date={this.props.date}
@@ -85,7 +86,7 @@ export default class Mucus extends Component {
               exclude: Boolean(this.state.exclude)
             })
           }}
-          saveDisabled={typeof this.state.feeling != 'number' || typeof this.state.texture != 'number'}
+          saveDisabled={mandatoryNotCompletedYet}
           navigate={this.props.navigate}
         />
       </View>