Para começar a lógica do check, nós vamos começar modificando a função de check, que está dentro de “EditHabit”. “Src → Components → Home → EditHabit → index.jsx”

Nós vamos primeiro excluir o console e adicionar uma verificação, fazendo com que se o habitCheck for igual a 0, a gente comece usar o código.

// ... Outros códigos

function handleCheck() {
  if (habitCheck === 0) {
  }
}

// ... Outros códigos

Agora vamos criar dois estados, o primeiro será um para checar se o hábito está ou não checado, que pode começar vazio. O outro será a imagem de check do hábito, ele vai começar como o da mente e vamos mudar de acordo com o hábito.

import React, { useState } from "react";

// ... Outros códigos

export default function EditHabit({ habit, checkColor }) {
  const navigation = useNavigation();
  const [habitCheck, setHabitCheck] = useState();
  const [checkImage, setCheckImage] = useState(
    require("../../../assets/icons/Mind.png")
  );

	function handleEdit() {
    navigation.navigate("HabitPage", {
      create: false,
      habit,
    });
  }

  function handleCheck() {
    if (habitCheck === 0) {
    }
  }

// ... Outros códigos

Agora nós iremos dentro do handleCheck mudar o “habitCheck” de vazio para 1, que é igual a “true”. Nós iremos colocar com números, pois o nosso boolean do SQLite interpreta assim, como 1 e 0. E usaremos esse número para mandar para o banco.

// ... Outros códigos

export default function EditHabit({ habit, checkColor }) {
  const navigation = useNavigation();
  const [habitCheck, setHabitCheck] = useState();
  const [checkImage, setCheckImage] = useState(
    require("../../../assets/icons/Mind.png")
  );

	function handleEdit() {
    navigation.navigate("HabitPage", {
      create: false,
      habit,
    });
  }

  function handleCheck() {
    if (habitCheck === 0) {
			setHabitCheck(1);
    }
  }

// ... Outros códigos

Com isso feito vamos modificar o código e a imagem com renderização condicional. Iremos começar criando um useEffect, que vai modificar a nossa imagem de check. (Ainda na página EditHabit)

Nós vamos primeiro colocar o hábito como checado ou não, se ele estiver, nós vamos marcar como sim, e caso ele não esteja, ficará 0. Depois nós iremos ver qual é a área que está vindo, e dependendo da área nós vamos modificar a imagem dentro de “checkImage”

import React, { useEffect, useState } from "react";

// ... Outros códigos

export default function EditHabit({ habit, checkColor }) {
  const navigation = useNavigation();
  const [habitCheck, setHabitCheck] = useState();
  const [checkImage, setCheckImage] = useState(
    require("../../../assets/icons/Mind.png")
  );

	function handleEdit() {
    navigation.navigate("HabitPage", {
      create: false,
      habit,
    });
  }

  function handleCheck() {
    if (habitCheck === 0) {
			setHabitCheck(1);
    }
  }

	useEffect(() => {
    setHabitCheck(habit?.habitIsChecked);
    if (habit?.habitArea === "Financeiro") {
      setCheckImage(require("../../../assets/icons/Money.png"));
    }
    if (habit?.habitArea === "Corpo") {
      setCheckImage(require("../../../assets/icons/Body.png"));
    }
    if (habit?.habitArea === "Humor") {
      setCheckImage(require("../../../assets/icons/Fun.png"));
    }
  }, []);

// ... Outros códigos

Agora, nós iremos fazer uma renderização condicional no botão de acordo com o nosso “habitCheck”. Se ele for 0, nós iremos mostrar o botão de check padrão, caso seja 1, iremos mostrar um que será a imagem, e o usuário não vai poder desmarcar, pois o botão de check mexe com toda a nossa aplicação (Barra de progresso, imagens e banco de dados).

import { Text, TouchableOpacity, StyleSheet, View, Image } from "react-native";

// ... Outros códigos

return (
  <TouchableOpacity
    activeOpacity={0.9}
    style={styles.button}
    onPress={handleEdit}
  >
    <View style={styles.habitText}>
      <Text style={styles.habitTitle}>{habitName}</Text>
      <Text style={styles.habitFrequency}>{textNotification}</Text>
    </View>
    {habitCheck === 0 ? (
      <TouchableOpacity
        style={[styles.check, { borderColor: checkColor }]}
        onPress={handleCheck}
      />
    ) : (
      <TouchableOpacity onPress={handleCheck}>
        <Image source={checkImage} style={styles.checked} />
      </TouchableOpacity>
    )}
   </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#151515",
    borderRadius: 5,
    width: 320,
    marginVertical: 10,
    paddingVertical: 10,
    paddingRight: 20,
    paddingLeft: 10,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  habitTitle: {
    color: "white",
    fontWeight: "bold",
    paddingRight: 30,
  },
  habitFrequency: {
    color: "white",
  },
  check: {
    width: 25,
    height: 25,
    borderWidth: 1,
    borderRadius: 12,
  },
  checked: {
    width: 25,
    height: 25,
  },
});

Ao fazermos isso podemos clicar no botão e marcar o hábito como checado, isso será temporário, pois ainda não fizemos a verificação no banco de dados, mas já terá efeito visual.