DEV Community

Khue Pham
Khue Pham Subscriber

Posted on

React Native + Web + Firebase (Part 01) — Why we use React Native to develop both Native and Web version

#reactnative #webdev #firebase

Introduction — Part 01

You are building a cross-platform app using React Native, which will target both mobile (iOS and Android) and web platforms. Leveraging Expo provides an easy and efficient way to set up, develop, and deploy your app while React Native Web allows you to render the same React Native components in the browser.

Key Technologies:

  1. Expo: A framework that helps developers build React Native applications quickly, with many built-in tools for managing the app lifecycle, testing, and deployment.

Benefits:

  • Managed workflow: Expo handles configurations and simplifies setup.

  • Quick testing: Easy to test and deploy on devices and simulators.

  • Universal development: Allows a unified codebase for mobile and web.

2. React Native: The core framework used for building cross-platform mobile apps with a single JavaScript codebase.

Benefits:

  • Native performance: It provides access to native UI components.

  • Modular: Huge ecosystem with community-driven libraries.

3. React Native Web: A library that makes React Native components and APIs work on the web. It allows you to reuse your mobile app’s codebase to build a web version with the same UI and functionality.

Benefits:

  • Code reusability: Most of your code can be shared between web and mobile.

  • Easier web deployment: Supports popular web technologies like HTML and CSS, while keeping the React Native architecture.

4. React Native Fỉrebase: Combining Firebase with React Native allows for fast, cross-platform development with a fully managed backend solution. You get real-time data sync, secure authentication, push notifications, analytics, and more, without having to worry about managing your own server infrastructure. This combination results in faster development, easier scaling, and a smoother user experience on both iOS and Android platforms.

Create a Project on Firebase

1. Firestore:

  • Firebase’s Real-Time Database and Firestore provide fast, real-time data synchronization between your app and the cloud. For React Native apps that need live updates (such as messaging apps or live feeds), this is a huge benefit.

2. Authentication:

  • Firebase’s Authentication service supports multiple sign-in methods like Google, Facebook, email/password, etc. This makes it easy to implement secure user authentication with minimal effort, which integrates smoothly with a React Native front end.

Create an app in Firebase Settings and download the following files:

  • GoogleService-Info.plist for the Apple app version.

  • google-services.json for the Android app version.

In this post, we will not dive deep into how to implement React Native Firebase into your app. Please refer to the React Native Firebase documentation for detailed instructions:

https://rnfirebase.io/

Create files following the directory structure below:

App.tsx

.env

context/

  AuthProvider.tsx

hooks/

  useUserCredential.tsx

screens/

  Login.tsx

  Home.tsx

services/

  Firebase/

    users/

      index.ts

      management.ts

      management.native.ts

      management.web.ts

  utils.ts
Enter fullscreen mode Exit fullscreen mode




Explanation for each component in the directory tree:

  • App.tsx: This is the root component of the app. Here, we will wrap the ContextProvider for the routers, which contain screens like Login, Home, and logic to check if user data exists, loading the corresponding screens accordingly.

  • AuthProvider.tsx: User information is stored in React Context. This file contains the context and reducers to update user information after receiving data from Firebase.

hooks: For user information that needs to be displayed on the UI or used for logic in components, we have a custom hook useUserCredential.ts, which returns this information.

screens: This folder contains the screens for displaying the UI.

  • Login.tsx: The login screen with a single button “Login By Apple.” When the user taps this button, the app will initiate login using the Apple account on the iPhone.

  • Home.tsx: After successful login, the data from Apple is recognized by Firebase Authentication and returned to the app. We will process this data and then display the Home screen.

services: This folder contains the business logic performed in the app, independent of the UI. In addition to displaying data on the native app, we also handle the display on the web. Therefore, there are separate files for each environment:

Files with .web.ts are for the web version.

Files with .native.ts are for both iOS and Android versions.

  • services/utils.ts: A collection of functions for processing data within the services. These are pure functions and are limited to the service layer of the app.

Thank you for joining me on this comprehensive article. If you found this tutorial helpful, don’t forget to give this post *50 claps👏 **and **follow *🚀 if you enjoyed this post and want to see more. Your enthusiasm and support fuel my passion for sharing knowledge in the tech community.

You can find more such articles on my profile -> https://medium.com/@khuepm
https://github.com/khuepm

Stay tuned for more in-depth tutorials and insights on Javascript and React Native development.

Ok, so in the Part Two, we will continue implement the code. Check this out!
https://dev.to/khuepm/react-native-web-firebase-part-02-implement-react-native-firebase-cross-app-2ike

Top comments (0)