cally/components/pages/todos/ToDoItem.tsx

import { View, Text, Checkbox } from "react-native-ui-lib";
import React from "react";
import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
import { Ionicons } from "@expo/vector-icons";

const ToDoItem = (props: { item: IToDo }) => {
  const { updateToDo } = useToDosContext();
  return (
    <View
      centerV
      paddingV-10
      paddingH-10
      marginH-25
      marginV-10
      style={{
        borderRadius: 22,
        backgroundColor: props.item.done ? "#e0e0e0" : "white",
        opacity: props.item.done ? 0.3 : 1,
      }}
    >
      <View paddingB-5 row spread>
        <Text
          text70R
          style={{
            textDecorationLine: props.item.done ? "line-through" : "none",
          }}
        >
          {props.item.title}
        </Text>
        <Checkbox
          value={props.item.done}
          onValueChange={(value) => {
            updateToDo(props.item.id, { done: !props.item.done });
          }}
        />
      </View>
      <View centerH paddingV-5>
        <View
          centerV
          height={2}
          width={"100%"}
          style={{
            backgroundColor: props.item.done ? '#b8b8b8' : "#e7e7e7",
          }}
          centerH
        />
      </View>
      <View centerH row spread>
        {props.item.points && props.item.points > 0 ? (
          <View centerV row>
            <Ionicons name="gift-outline" size={20} color="#46a80a" />
            <Text color="#46a80a">{props.item.points} points</Text>
          </View>
        ) : (
          <View />
        )}
        <View
          height={25}
          width={25}
          backgroundColor="red"
          style={{ borderRadius: 50 }}
        />
      </View>
    </View>
  );
};

export default ToDoItem;