135 lines
3.9 KiB
JavaScript
135 lines
3.9 KiB
JavaScript
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>
|