├── .DS_Store
├── .babelrc
├── .gitignore
├── .watchmanconfig
├── App.js
├── README.md
├── app.json
├── assets
    ├── .DS_Store
    ├── dishes
    │   ├── Margherita.jpg
    │   ├── PalakBiryani.jpeg
    │   └── PaneerDosa.jpg
    ├── empty-bag.png
    ├── icon.png
    ├── restaurants
    │   ├── Dosa.jpeg
    │   ├── Pizza.jpeg
    │   └── VegBiryani.jpeg
    ├── shopping-bag.png
    ├── splash.png
    └── thumbs
    │   ├── Dosa.jpeg
    │   ├── Margherita.jpg
    │   ├── PalakBiryani.jpeg
    │   ├── PaneerDosa.jpg
    │   ├── Pizza.jpeg
    │   └── VegBiryani.jpeg
├── package-lock.json
├── package.json
└── src
    ├── api
        └── restaurants.json
    ├── components
        ├── Cart.js
        ├── Dishes.js
        ├── ListItem.js
        ├── RestaurantItem.js
        ├── Restaurants.js
        └── common
        │   ├── CartButton.js
        │   ├── CustomText.js
        │   └── EmptyCart.js
    ├── food-data.json
    ├── router.js
    └── utils
        └── constants.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/.DS_Store


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["babel-preset-expo"],
3 |   "env": {
4 |     "development": {
5 |       "plugins": ["transform-react-jsx-source"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | .expo/*
3 | npm-debug.*
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { StyleSheet, Text, View, StatusBar } from "react-native";
 3 | import RootStack from "./src/router";
 4 | 
 5 | class App extends React.Component {
 6 |   render() {
 7 |     return <RootStack />;
 8 |   }
 9 | }
10 | 
11 | export default App;
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Native Food Delivery App
 2 | 
 3 | A simple food ordering app built using React Native
 4 | 
 5 | ![React Native Food Delivery App](https://res.cloudinary.com/sivadass/image/upload/v1535197090/gifs/react-native-food-delivery-app.gif)
 6 | 
 7 | **Kindly Note:**
 8 | The project mentioned below is my own work and represents a limited food delivery solution. While it demonstrates certain functionalities, it is not a comprehensive or fully developed platform. For a complete food delivery solution, I have collaborated with someone as an affiliate partner who offers a more comprehensive service. If you are interested in exploring a complete food delivery platform, please visit the following link:
 9 | 
10 | [https://enatega.com?aff=GWMyb](https://enatega.com?aff=GWMyb).
11 | 
12 | ### Live Demo
13 | 
14 | Just install this APK on your android and paly with it:
15 | [Download Link here](https://exp-shell-app-assets.s3.us-west-1.amazonaws.com/android/%40sivadass/foodShop-5eeadd13529fd0ddc7d5d8c2333aac03-signed.apk)
16 | 
17 | ### Installation
18 | 
19 | ```
20 | git clone git@github.com:sivadass/react-native-food-delivery.git
21 | npm install -g expo
22 | npm install
23 | ```
24 | 
25 | ### Development
26 | 
27 | ```
28 | npm start
29 | ```
30 | 
31 | ### Production
32 | 
33 | To export .APK for Android or .IPA for iOS
34 | 
35 | ```
36 | exp build:android
37 | exp build:ios
38 | ```
39 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "FoodShop",
 4 |     "description": "This project is really great.",
 5 |     "slug": "foodshop",
 6 |     "privacy": "public",
 7 |     "sdkVersion": "29.0.0",
 8 |     "platforms": ["ios", "android"],
 9 |     "version": "1.0.0",
10 |     "orientation": "portrait",
11 |     "icon": "./assets/icon.png",
12 |     "splash": {
13 |       "image": "./assets/splash.png",
14 |       "resizeMode": "contain",
15 |       "backgroundColor": "#ef6136"
16 |     },
17 |     "updates": {
18 |       "fallbackToCacheTimeout": 0
19 |     },
20 |     "assetBundlePatterns": ["**/*"],
21 |     "ios": {
22 |       "supportsTablet": true
23 |     },
24 |     "android": {
25 |       "package": "com.sivadass.foodshop"
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/.DS_Store


--------------------------------------------------------------------------------
/assets/dishes/Margherita.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/dishes/Margherita.jpg


--------------------------------------------------------------------------------
/assets/dishes/PalakBiryani.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/dishes/PalakBiryani.jpeg


--------------------------------------------------------------------------------
/assets/dishes/PaneerDosa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/dishes/PaneerDosa.jpg


--------------------------------------------------------------------------------
/assets/empty-bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/empty-bag.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/icon.png


--------------------------------------------------------------------------------
/assets/restaurants/Dosa.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/restaurants/Dosa.jpeg


--------------------------------------------------------------------------------
/assets/restaurants/Pizza.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/restaurants/Pizza.jpeg


--------------------------------------------------------------------------------
/assets/restaurants/VegBiryani.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/restaurants/VegBiryani.jpeg


--------------------------------------------------------------------------------
/assets/shopping-bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/shopping-bag.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/splash.png


--------------------------------------------------------------------------------
/assets/thumbs/Dosa.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/thumbs/Dosa.jpeg


--------------------------------------------------------------------------------
/assets/thumbs/Margherita.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/thumbs/Margherita.jpg


--------------------------------------------------------------------------------
/assets/thumbs/PalakBiryani.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/thumbs/PalakBiryani.jpeg


--------------------------------------------------------------------------------
/assets/thumbs/PaneerDosa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/thumbs/PaneerDosa.jpg


--------------------------------------------------------------------------------
/assets/thumbs/Pizza.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/thumbs/Pizza.jpeg


--------------------------------------------------------------------------------
/assets/thumbs/VegBiryani.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sivadass/react-native-food-delivery/2af7692d70d253a0bfb7b51ffc5a47873d4c4920/assets/thumbs/VegBiryani.jpeg


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "food-shop",
 3 |   "main": "node_modules/expo/AppEntry.js",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "android": "expo start --android",
 8 |     "ios": "expo start --ios",
 9 |     "eject": "expo eject"
10 |   },
11 |   "dependencies": {
12 |     "expo": "^29.0.0",
13 |     "react": "16.3.1",
14 |     "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
15 |     "react-navigation": "^2.11.2"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/api/restaurants.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "1",
 4 |     "name": "Adyar Ananda Bhavan",
 5 |     "isVegetarian": true,
 6 |     "cuisine": "South Indian",
 7 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181121/dummy-products/restaurants/adayar-anandha-bhavan.jpg",
 8 |     "rating": 4,
 9 |     "location": "Velacherry"
10 |   },
11 |   {
12 |     "id": "2",
13 |     "name": "Anjappar",
14 |     "isVegetarian": false,
15 |     "cuisine": "South Indian",
16 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181121/dummy-products/restaurants/anjappar.jpg",
17 |     "rating": 3,
18 |     "location": "Okkiyampet"
19 |   },
20 |   {
21 |     "id": "3",
22 |     "name": "Buhari Hotel",
23 |     "isVegetarian": false,
24 |     "cuisine": "North Indian",
25 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181119/dummy-products/restaurants/buhari.jpg",
26 |     "rating": 4,
27 |     "location": "Karapakkam"
28 |   },
29 |   {
30 |     "id": "4",
31 |     "name": "Sree Gupta Bhavan",
32 |     "isVegetarian": true,
33 |     "cuisine": "North Indian",
34 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181121/dummy-products/restaurants/gupta-bhavan.jpg",
35 |     "rating": 5,
36 |     "location": "SRP Tools"
37 |   },
38 |   {
39 |     "id": "5",
40 |     "name": "Hot Chips",
41 |     "isVegetarian": true,
42 |     "cuisine": "South Indian",
43 |     "image": "http://res.cloudinary.com/sivadass/image/upload/v1535181126/dummy-products/restaurants/hot-chips.jpg",
44 |     "rating": 5,
45 |     "location": "Thiruvanmiyur"
46 |   },
47 |   {
48 |     "id": "6",
49 |     "name": "Paradise Briyani",
50 |     "isVegetarian": false,
51 |     "cuisine": "South Indian",
52 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181121/dummy-products/restaurants/paradise.jpg",
53 |     "rating": 4,
54 |     "location": "SRP Tools"
55 |   },
56 |   {
57 |     "id": "7",
58 |     "name": "Saravana Bhavan",
59 |     "isVegetarian": true,
60 |     "cuisine": "South Indian",
61 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181121/dummy-products/restaurants/saravana-bhavan.jpg",
62 |     "rating": 5,
63 |     "location": "Kandan Chavadi"
64 |   },
65 |   {
66 |     "id": "8",
67 |     "name": "Dindigul Thalappakatti",
68 |     "isVegetarian": false,
69 |     "cuisine": "South Indian",
70 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181123/dummy-products/restaurants/thalapakatti.jpg",
71 |     "rating": 3,
72 |     "location": "Karapakkam"
73 |   },
74 |   {
75 |     "id": "9",
76 |     "name": "Thambi Vilas",
77 |     "isVegetarian": false,
78 |     "cuisine": "South Indian",
79 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181123/dummy-products/restaurants/thambi-vilas.jpg",
80 |     "rating": 5,
81 |     "location": "Okkiyampet"
82 |   },
83 |   {
84 |     "id": "10",
85 |     "name": "Vasantha Bhavan",
86 |     "isVegetarian": true,
87 |     "cuisine": "South Indian",
88 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1535181123/dummy-products/restaurants/vasantha-bhavan.jpg",
89 |     "rating": 4,
90 |     "location": "Adyar"
91 |   }
92 | ]
93 | 


--------------------------------------------------------------------------------
/src/components/Cart.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   StyleSheet,
 4 |   Text,
 5 |   View,
 6 |   FlatList,
 7 |   Image,
 8 |   TouchableOpacity
 9 | } from "react-native";
10 | 
11 | import EmptyCart from "./common/EmptyCart";
12 | 
13 | export default class Cart extends React.Component {
14 |   constructor(props) {
15 |     super(props);
16 |   }
17 |   handleNaviagation = () => {
18 |     this.props.navigation.navigate("Restaurants");
19 |   };
20 | 
21 |   render() {
22 |     return <EmptyCart />;
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/Dishes.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   StyleSheet,
 4 |   Text,
 5 |   View,
 6 |   FlatList,
 7 |   Image,
 8 |   TouchableOpacity,
 9 |   Button
10 | } from "react-native";
11 | import Constants from "../utils/constants";
12 | import foodData from "../food-data.json";
13 | import ListItem from "./ListItem";
14 | import CartButton from "./common/CartButton";
15 | 
16 | export default class Dishes extends React.Component {
17 |   constructor(props) {
18 |     super(props);
19 |   }
20 | 
21 |   static navigationOptions = ({ navigation }) => {
22 |     return {
23 |       headerTitle: "Menu",
24 |       headerStyle: {
25 |         elevation: 0,
26 |         shadowOpacity: 0
27 |       },
28 |       headerRight: (
29 |         <CartButton
30 |           onPress={() => {
31 |             navigation.navigate("Cart");
32 |           }}
33 |         />
34 |       )
35 |     };
36 |   };
37 | 
38 |   handleNaviagation = () => {
39 |     this.props.navigation.navigate("Dishes");
40 |   };
41 |   render() {
42 |     return (
43 |       <View style={styles.container}>
44 |         <FlatList
45 |           data={foodData}
46 |           keyExtractor={item => item.id}
47 |           renderItem={({ item }) => (
48 |             <ListItem
49 |               name={item.name}
50 |               image={item.image}
51 |               cuisine={item.cuisine}
52 |               price={item.price}
53 |               label={item.label}
54 |               isVegetarian={item.isVegetarian}
55 |               handleNaviagation={this.handleNaviagation}
56 |             />
57 |           )}
58 |         />
59 |       </View>
60 |     );
61 |   }
62 | }
63 | 
64 | const styles = StyleSheet.create({
65 |   container: {
66 |     width: "100%",
67 |     marginTop: 8,
68 |     marginBottom: 8
69 |   }
70 | });
71 | 


--------------------------------------------------------------------------------
/src/components/ListItem.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   StyleSheet,
  4 |   Text,
  5 |   View,
  6 |   Image,
  7 |   Button,
  8 |   TouchableOpacity
  9 | } from "react-native";
 10 | 
 11 | export default class ListItem extends React.Component {
 12 |   constructor(props) {
 13 |     super(props);
 14 |     this.state = {
 15 |       isClicked: false
 16 |     };
 17 |   }
 18 |   handleClick = () => {
 19 |     this.setState({
 20 |       isClicked: !this.state.isClicked
 21 |     });
 22 |     this.props.handleNaviagation();
 23 |   };
 24 |   render() {
 25 |     return (
 26 |       <TouchableOpacity onPress={this.handleClick}>
 27 |         <View
 28 |           //elevation={2}
 29 |           style={{
 30 |             flex: 1,
 31 |             flexDirection: "row",
 32 |             backgroundColor: "#ffffff",
 33 |             marginHorizontal: 24,
 34 |             marginVertical: 8,
 35 |             borderRadius: 4,
 36 |             shadowOpacity: 0.1,
 37 |             shadowRadius: 2,
 38 |             shadowOffset: {
 39 |               height: 1,
 40 |               width: 1
 41 |             }
 42 |           }}
 43 |         >
 44 |           <Image
 45 |             style={{
 46 |               width: 108,
 47 |               height: 108,
 48 |               borderTopLeftRadius: 4,
 49 |               borderTopRightRadius: 0,
 50 |               borderBottomRightRadius: 0,
 51 |               borderBottomLeftRadius: 4
 52 |             }}
 53 |             source={{ uri: this.props.image }}
 54 |           />
 55 |           <View
 56 |             style={{
 57 |               padding: 16
 58 |             }}
 59 |           >
 60 |             <Text
 61 |               style={{
 62 |                 fontSize: 18,
 63 |                 color: "#333"
 64 |               }}
 65 |             >
 66 |               {this.props.name}
 67 |             </Text>
 68 |             <Text
 69 |               style={{
 70 |                 fontSize: 14,
 71 |                 color: "#666"
 72 |               }}
 73 |             >
 74 |               {this.props.cuisine},{" "}
 75 |               {this.props.isVegetarian ? (
 76 |                 <Text style={{ color: "#4caf50", fontWeight: "bold" }}>
 77 |                   Veg
 78 |                 </Text>
 79 |               ) : (
 80 |                 <Text style={{ color: "#a92319", fontWeight: "bold" }}>
 81 |                   Non-Veg
 82 |                 </Text>
 83 |               )}
 84 |             </Text>
 85 |             <Text
 86 |               style={{
 87 |                 fontSize: 14,
 88 |                 color: "#999"
 89 |               }}
 90 |             >
 91 |               {this.props.label}
 92 |             </Text>
 93 |             <View
 94 |               style={{
 95 |                 flex: 1,
 96 |                 flexDirection: "row",
 97 |                 justifyContent: "space-between"
 98 |                 //width: "100%"
 99 |               }}
100 |             >
101 |               <Text
102 |                 style={{
103 |                   fontSize: 21,
104 |                   fontWeight: "bold",
105 |                   color: "#ef6136"
106 |                 }}
107 |               >
108 |                 {this.props.price}
109 |               </Text>
110 |               {/* <Button
111 |                 onPress={e => alert("Hey")}
112 |                 title="ADD"
113 |                 style={{
114 |                   backgroundColor: "4099ff",
115 |                   color: "#fff",
116 |                   paddingLeft: 16,
117 |                   paddingRight: 16,
118 |                   paddingTop: 8,
119 |                   paddingBottom: 8
120 |                 }}
121 |               /> */}
122 |             </View>
123 |           </View>
124 |         </View>
125 |       </TouchableOpacity>
126 |     );
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/src/components/RestaurantItem.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   StyleSheet,
  4 |   Text,
  5 |   View,
  6 |   FlatList,
  7 |   Image,
  8 |   Button,
  9 |   TouchableOpacity
 10 | } from "react-native";
 11 | import CustomText from "../components/common/CustomText";
 12 | import Constants from "../utils/constants";
 13 | 
 14 | export default class RestaurantItem extends React.Component {
 15 |   constructor(props) {
 16 |     super(props);
 17 |     this.state = {
 18 |       isClicked: false
 19 |     };
 20 |   }
 21 |   handleClick = () => {
 22 |     this.setState({
 23 |       isClicked: !this.state.isClicked
 24 |     });
 25 |     this.props.handleNaviagation();
 26 |   };
 27 |   render() {
 28 |     return (
 29 |       <TouchableOpacity onPress={this.handleClick}>
 30 |         <View
 31 |           style={{
 32 |             marginHorizontal: 24,
 33 |             marginVertical: 8,
 34 |             borderRadius: 6,
 35 |             height: 160
 36 |           }}
 37 |         >
 38 |           <Image
 39 |             style={{
 40 |               backgroundColor: "#ccc",
 41 |               flex: 1,
 42 |               position: "absolute",
 43 |               width: "100%",
 44 |               height: "100%",
 45 |               justifyContent: "center",
 46 |               borderRadius: 6
 47 |             }}
 48 |             source={{ uri: this.props.image }}
 49 |           />
 50 |           <View
 51 |             style={{
 52 |               padding: 16,
 53 |               position: "absolute",
 54 |               width: "100%",
 55 |               height: "100%",
 56 |               bottom: 0,
 57 |               backgroundColor: "rgba(0, 0, 0, 0.55)",
 58 |               borderRadius: 6
 59 |             }}
 60 |           >
 61 |             <Text
 62 |               style={{
 63 |                 fontSize: 32,
 64 |                 fontWeight: "700",
 65 |                 color: "#ffffff"
 66 |               }}
 67 |             >
 68 |               {this.props.name}
 69 |             </Text>
 70 |             <Text
 71 |               style={{
 72 |                 fontSize: 14,
 73 |                 color: "#ffffff"
 74 |               }}
 75 |             >
 76 |               {this.props.cuisine},{" "}
 77 |               {this.props.isVegetarian ? (
 78 |                 <Text style={{ color: "#4caf50", fontWeight: "bold" }}>
 79 |                   Veg
 80 |                 </Text>
 81 |               ) : (
 82 |                 <Text style={{ color: "#a92319", fontWeight: "bold" }}>
 83 |                   Non-Veg
 84 |                 </Text>
 85 |               )}
 86 |             </Text>
 87 |             <Text
 88 |               style={{
 89 |                 fontSize: 14,
 90 |                 color: "#ffffff"
 91 |               }}
 92 |             >
 93 |               {this.props.location}
 94 |             </Text>
 95 |           </View>
 96 |         </View>
 97 |       </TouchableOpacity>
 98 |     );
 99 |   }
100 | }
101 | 
102 | const styles = StyleSheet.create({});
103 | 


--------------------------------------------------------------------------------
/src/components/Restaurants.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   StyleSheet,
 4 |   Text,
 5 |   View,
 6 |   FlatList,
 7 |   Image,
 8 |   TouchableOpacity
 9 | } from "react-native";
10 | import restaurantsData from "../api/restaurants.json";
11 | import RestaurantItem from "./RestaurantItem";
12 | import CartButton from "./common/CartButton";
13 | 
14 | export default class Restaurants extends React.Component {
15 |   constructor(props) {
16 |     super(props);
17 |   }
18 |   static navigationOptions = ({ navigation }) => {
19 |     return {
20 |       headerTitle: "Restaurants",
21 |       headerStyle: {
22 |         elevation: 0,
23 |         shadowOpacity: 0
24 |       },
25 |       headerRight: (
26 |         <CartButton
27 |           onPress={() => {
28 |             navigation.navigate("Cart");
29 |           }}
30 |         />
31 |       )
32 |     };
33 |   };
34 |   handleNaviagation = () => {
35 |     this.props.navigation.navigate("Dishes");
36 |   };
37 |   render() {
38 |     return (
39 |       <View style={styles.container}>
40 |         <FlatList
41 |           data={restaurantsData}
42 |           keyExtractor={item => item.id}
43 |           renderItem={({ item }) => (
44 |             <RestaurantItem
45 |               name={item.name}
46 |               image={item.image}
47 |               cuisine={item.cuisine}
48 |               location={item.location}
49 |               isVegetarian={item.isVegetarian}
50 |               handleNaviagation={this.handleNaviagation}
51 |             />
52 |           )}
53 |         />
54 |       </View>
55 |     );
56 |   }
57 | }
58 | 
59 | const styles = StyleSheet.create({
60 |   container: {
61 |     width: "100%",
62 |     marginTop: 8,
63 |     marginBottom: 8
64 |   }
65 | });
66 | 


--------------------------------------------------------------------------------
/src/components/common/CartButton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Image, Text, View, TouchableOpacity } from "react-native";
 3 | 
 4 | class CartButton extends React.Component {
 5 |   constructor(props) {
 6 |     super(props);
 7 |     this.handleNavigate = this.handleNavigate.bind(this);
 8 |   }
 9 | 
10 |   handleNavigate = () => {
11 |     this.props.onPress();
12 |   };
13 | 
14 |   render() {
15 |     return (
16 |       <TouchableOpacity onPress={this.handleNavigate}>
17 |         <Image
18 |           style={{ width: 32, height: 32, marginRight: 16 }}
19 |           source={require("../../../assets/shopping-bag.png")}
20 |         />
21 |         <View
22 |           style={{
23 |             height: 20,
24 |             width: 20,
25 |             borderRadius: 10,
26 |             backgroundColor: "#ef6136",
27 |             position: "absolute",
28 |             right: 8,
29 |             top: 2
30 |           }}
31 |         >
32 |           <Text
33 |             style={{
34 |               color: "#fff",
35 |               fontSize: 13,
36 |               textAlign: "center",
37 |               lineHeight: 20
38 |             }}
39 |           >
40 |             12
41 |           </Text>
42 |         </View>
43 |       </TouchableOpacity>
44 |     );
45 |   }
46 | }
47 | 
48 | export default CartButton;
49 | 


--------------------------------------------------------------------------------
/src/components/common/CustomText.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Text } from "react-native";
 3 | 
 4 | class CustomText extends React.Component {
 5 |   render() {
 6 |     return <Text style={{ fontSize: 13 }}>{this.props.children}</Text>;
 7 |   }
 8 | }
 9 | 
10 | export default CustomText;
11 | 


--------------------------------------------------------------------------------
/src/components/common/EmptyCart.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { StyleSheet, Text, View, Image } from "react-native";
 3 | 
 4 | class EmptyCart extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <View style={styles.container}>
 8 |         <View>
 9 |           <Image
10 |             source={require("../../../assets/empty-bag.png")}
11 |             style={{ width: 150, height: 150, marginBottom: 12 }}
12 |           />
13 |           <Text
14 |             style={{
15 |               textAlign: "center",
16 |               color: "#ef6136",
17 |               fontSize: 18,
18 |               opacity: 0.55
19 |             }}
20 |           >
21 |             Cart is empty!
22 |           </Text>
23 |           <EmptyCart />
24 |         </View>
25 |       </View>
26 |     );
27 |   }
28 | }
29 | 
30 | const styles = StyleSheet.create({
31 |   container: {
32 |     backgroundColor: "#fff",
33 |     width: "100%",
34 |     height: "100%",
35 |     flex: 1,
36 |     justifyContent: "center",
37 |     alignItems: "center"
38 |   },
39 | 
40 |   title: {
41 |     fontSize: 24,
42 |     color: "#4099ff",
43 |     margin: 8
44 |   }
45 | });
46 | 
47 | export default EmptyCart;
48 | 


--------------------------------------------------------------------------------
/src/food-data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "id": "1",
  4 |     "name": "Idli",
  5 |     "isVegetarian": true,
  6 |     "cuisine": "South Indian",
  7 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611354/dummy-products/food/idli.jpg",
  8 |     "price": "₹ 60",
  9 |     "label": "4 pieces",
 10 |     "rating": 4
 11 |   },
 12 |   {
 13 |     "id": "2",
 14 |     "name": "Dosa",
 15 |     "isVegetarian": true,
 16 |     "cuisine": "South Indian",
 17 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611353/dummy-products/food/dosa.jpg",
 18 |     "price": "₹ 75",
 19 |     "label": "1 piece",
 20 |     "rating": 5
 21 |   },
 22 |   {
 23 |     "id": "3",
 24 |     "name": "Puri",
 25 |     "isVegetarian": true,
 26 |     "cuisine": "South Indian",
 27 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611355/dummy-products/food/puri.jpg",
 28 |     "price": "₹ 45",
 29 |     "label": "2 pieces",
 30 |     "rating": 3
 31 |   },
 32 |   {
 33 |     "id": "4",
 34 |     "name": "Pongal",
 35 |     "isVegetarian": true,
 36 |     "cuisine": "South Indian",
 37 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611355/dummy-products/food/pongal.jpg",
 38 |     "price": "₹ 45",
 39 |     "label": "1 plate",
 40 |     "rating": 4
 41 |   },
 42 |   {
 43 |     "id": "5",
 44 |     "name": "Roti",
 45 |     "isVegetarian": true,
 46 |     "cuisine": "North Indian",
 47 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611356/dummy-products/food/roti.jpg",
 48 |     "price": "₹ 30",
 49 |     "label": "2 pieces",
 50 |     "rating": 5
 51 |   },
 52 |   {
 53 |     "id": "6",
 54 |     "name": "Paneer Butter Masala",
 55 |     "isVegetarian": true,
 56 |     "cuisine": "North Indian",
 57 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611354/dummy-products/food/paneer-butter-masala.jpg",
 58 |     "price": "₹ 60",
 59 |     "label": "1 bowl",
 60 |     "rating": 4
 61 |   },
 62 |   {
 63 |     "id": "7",
 64 |     "name": "Vada",
 65 |     "isVegetarian": true,
 66 |     "cuisine": "South Indian",
 67 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611356/dummy-products/food/vada.jpg",
 68 |     "price": "₹ 30",
 69 |     "label": "2 pieces",
 70 |     "rating": 5
 71 |   },
 72 |   {
 73 |     "id": "8",
 74 |     "name": "Parotta",
 75 |     "isVegetarian": true,
 76 |     "cuisine": "South Indian",
 77 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611354/dummy-products/food/parotta.jpg",
 78 |     "price": "₹ 40",
 79 |     "label": "2 pieces",
 80 |     "rating": 2
 81 |   },
 82 |   {
 83 |     "id": "9",
 84 |     "name": "Chicken Briyani",
 85 |     "isVegetarian": false,
 86 |     "cuisine": "South Indian",
 87 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611353/dummy-products/food/chicken-briyani.jpg",
 88 |     "price": "₹ 210",
 89 |     "label": "1/2 plate",
 90 |     "rating": 5
 91 |   },
 92 |   {
 93 |     "id": "10",
 94 |     "name": "Mutton Briyani",
 95 |     "isVegetarian": false,
 96 |     "cuisine": "South Indian",
 97 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611354/dummy-products/food/mutton-briyani.jpg",
 98 |     "price": "₹ 240",
 99 |     "label": "1/2 plate",
100 |     "rating": 4
101 |   },
102 |   {
103 |     "id": "11",
104 |     "name": "Fried Chicken Noodles",
105 |     "isVegetarian": false,
106 |     "cuisine": "Chinese",
107 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611355/dummy-products/food/fried-noodles.jpg",
108 |     "price": "₹ 40",
109 |     "label": "1 plate",
110 |     "rating": 3
111 |   },
112 |   {
113 |     "id": "12",
114 |     "name": "Grilled Chicken",
115 |     "isVegetarian": false,
116 |     "cuisine": "Arab",
117 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611353/dummy-products/food/grilled-chicken.jpg",
118 |     "price": "₹ 180",
119 |     "label": "1/2 plate",
120 |     "rating": 5
121 |   },
122 |   {
123 |     "id": "13",
124 |     "name": "Tandoori Chicken",
125 |     "isVegetarian": false,
126 |     "cuisine": "Arab",
127 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611356/dummy-products/food/tandoori-chicken.jpg",
128 |     "price": "₹ 175",
129 |     "label": "1/2 plate",
130 |     "rating": 4
131 |   },
132 |   {
133 |     "id": "14",
134 |     "name": "Chicken Lollypop",
135 |     "isVegetarian": false,
136 |     "cuisine": "Chinese",
137 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611355/dummy-products/food/chicken-lollipop.jpg",
138 |     "price": "₹ 210",
139 |     "label": "1 plate",
140 |     "rating": 3
141 |   },
142 |   {
143 |     "id": "15",
144 |     "name": "Chicken 65",
145 |     "isVegetarian": false,
146 |     "cuisine": "South Indian",
147 |     "image": "https://res.cloudinary.com/sivadass/image/upload/v1534611353/dummy-products/food/chicken-65.jpg",
148 |     "price": "₹ 190",
149 |     "label": "1 plate",
150 |     "rating": 4
151 |   }
152 | ]
153 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button, TouchableOpacity, Text, Image } from "react-native";
 3 | import { createStackNavigator } from "react-navigation";
 4 | import RestaurantsScreen from "./components/Restaurants";
 5 | import DishesScreen from "./components/Dishes";
 6 | import CartScreen from "./components/Cart";
 7 | 
 8 | const RootStack = createStackNavigator({
 9 |   Restaurants: {
10 |     screen: RestaurantsScreen,
11 |     navigationOptions: {
12 |       title: "Food Shop"
13 |     }
14 |   },
15 |   Dishes: {
16 |     screen: DishesScreen,
17 |     navigationOptions: {
18 |       title: "Dishes"
19 |     }
20 |   },
21 |   Cart: {
22 |     screen: CartScreen,
23 |     navigationOptions: {
24 |       title: "Cart",
25 |       headerStyle: {
26 |         elevation: 0,
27 |         shadowOpacity: 0
28 |       }
29 |     }
30 |   }
31 | });
32 | 
33 | export default RootStack;
34 | 


--------------------------------------------------------------------------------
/src/utils/constants.js:
--------------------------------------------------------------------------------
 1 | export default class Constants {
 2 |   static RESTAURANT_ICONS = {
 3 |     dosa: require(`../../assets/restaurants/Dosa.jpeg`),
 4 |     pizza: require(`../../assets/restaurants/Pizza.jpeg`),
 5 |     vegBriyani: require(`../../assets/restaurants/VegBiryani.jpeg`)
 6 |   };
 7 | 
 8 |   static DISH_ICONS = {
 9 |     paneerDosa: require(`../../assets/dishes/PaneerDosa.jpg`),
10 |     palakBiryani: require(`../../assets/dishes/PalakBiryani.jpeg`),
11 |     margherita: require(`../../assets/dishes/Margherita.jpg`)
12 |   };
13 | }
14 | 


--------------------------------------------------------------------------------