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 {AntDesign} from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import AddChoreDialog from "./AddChoreDialog";

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

    return (
        <LinearGradient
            colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
            locations={[0, 0.5, 1]}
            style={styles.gradient}
        >
            <View style={styles.buttonContainer}>
                <Button
                    marginH-25
                    size={ButtonSize.large}
                    style={styles.button}
                    onPress={() => setIsVisible(!isVisible)}
                >
                    <AntDesign name="plus" size={24} color="white"/>
                    <Text white text60R marginL-10>
                        Create new to do
                    </Text>
                </Button>
            </View>
            <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
        </LinearGradient>
    );
};

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)",
        paddingVertical: 15,
        paddingHorizontal: 30,
        borderRadius: 30,
    },
});