Nós iremos agora criar o toggle de notificação, que é o botão de ativar ou desativar notificação que temos. Nós teremos apenas notificação semanal e diária, pois o expo não tem a disponibilidade de notificação mensal.

Nós vamos criar um arquivo “Notification” dentro de “habitPage”, que está dentro de components. “Components → HabitPage → Notification → index.jsx”

Nós vamos receber via props o notificationToogle e o setNotificationToggle, que é o valor, começando como falso e o set que iremos criar.

import React from "react";

export default function Notification({
  notificationToggle,
  setNotificationToggle,
}) {
  return (
    <>

    </>
  );
}

Vamos criar uma função que ao ser chamada vai mudar o estado do notification. Ou seja, se ele está falso, vira verdadeiro, e o inverso também.

import React from "react";

export default function Notification({
  notificationToggle,
  setNotificationToggle,
}) {
	const toggleSwitch = () => {
    setNotificationToggle((previousState) => !previousState);
  };

  return (
    <>

    </>
  );
}

Agora criaremos de fato o switch, que virá com um texto junto a ele. É algo nativo do React-Native. Será através da propriedade “onValueChange” que chamaremos a função.

import React from "react";
import { StyleSheet, Switch } from "react-native";
import { View, Text } from "react-native";

export default function Notification({
  notificationToggle,
  setNotificationToggle,
}) {
  const toggleSwitch = () => {
    setNotificationToggle((previousState) => !previousState);
  };

  return (
    <>
      <View style={styles.container}>
        <Text style={styles.title}>Notificação</Text>
        <Switch
          trackColor={{ false: "#FF0044", true: "#2DBE56" }}
          thumbColor={"#FFFFFF"}
          ios_backgroundColor="#3e3e3e"
          onValueChange={toggleSwitch}
          value={notificationToggle}
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  titleDisabled: {
    color: "#BBBB",
    fontSize: 20,
    marginRight: 10,
  },
  title: {
    color: "white",
    fontSize: 20,
    marginRight: 10,
  },
});

Agora iremos voltar para o “HabitPage”, para importar e usar esse nosso notification. “Pages → HabitPage → index.jsx”

import React, { useEffect, useRef, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";

import SelectHabit from "../../components/HabitPage/SelectHabit";
import SelectFrequency from "../../components/HabitPage/SelectFrequency";
import Notification from "../../components/HabitPage/Notification";

export default function HabitPage({ route }) {
	const navigation = useNavigation();
	const [habitInput, setHabitInput] = useState();
  const [frequencyInput, setFrequencyInput] = useState();
  const [notificationToggle, setNotificationToggle] = useState();

	const { create, habit } = route.params;

  return (
    <View style={styles.container}>
      <ScrollView>
        <View>
          <TouchableOpacity
            style={styles.bakcPageBtn}
            onPress={() => navigation.goBack()}
          >
            <Image
              source={require("../../assets/icons/arrowBack.png")}
              style={styles.arrowBack}
            />
          </TouchableOpacity>
          <View style={styles.mainContent}>
            <Text style={styles.title}>Configurações {"\\n"} de hábito</Text>
            <Text style={styles.inputText}>Área</Text>
            <View style={styles.inputContainer}>
              <Text style={styles.area}>{habitArea}</Text>
            </View>

            <Text style={styles.inputText}>Hábito</Text>
            <SelectHabit
              area={habitArea}
              currentHabit={habitName}
              habitInput={setHabitInput}
            />

            <Text style={styles.inputText}>Frequência</Text>
            <SelectFrequency
              currentFrequency={habitFrequency}
              frequencyInput={setFrequencyInput}
            />

            {frequencyInput === "Mensal" ? null : (
              <Notification
                notificationToggle={notificationToggle}
                setNotificationToggle={setNotificationToggle}
              />
            )}

          </View>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  bakcPageBtn: {
    width: 40,
    height: 40,
    margin: 25,
  },
  arrowBack: {
    width: 40,
    height: 40,
  },
  mainContent: {
    width: 250,
    alignSelf: "center",
  },configButton: {
    alignItems: "center",
  },
  title: {
    fontWeight: "bold",
    textAlign: "center",
    color: "white",
    fontSize: 30,
  },
  inputText: {
    color: "white",
    fontSize: 16,
    marginTop: 35,
    marginBottom: 10,
    marginLeft: 5,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: "#FFFFFF",
    borderRadius: 10,
    paddingHorizontal: 20,
    paddingVertical: 15,
  },
  area: {
    color: "#BBBBBB",
    fontSize: 15,
  },
});

Agora podemos ver que está aparecendo, e ao clicar muda de valor e também sua cor. Caso a nossa frequência seja mensal, ele não vai aparecer, então não teremos notificação criada.