BudgetIzr/components/add_depense.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import DepenseForm from './depense_edit/depense_form';


export default function AddDepense(props){
    const [addingDepense, onAddDepense] = React.useState(false);

    return (<SafeAreaView pointerEvents="box-none" style={ add_depenses_styles.overlay }>
    <View >
        {addingDepense ? 
            <DepenseForm fetchDepenses={props.fetchDepenses} onAddDepense={onAddDepense}/>
         : <View/>}
    </View>
    <View style={ add_depenses_styles.button_add_parent }>
        <Pressable
            style={add_depenses_styles.button_add} 
            onPress={() => onAddDepense(!addingDepense)}> 
            
            <Text>{!addingDepense ? "+" : "-"}</Text>
        
        </Pressable>
    </View>
    </SafeAreaView>
    );
}


const add_depenses_styles = StyleSheet.create({
    
    overlay: {
        height: "100%",
        width: "100%",
        position: 'absolute',
        justifyContent: "center",
        // elevation:10,
    },
    
    button_add: {
        borderWidth: 1,
        borderRadius: 25,
        padding: 10,
        backgroundColor: "#FFFFFF",
        elevation:5,
        width: "100%",
        height: "100%",
        justifyContent: 'center',
        alignItems: 'center',
        
    },
    button_add_parent: {
        position: 'absolute',
        bottom: 10,
        right: 10,
        width:50,
        height:50,
    }
});