Major refactoring: navigation does not break anymore. the user can now navigate between the tabs without loosing context

components/expense/DateSelectorButton.tsx

@@ -0,0 +1,38 @@
+import { View, Text, StyleSheet, TouchableOpacity, TouchableOpacityProps } from 'react-native'
+import React, { useState } from 'react'
+import { useTheme } from '../../app/contexts/ThemeContext';
+import { SIZES } from '../../constants/theme';
+import { SimpleDate } from '../../util/SimpleDate';
+import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+
+interface DateSelectorProps extends ViewProps {
+  onPress?: ()=>void | undefined;
+  selectedDate: Date
+}
+
+const DateSelectorButton:React.FC<DateSelectorProps> = (props: DateSelectorProps) => {
+  const {onPress, selectedDate, ...restProps} = props;
+  const {colors} = useTheme();
+
+  return (
+    <TouchableOpacity onPress={onPress} {...restProps} style={[styles.inputContainer, {backgroundColor: colors.elementDefaultColor}]}>
+      <Text style={[styles.text, {color: colors.primaryText}]}>Date:</Text>
+      <Text style={[styles.text, {color: colors.primaryText}]}>{new SimpleDate(selectedDate).format("DD.MM.YYYY")}</Text>
+    </TouchableOpacity>
+  )
+}
+const styles = StyleSheet.create({
+  inputContainer: {
+    minHeight: 50,
+    borderRadius: 20,
+    flexDirection: "row",
+    justifyContent: 'space-between',
+    alignItems: "center"
+  },
+  text:{
+    fontSize: SIZES.large,
+    marginHorizontal: 15,
+  },
+})
+
+export default DateSelectorButton