Cleanup

app.json

@@ -1,14 +1,14 @@
 {
   "expo": {
-    "name": "ohome-app",
-    "slug": "ohome-app",
+    "name": "Ohome",
+    "slug": "ohome",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/logo512.png",
     "splash": {
-      "image": "./assets/splash.png",
+      "image": "./assets/OhomeSplash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#f9f6ef"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
@@ -17,16 +17,20 @@
       "**/*"
     ],
     "ios": {
+      "bundleIdentifier": "codebenchers.ohome",
+      "buildNumber": "1.0.0",
       "supportsTablet": true
     },
     "android": {
+      "package": "codebenchers.ohome",
+      "versionCode": 1,
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#FFFFFF"
+        "foregroundImage": "./assets/logo512.png",
+        "backgroundColor": "#f9f6ef"
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
+      "favicon": "./assets/logo192.png"
     }
   }
 }

src/App.js

@@ -11,10 +11,11 @@ import Recipe from './pages/recipes/Recipe';
 
 import theme from './styles/theme';
 //dependencies
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 //navigation
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
+import { useNavigation } from '@react-navigation/core';
 
 import { useSelector } from 'react-redux';
 
@@ -38,11 +39,21 @@ function App() {
 					backgroundColor: theme.colors.dp00 + 'bb'
 				}, //COLORS.dp08
 				headerShadowVisible: false,
-				headerTintColor: theme.colors.textW0,
-				headerTitleStyle: { fontSize: 32 },
+				headerTintColor: theme.colors.textW1,
+				headerTitleStyle: { fontSize: 32, fontWeight: 'bold' },
 				cardOverlayEnabled: true,
 				headerTransparent: true,
-			}}>
+				headerLeft: () => {
+					const navigation = useNavigation()
+					return (
+					< MaterialCommunityIcons style={{marginLeft: -5, marginRight: 15, marginTop: 5}} name="arrow-left" size={40} color={theme.colors.textW2}
+						onPress={() => navigation.goBack()}
+					>
+					</MaterialCommunityIcons>)}
+			}}
+				options={{
+				}}>
+
 				<Stack.Screen name="Home" component={HomePage} options={{
 					headerLeft: () => (
 						< TouchableOpacity
@@ -54,7 +65,7 @@ function App() {
 				<Stack.Screen name="Groceries" component={GroceryListPage} />
 				<Stack.Screen name="Recipes" component={RecipePage} />
 				<Stack.Screen name="Recipe" component={Recipe} />
-				<Stack.Screen name="AddRecipe" component={AddRecipe} />
+				<Stack.Screen name="Add a recipe" component={AddRecipe} />
 			</Stack.Navigator>
 		</NavigationContainer>
 	);

src/components/GroceryList/groceries/List.js

@@ -48,9 +48,10 @@ export default React.memo((props) => {
     const [modalListVisible, setModalListVisible] = useState(false);
 
     const HandleAnimation = (event) => {
+        const height = event.nativeEvent.layout.height
         LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
-        setHeight(event.nativeEvent.layout.height)
-        // console.log("height changed: ", event.nativeEvent.layout.height)
+        setHeight(height)
+        // console.log(height)
     }
 
     const removeList = () => {

src/components/Home/GroceryCard.js

@@ -11,8 +11,7 @@ const GroceryCard = (props) => {
     return (
         <WrapperCard onPress={() => navigation.navigate('Groceries')}>
             <TextCard>Groceries</TextCard>
-            <IconCoffee/>
-            <View style={{ height: 100, width: '100%' }} />
+            <IconCoffee />
         </WrapperCard>
     )
 }

src/components/Home/styles/groceryCard.js

@@ -31,14 +31,19 @@ export const TextCard = styled(Text)`
     color: ${props => props.theme.colors.textW2};
     background-color: #0003;
     `
-const Coffee = () => <MaterialCommunityIcons name="coffee" color={theme.colors.primaryVar} size={50} />
 
-export const IconCoffee = styled(Coffee)`
-    margin-top: 15px;
+export const IconCoffee = styled(MaterialCommunityIcons).attrs({
+    name: 'coffee'
+})`
+    color: ${props => props.theme.colors.primaryVar};
+    font-size: 70px;
+    margin-top: 10px;
 `
 
-const Meal = () => <MaterialCommunityIcons name="noodles" color={theme.colors.primaryVar} size={50} />
-
-export const IconRecipe = styled(Meal)`
-    margin-top: 15px;
+export const IconRecipe = styled(MaterialCommunityIcons).attrs({
+    name: 'noodles'
+})`
+    color: ${props => props.theme.colors.primaryVar};
+    font-size: 70px;
+    margin-top: 10px;
 `

src/components/recipes/addRecipe/Buttons.js

@@ -17,7 +17,7 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 export const AddRecipeButton = () => {
     let navigation = useNavigation()
     return (
-        <WrapperAddRecipe onPress={() => navigation.navigate('AddRecipe', {id: ""})}>
+        <WrapperAddRecipe onPress={() => navigation.navigate('Add a recipe', {id: ""})}>
             <IconPlus />
         </WrapperAddRecipe>
     )
@@ -59,7 +59,7 @@ export const OptionsButtonRecipe = (props) => {
             <TouchableOpacity onPress={() => handleRemove()} >
                 <IconRemove />
             </TouchableOpacity>
-            <TouchableOpacity onPress={() => navigation.navigate("AddRecipe", { id: props.id })}  >
+            <TouchableOpacity onPress={() => navigation.navigate("Add a recipe", { id: props.id })}  >
                 <IconEdit />
             </TouchableOpacity>
         </WrapperOptions>

src/pages/recipes/Recipe.js

@@ -10,7 +10,7 @@ import { OptionsButtonRecipe, AddIngredientsButton } from "../../components/reci
 import { ScrollView, Text, View } from "react-native"
 import HeaderPadding from "../../components/Header"
 
-const Recipe = ({route, navigation}) => {
+const Recipe = ({ route, navigation }) => {
     const id = route.params.id
     const recipe = useSelector(state => findRecipeById(state, id))
     const IngredientList = recipe.ingredients.map((ingredient, index) => {
@@ -28,17 +28,17 @@ const Recipe = ({route, navigation}) => {
 
     React.useLayoutEffect(() => {
         navigation.setOptions({
-          headerRight: () => (
-            <OptionsButtonRecipe id={id}  />
-          ),
+            headerRight: () => (
+                <OptionsButtonRecipe id={id} />
+            ),
         });
-      }, [navigation]);
+    }, [navigation]);
 
     return (
         <>
-            <HeaderPadding/>
-            {recipe.image != "" && <StyledImage source={{ uri: recipe.image }} />}
             <ScrollView>
+                <HeaderPadding />
+                {recipe.image != "" && <StyledImage source={{ uri: recipe.image }} />}
                 <Wrapper >
                     <WrapperRecipe>
                         <Title>{recipe.name}</Title>