button to open form

App.js

 import AddDepense from './components/add_depense';
 import DepensesList from './components/depenses_list';
 import TitleBar from './components/title_bar';
-import sqlite_exec_query from './db/query';
+import {sqlite_exec_query} from './db/query';
 
 
 export default function App() {
   });
 
   return (
-    <View>
+    <View style={styles.home}>
       <View style={styles.container, {
         flexDirection: "column"
       }}>
             onChangeObjective={onChangeObjective}/>
           <DepensesList durationMode={durationMode} />
           <StatusBar hidden />
-        </View>
-        <View>
-        {/* Overlay for expenses */}
-        <AddDepense/>
-
       </View>
+        {/* Overlay for expenses */}
+      <AddDepense/>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  home: {
+    width: '100%',
+    height: '100%',
+  },
   container: {
     flex: 1,
-    backgroundColor: '#fff',
+    backgroundColor: '#00FF00',
     alignItems: 'center',
     justifyContent: 'center',
   }

components/add_depense.js

 
 
 export default function AddDepense(props){
+    const [addingDepense, onAddDepense] = React.useState(false);
 
-        return (
-        <View style={add_depenses_styles.buttonAdd}>
-            <Button  title="+"></Button>
-        </View>
-        );
-    }
+
+    return (<View style={add_depenses_styles.overlay}>
+    <View >
+        {addingDepense ? 
+            <View style={ add_depenses_styles.form_area}>
+                <Text> Le form</Text>
+                <Button title="Ajouter"/>
+            </View>
+         : <View/>}
+    </View>
+    <View style={ add_depenses_styles.button_add_parent }>
+        <Button 
+            style={add_depenses_styles.button_add} 
+            title="+"
+            onPress={() => onAddDepense(!addingDepense)}></Button>
+    </View>
+    </View>
+    );
+}
 
 
 const add_depenses_styles = StyleSheet.create({
-    buttonAdd: {
+    overlay: {
+        height: "100%",
+        width: "100%",
         position: 'absolute',
-        bottom: 0,
-        right: 0
+
+    },
+    form_area: {
+        backgroundColor: '#282828',
+
+    },
+    button_add: {
+
     },
-    input: {
-        borderWidth: 0.5
+    button_add_parent: {
+        position: 'absolute',
+        bottom: 10,
+        right: 10,
     }
-    });
+});

components/depenses_list.js

 {
 
     return(
+    <View>
         <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+        <Text>{props.durationMode}</Text>
+    </View>
     )
 }
 

db/query.js

 const db = SQLite.openDatabase("datacoucou.db");
 
 
-export default function sqlite_exec_query(inQuery, inCallback){
+export function sqlite_exec_query(inQuery, inCallback){
+    sqlite_exec_parameterised(inQuery, [], inCallback);    
+}
 
+export function sqlite_exec_parameterised(inQuery, inParams, inCallback){
     db.transaction((tx) => {
-        tx.executeSql(inQuery, [],
+        tx.executeSql(inQuery, inParams,
         (txobj, res) => inCallback(res),
         (txobj, err) => {console.log("er");console.log(err);})
     })
-}
+}