Food order app UI template React native

Here's a comprehensive tutorial on using the Food Order App UI Template in React Native. We'll start with a brief introduction, and then dive into the steps and code examples.

Introduction

The Food Order App UI Template is a versatile and customizable React Native UI template designed to help developers quickly build a food delivery or ordering app. It comes with a clean, user-friendly design and a simple navigation system. The app is divided into three main sections: Home, Catalog, and Cart.

Using this template, you'll be able to create an app that allows users to browse through a list of menu items, add or remove items from their cart, and checkout. We'll walk you through every step of the process, from setting up the environment to customizing the layout and functionality.

Hardware and Software Requirements

• React Native version: ^0.68.2
• Node.js and npm (or yarn): installed on your system
• Xcode (for iOS) or Android Studio (for Android): downloaded and installed on your system
• A code editor or IDE of your choice (e.g., Visual Studio Code, IntelliJ)
• A device or simulator for testing (easiest with a physical Android device or an iOS emulator)

Step 1: Setting up the environment

1. Install the Food Order App UI Template using npm or yarn: npm install food-order-app-ui-template (or yarn add food-order-app-ui-template)
2. Create a new React Native project with the template: npx react-native init <project-name> --template food-order-app-ui-template
3. Open your project in your preferred code editor or IDE.
4. Install any additional packages required by the template:

npm install --save react-native-svg
npm install --save-react-native-gesture-handler react-native-reanimated
npm install --save @react-navigation/native @react-navigation/stack

1. Run the development server: npx react-native start
2. Open the app on an emulator or physical device for testing.

Step 2: Customizing the layout

1. Let's start by customizing the layout. Open App.js and you'll see the initial set up of the app with three screens: Home, Catalog, and Cart.

In App.js, remove the Stack.Navigator component and replace it with the following code:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeStack from './HomeStack';
import CatalogStack from './CatalogStack';
import CartStack from './CartStack';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Catalog" component={CatalogStack} />
        <Tab.Screen name="Cart" component={CartStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

This code sets up the bottom tab navigator with Home, Catalog, and Cart screens.

1. Add icons to the tab icons: Open Tab Navigation.js and update the Tab.Navigator to look like this:

import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function TabNavigation() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({ headerShown: false })}>
      <Tab.Screen
        name="Home"
        component={HomeStack}
        options={() => ({
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name="home"
              size={24}
              color={focused? colors.primary : colors.gray}
            />
          ),
        })}
      />
      <Tab.Screen
        name="Catalog"
        component={CatalogStack}
        options={() => ({
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name="list"
              size={24}
              color={focused? colors.primary : colors.gray}
            />
          ),
        })}
      />
      <Tab.Screen
        name="Cart"
        component={CartStack}
        options={() => ({
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name="cart"
              size={24}
              color={focused? colors.primary : colors.gray}
            />
          ),
        })}
      />
    </Tab.Navigator>
  );
}

export default TabNavigation;

This code adds a home icon to the "Home" screen, a list icon to the "Catalog" screen, and a cart icon to the "Cart" screen. You can customize the colors and icons as per your preference.

Step 3: Implementing Home Screen

1. Update HomeStack.js: Open HomeStack.js and replace the following code:

const HomeStack = () => {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
};

export default HomeStack;

With this code, we're displaying a message "Home Screen" inside a View component.

1. Add header title: Open styles.js and add this code:

exports.headerTitleStyle = {
  fontSize: 24,
  fontWeight: 'bold',
  color: colors.primary,
};

This code adds styles to the header title that will be used in this app.

1. Return the header title: Inside HomeStack.js replace the code:

const HomeStack = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image
        source={ require('../assets/images/restaurant.jpg') }
        resizeMode="cover"
        style={{ width: '90%', height: '20%', borderRadius: 8 }}
      />
      <Text style={styles.headerTitleStyle}>Home</Text>
    </View>
  );
};

import { View, Image } from 'react-native';
import styles from './styles';

This code adds an image to the Home screen, along with a header title that takes the styles defined in styles.js.

Step 4: Implementing Catalog Screen

1. Add Catalog items: Inside CatalogStack.js, add the following code to render the Catalog items. We'll add some placeholders for now.

const CatalogStack = () => {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={[]}
        renderItem={({ item }) => (
          <CatalogItem
            item={{ name: item.name }}
            onPress={() => {}}
          />
        )}
        keyExtractor={(item) => item.name}
      />
    </View>
  );
};

export default CatalogStack;

This code creates an empty FlatList, which will display the catalogue items.

1. Display catalogue items: Update CatalogItem.js. Replace:

const CatalogItem = ({ item, onPress }) => {
  return (
    <View
      style={{
        marginTop: 10,
        paddingHorizontal: 16,
        paddingVertical: 12,
        backgroundColor: colors.white,
        borderWidth: 1,
        borderColor: colors.gray,
        borderRadius: 12,
      }}>
      <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{item.name}</Text>
      <Text style={{ color: colors.gray, marginTop: 4 }}>{`$${item.price}.00`}</Text>
    </View>
  );
};

export default CatalogItem;

By replacing the placeholder code we've added in the Step 4.

Conclusion

In this tutorial, we've learned how to set up the Food Order App UI Template in React Native, customize the layout, and implement the screens. We've also discovered how to add catalogue items and display them on screen.