[#4] Dietary Restriction Implementation

Filtered recipes in the app based on user's selection from the settings screen.

src/components/CustomComponents/SwitchWithText.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Switch } from "react-native-paper";
+import style from "./styles";
+
+export default function SwitchWithText({}) {
+  return (
+    <>
+      <Text style={style.title}>{settingsLabel[language].measurements}</Text>
+      <View style={style.switch}>
+        <Text style={style.options.label}>
+          {isSwitchOnMeasurement
+            ? settingsLabel[language].changeToUsImperial
+            : settingsLabel[language].changeToMetric}
+        </Text>
+        <Switch
+          value={isSwitchOnMeasurement}
+          onValueChange={onToggleSwitchMeasurement}
+        />
+      </View>
+    </>
+  );
+}

src/components/CustomComponents/styles.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  switch: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 10,
+    gap: 10,
+    title: {
+      fontSize: 23,
+      fontWeight: "bold",
+    },
+    marginBottom: 8,
+  },
+
+  title: {
+    marginTop: 8,
+    fontSize: 23,
+    fontWeight: "bold",
+  },
+  description: {
+    fontSize: 17,
+    color: "#777777",
+    marginBottom: 10,
+  },
+  options: {
+    container: {
+      alignItems: "center",
+      flexDirection: "row",
+      marginTop: 10,
+      justifyContent: "space-between",
+    },
+    label: {
+      marginRight: 10,
+      fontSize: 18,
+    },
+  },
+});
+
+export default styles;