first commit

App.js

@@ -0,0 +1,135 @@
+import 'react-native-gesture-handler';
+
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, Image} from 'react-native';
+//redux
+import store from './src/redux/store';
+import { Provider } from 'react-redux';
+
+
+//navigation
+import { NavigationContainer, DarkTheme } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+
+//themes
+import { COLORS } from './src/themes/Colors';
+
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+//screens
+import MainScreen from './src/screens/MainScreen';
+import GroceryList from './src/screens/storageManagement/GroceryList';
+import Storage from './src/screens/storageManagement/Storage';
+import Products from './src/screens/storageManagement/Products';
+
+const MyTheme = {
+  dark: true,
+  colors: {
+    background: COLORS.dp00,
+  },
+};
+const Stack = createStackNavigator();
+const Tab = createMaterialBottomTabNavigator();
+
+const GroceryListTab = () => {
+  return (
+    <Tab.Navigator
+      shifting={true}
+      activeColor="#f0edf6"
+      inactiveColor="#121212"
+      barStyle={{ backgroundColor: COLORS.dp00 }}
+    >
+      <Tab.Screen name="Grocery List" component={GroceryList} options={{
+        tabBarColor: '#1A2C31',
+        tabBarLabel: 'Grocery List',
+        tabBarIcon: ({ color }) => (
+          <MaterialCommunityIcons name="format-list-bulleted" color={color} size={26} />
+        ),
+      }} />
+
+      <Tab.Screen name="Storage" component={Storage} options={{
+        tabBarColor: '#1d122a',
+        tabBarLabel: 'Storage',
+        tabBarIcon: ({ color }) => (
+          <MaterialCommunityIcons name="home-analytics" color={color} size={26} />
+        ),
+      }} />
+      <Tab.Screen name="Products" component={Products} options={{
+        tabBarColor: '#081c16',
+        tabBarLabel: 'Catalog',
+        tabBarIcon: ({ color }) => (
+          <MaterialCommunityIcons name="tag-multiple" color={color} size={26} />
+        ),
+      }} />
+    </Tab.Navigator>
+  );
+}
+
+const App = () => {
+  return (
+    <Provider store={store}>
+      <View style={{ backgroundColor: COLORS.dp00, flex: 1 }}>
+        <NavigationContainer theme={MyTheme}>
+          <Stack.Navigator screenOptions={{
+            headerStyle: {
+              backgroundColor: 'transparent',
+              // backgroundColor: COLORS.dp08 + '00',
+              // elevation: 0, shadowOpacity: 0,
+            }, //COLORS.dp08
+            headerTintColor: COLORS.textW0,
+            headerTitleStyle: { fontSize: 24 },
+            cardOverlayEnabled: true,
+            headerTransparent: true,
+          }}>
+            <Stack.Screen name="Home" component={MainScreen} options={{
+              headerLeft: () => (
+                < TouchableOpacity
+                  onPress={() => alert('This is a button!')}
+                  style={styles.button}
+                >
+                  <View style={styles.buttonLine} />
+                  <View style={styles.buttonLine} />
+                  <View style={styles.buttonLine} />
+                </TouchableOpacity>
+              ),
+            }} />
+            <Stack.Screen name="Groceries" component={GroceryListTab} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </View>
+    </Provider >
+  );
+}
+
+const styles = StyleSheet.create({
+  headerBackground: {
+    flex: 1,
+    height: 100,
+    width: 300,
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: 50,
+    height: 30,
+  },
+  buttonLine: {
+    width: 30,
+    height: 3,
+    backgroundColor: '#fffb',
+    borderRadius: 3,
+  },
+  blurredView: {
+    // For me android blur did not work until applying a background color:
+    backgroundColor: 'white',
+    width: 100, height: 100
+  },
+});
+
+export default App;
+
+// <View style={styles.container}>
+// <StatusBar translucent backgroundColor='#00000055' />
+// <MainScreen/>
+// </View>