styling and navigation meals details

.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.js

@@ -0,0 +1,31 @@
+import { StatusBar } from "expo-status-bar"
+import { StyleSheet, Text, View } from "react-native"
+import CategoriesScreen from "./screens/CategoriesScreen"
+import { NavigationContainer } from "@react-navigation/native"
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import MealsOverViewScreen from "./screens/MealsOverViewScreen"
+
+const Stack = createNativeStackNavigator()
+
+export default function App() {
+  return (
+    <>
+      <StatusBar style="dark" />
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen name="MealsCategories" component={CategoriesScreen} />
+          <Stack.Screen name="MealsOverview" component={MealsOverViewScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+})

app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "RNCourse",
+    "slug": "RNCourse",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "backgroundColor" :"#264653",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/CategoryGridTile.js

@@ -0,0 +1,56 @@
+import { useNavigation } from "@react-navigation/native"
+import { View, StyleSheet, Pressable, Text, Platform } from "react-native"
+
+const CategoryGridTile = ({ title, color, onPress }) => {
+  const navigation = useNavigation()
+  return (
+    <View style={styles.gridItem}>
+      <Pressable
+        android_ripple={{ color: "#ccc" }}
+        style={({ pressed }) => [
+          styles.btnStyle,
+          pressed ? styles.btnPressed : null,
+        ]}
+        onPress={onPress}
+      >
+        <View style={[styles.innerContainer, { backgroundColor: color }]}>
+          <Text style={styles.title}>{title}</Text>
+        </View>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  gridItem: {
+    flex: 1,
+    margin: 16,
+    height: 150,
+    borderRadius: 8,
+    elevation: 8,
+    shadowColor: "black",
+    backgroundColor: "white",
+    shadowOpacity: 0.25,
+    shadowOffset: { width: 0, height: 2 },
+    overflow: Platform.OS === "android" ? "hidden" : "visible",
+  },
+  innerContainer: {
+    flex: 1,
+    padding: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 8,
+  },
+  btnStyle: {
+    flex: 1,
+  },
+  btnPressed: {
+    opacity: 0.5,
+  },
+  title: {
+    fontWeight: "bold",
+    fontSize: 18,
+  },
+})
+
+export default CategoryGridTile

components/MealItem.js

@@ -0,0 +1,61 @@
+import React from "react"
+import { View, StyleSheet, Text, Pressable, Image, Platform } from "react-native"
+
+const MealItem = ({ title,imageUrl,duration,complexity,affordability }) => {
+  return (
+    <View style={styles.mealItem}>
+      <Pressable 
+      android_ripple={{color:"#ccc"}}
+      style={({ pressed }) => 
+        pressed ? styles.btnPressed : null
+      }
+      >
+        <View >
+            <Image source={{uri:imageUrl }} style={styles.image} />
+          <Text style={styles.title} > {title}</Text>
+        </View>
+        <View style={styles.details} >
+            <Text style={styles.detailsItem} >{duration} min </Text>
+            <Text style={styles.detailsItem}>{complexity.toUpperCase()} </Text>
+            <Text style={styles.detailsItem}>{affordability.toUpperCase()} </Text>
+        </View>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+    mealItem :{
+        margin : 16,
+        borderRadius : 8,
+        backgroundColor :"white",
+        overflow : "hidden",
+        elevation : 4,
+        overflow: Platform.OS === "android" ? "hidden" : "visible",
+    },
+    image :{
+        width : "100%",
+        height : 200
+    },
+    title :{
+        fontWeight :"bold",
+        textAlign :"center",
+        fontSize : 18,
+        margin :8
+    },
+    details:{
+        flexDirection : "row",
+        alignItems :"center",
+        justifyContent :"center",
+        padding : 8
+    },
+    detailsItem :{
+        marginHorizontal :4,
+        fontSize :12
+    },
+    btnPressed:{
+        opacity: 0.5,
+    }
+})
+
+export default MealItem