React Native Fast Food App 🔥 #shorts #expo #UI #ReactJS

In this tutorial, we will be creating a Fast Food App in React Native using Expo. React Native is a popular framework for building cross-platform mobile apps, and Expo provides a set of tools and services that make it easy to develop and deploy React Native apps.

To follow along with this tutorial, make sure you have Node.js and npm installed on your machine, as well as Expo CLI. You can install Expo CLI by running the following command:

npm install -g expo-cli

Once you have Expo CLI installed, you can create a new React Native project by running the following command:

expo init FastFoodApp

Choose the blank template when prompted. This will create a new directory with all the files you need to start building your app.

Next, navigate into the directory of your new project and run the following command to start the development server:

cd FastFoodApp
npm start

This will open up the Expo Developer Tools in your web browser, where you can view your app and make changes to the code.

To build the UI of our Fast Food App, we will be using React Native components such as View, Text, TextInput, Button, and ScrollView. We will also be using React Navigation to create a navigation stack for our app.

First, let’s create a new file in the root directory of our project called HomeScreen.js. In this file, we will define the HomeScreen component, which will be the landing page of our app. Here is the code for HomeScreen.js:

import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = () => {
  return (
    <View>
      <Text>Welcome to Fast Food App!</Text>
      <Button title="Order Now" onPress={() => console.log('Order Now pressed')} />
    </View>
  );
};

export default HomeScreen;

Next, let’s create a new file called MenuScreen.js in the root directory of our project. In this file, we will define the MenuScreen component, which will display a list of food items that users can order. Here is the code for MenuScreen.js:

import React from 'react';
import { View, Text, ScrollView } from 'react-native';

const MenuScreen = () => {
  return (
    <ScrollView>
      <View>
        <Text>Menu</Text>
      </View>
    </ScrollView>
  );
};

export default MenuScreen;

Now that we have defined the HomeScreen and MenuScreen components, let’s set up the navigation stack for our app. Create a new file called AppNavigator.js in the root directory of our project. In this file, we will define the AppNavigator component, which will contain the navigation stack for our app. Here is the code for AppNavigator.js:

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import HomeScreen from './HomeScreen';
import MenuScreen from './MenuScreen';

const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen },
  Menu: { screen: MenuScreen },
});

export default createAppContainer(AppNavigator);

Finally, let’s update the App.js file in the root directory of our project to use the AppNavigator component we just created. Here is the updated code for App.js:

import React from 'react';
import AppNavigator from './AppNavigator';

const App = () => {
  return <AppNavigator />;
};

export default App;

Now that we have set up the navigation stack for our Fast Food App, you can run the app on your device or emulator by scanning the QR code displayed in the Expo Developer Tools. You can make changes to the code and see the changes reflected in real-time.

In this tutorial, we have created a simple Fast Food App in React Native using Expo. You can expand on this app by adding more screens, integrating APIs for fetching food data, and adding features such as user authentication and payment processing. Happy coding! 🔥🍔🍟