React Native Full Course | React Native Full Stack App | Build Business Directory App | Expo Router

Introduction

This tutorial guides you through building a full-stack Business Directory App using React Native and Expo. Whether you're a beginner or an experienced developer, this comprehensive course covers everything from project setup to backend integration, enabling you to create a professional app with real-world functionality.

Step 1: Project Setup

• Install Node.js and Expo CLI if not already done.
• Create a new React Native project by running:

  npx create-expo-app BusinessDirectoryApp
  

• Navigate into your project directory:

  cd BusinessDirectoryApp
  

• Start the development server:

  npm start
  

Step 2: Set Up Emulator and Actual Device

• Install Android Studio or Xcode to set up an emulator.
• Alternatively, use Expo Go on your smartphone for testing:
  • Download Expo Go from the App Store or Google Play.
  • Scan the QR code from your development server.

Step 3: Implement Expo Router with Tab Navigation

• Install React Navigation:

  npm install @react-navigation/native @react-navigation/bottom-tabs
  

• Set up basic navigation structure:

  import { NavigationContainer } from '@react-navigation/native';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
  const Tab = createBottomTabNavigator();
  
  function App() {
    return (
      <NavigationContainer>
        <Tab.Navigator>
          {/* Define your screen components here */}
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
  

Step 4: Add App Fonts

• Install the font library:

  expo install expo-font
  

• Load your fonts in the App component:

  import * as Font from 'expo-font';
  
  async function loadFonts() {
    await Font.loadAsync({
      'custom-font': require('./assets/fonts/CustomFont.ttf'),
    });
  }
  

Step 5: Set Up Authentication

• Use Clerk for authentication. Sign up and get your API keys.
• Install Clerk SDK:

  npm install @clerk/clerk-sdk-react
  

• Implement Clerk in your app:

  import { ClerkProvider } from '@clerk/clerk-sdk-react';
  
  function App() {
    return (
      <ClerkProvider frontendApi="your-clerk-frontend-api">
        {/* Your app components */}
      </ClerkProvider>
    );
  }
  

Step 6: Backend Setup with Firebase

• Create a Firebase project in the Firebase Console.
• Install Firebase SDK:

  npm install firebase
  

• Initialize Firebase in your app:

  import { initializeApp } from 'firebase/app';
  
  const firebaseConfig = {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    projectId: "your-project-id",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-sender-id",
    appId: "your-app-id"
  };
  
  const app = initializeApp(firebaseConfig);
  

Step 7: Display Business List

• Use FlatList to display data from Firebase.
• Fetch data from Firestore:

  import { getFirestore, collection, getDocs } from 'firebase/firestore';
  
  const db = getFirestore(app);
  const querySnapshot = await getDocs(collection(db, "businesses"));
  

Step 8: Add Business Functionality

• Create a screen to add new businesses.
• Use a form to gather input and save it to Firebase.

Step 9: Manage User Added Business

• Implement functionality to update or delete businesses.
• Create buttons for each business item:

  <Button title="Edit" onPress={() => editBusiness(business.id)} />
  <Button title="Delete" onPress={() => deleteBusiness(business.id)} />
  

Step 10: Generate APK File

• To create an installable APK, run:

  expo build:android
  

• Follow the prompts and download your APK once the build is complete.

Conclusion

In this tutorial, you learned how to build a full-stack Business Directory App using React Native and Expo. You set up your environment, integrated Firebase, and implemented essential app features like authentication and data management. For further enhancements, consider exploring additional features like user profiles or advanced UI components. Happy coding!