functionality that disables the next-periode-reminder-switch if menstrual bleeding shall not be predicted (new customization feature). also an alert pops up when the user still tries to press the disabled toggle or the text area next to it

components/common/app-switch.js

@@ -6,7 +6,7 @@ import AppText from './app-text'
 
 import { Containers } from '../../styles'
 
-const AppSwitch = ({ onToggle, text, value, trackColor }) => {
+const AppSwitch = ({ onToggle, text, value, trackColor, disabled }) => {
   return (
     <View style={styles.container}>
       <View style={styles.textContainer}>
@@ -17,6 +17,7 @@ const AppSwitch = ({ onToggle, text, value, trackColor }) => {
         style={styles.switch}
         value={value}
         trackColor={trackColor}
+        disabled={disabled}
       />
     </View>
   )
@@ -27,6 +28,7 @@ AppSwitch.propTypes = {
   text: PropTypes.string,
   value: PropTypes.bool,
   trackColor: PropTypes.string,
+  disabled: PropTypes.bool,
 }
 
 const styles = StyleSheet.create({

components/settings/reminders/reminders.js

@@ -8,11 +8,15 @@ import TemperatureReminder from './temperature-reminder'
 import {
   periodReminderObservable,
   savePeriodReminder,
+  periodPredictionObservable,
 } from '../../../local-storage'
 
 import labels from '../../../i18n/en/settings'
+import { Alert, Pressable } from 'react-native'
 
 const Reminders = () => {
+  const isPeriodPredictionDisabled = !periodPredictionObservable.value
+
   const [isPeriodReminderEnabled, setIsPeriodReminderEnabled] = useState(
     periodReminderObservable.value.enabled
   )
@@ -21,15 +25,27 @@ const Reminders = () => {
     savePeriodReminder({ enabled: isEnabled })
   }
 
+  const reminderDisabledPrompt = () => {
+    if (!periodPredictionObservable.value) {
+      Alert.alert(
+        labels.periodReminder.alertNoPeriodeReminder.title,
+        labels.periodReminder.alertNoPeriodeReminder.message
+      )
+    }
+  }
+
   return (
     <AppPage>
+      <Pressable onPress={reminderDisabledPrompt}>
         <Segment title={labels.periodReminder.title}>
           <AppSwitch
             onToggle={periodReminderToggle}
             text={labels.periodReminder.reminderText}
             value={isPeriodReminderEnabled}
+            disabled={isPeriodPredictionDisabled}
           />
         </Segment>
+      </Pressable>
       <Segment title={labels.tempReminder.title} last>
         <TemperatureReminder />
       </Segment>

i18n/en/settings.js

@@ -50,6 +50,11 @@ export default {
       'Get a notification 3 days before your next period is likely to start.',
     notification: (daysToEndOfPrediction) =>
       `Your next period is likely to start in 3 to ${daysToEndOfPrediction} days.`,
+    alertNoPeriodeReminder: {
+      title: 'Periode Prediction switched off',
+      message:
+        'To use the periode reminder please first enable periode prediction in the customization settings.',
+    },
   },
   useCervix: {
     title: 'Secondary symptom',