cally/components/pages/todos/AddChore.tsx

import {StyleSheet} from "react-native";
import React, {useState} from "react";
import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
import AddChoreDialog from "./AddChoreDialog";
import PlusIcon from "@/assets/svgs/PlusIcon";

const AddChore = () => {
    const [isVisible, setIsVisible] = useState<boolean>(false);

    return (
        <View
            row
            spread
            paddingH-20
            style={{
                position: "absolute",
                bottom: 15,
                width: "100%",
            }}
        >
            <View style={styles.buttonContainer}>
                <Button
                    marginB-30
                    size={ButtonSize.large}
                    style={styles.button}
                    onPress={() => setIsVisible(!isVisible)}
                >
                    <PlusIcon/>
                    <Text
                        white
                        style={{fontFamily: "Manrope_600SemiBold", fontSize: 15}}
                        marginL-5
                    >
                        Create new to do
                    </Text>
                </Button>
            </View>
            {isVisible && (
                <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
            )}
        </View>
    );
};

export default AddChore;

const styles = StyleSheet.create({
    gradient: {
        height: 150,
        position: "absolute",
        bottom: 0,
        width: "100%",
        justifyContent: "center",
        alignItems: "center",
    },
    buttonContainer: {
        width: "100%",
        alignItems: "center",
    },
    button: {
        backgroundColor: "rgb(253, 23, 117)",
        height: 53.26,
        borderRadius: 30,
        width: 335,
    },
});