cally/components/pages/todos/ToDoItem.tsx

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

const ToDoItem = (props: { item: IToDo }) => {
  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} />
      </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;