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
      backgroundColor="white"
      paddingV-10
      paddingH-10
      marginH-25
      marginV-10
      style={{ borderRadius: 22 }}
    >
      <View paddingB-5 row spread>
        <Text text70R>{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%"}
          backgroundColor="#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;