How to Firebase CRUD with React Native

[ad_1]

Another notes working with 📱 React Native / Firebase CRUD  meaning  to Create / Read / Update / Delete a data.  In this guide we will use noSQL Firebase Database using React Native / Firebase module. We will use Firebase Javascript library | node module for this tutorial. Before we start, make sure that you have installed the Node.js  then run (npm) in the terminal or command line. To check the existing or installed Node.js environment open the terminal / command line then type this command node -v.

1. React Native Firebase Guide To Setup Firebase

Setup Google Firebase is very simple. Open your browser then go to Google Firebase Console https://console.firebase.google.com/ and log in using your google account.

React Native Firebase Tutorial: Build CRUD Firestore App - Firebase Console

Click Add Project button, name it as you like (ours: Djamware) and checks all checkboxes. Finally, click Create Project button then wait a few seconds and click Continue button. You will be redirected to this page.

React Native Firebase Tutorial: Build CRUD Firestore App - Firebase Project

Next, go to Project Settings by click Gear Icon. Scroll down then click Add Firebase to your iOS App. Now, follow the wizard to add new iOS App, download the configuration file then click next or skip until finished. Do the same way for Android Firebase App.

React Native Firebase Tutorial: Build CRUD Firestore App - Android Apps

Go to Develop menu on the left menu then click Create Database on Cloud Firestore page.

React Native Firebase Tutorial: Build CRUD Firestore App - Cloud Firestore Setup

Choose Start in test mode then click Enabled button.

React Native Firebase Tutorial: Build CRUD Firestore App - Database

Click Add Collection button to add the new collection for this tutorial. Fill collection ID (ours: ‘boards’) then click next. Add the required fields then click finish the wizard.

React Native Firebase Tutorial: Build CRUD Firestore App - New Collection

Now, the Firebase Firestore Database is ready to access. Make sure that your iOS and Android app match with the configuration files (json/plist).

2. React Native Firebase Guide to Install React App Creator 

The Create React Native App is a tool for creating a React Native App. To install it, type this command in your App projects folder.

Then create a React Native App using this command.

If there question to install Expo, just type Y and choose blank template because we will add the navigation later. That command will create a React Native app then install all required modules. The app or project folder will contain this folders and files.

Next, go to the newly created React App folder.

This React Native App is running with Expo App, it means before running on your Android or iOS device, make sure you have the Expo App to Android or Expo Client to iOS installed.

or

You will see this barcode and instruction in the terminal or command line.

React Native Firebase Tutorial: Build CRUD Firestore App - Expo

📱 If your using iOS, press [s] to keyboard to send the App URL to your Email / SMS. next you need to enter your phone No. | email address (you can use your email address) then press enter. You will get this email to your inbox. Choose open in Expo URL then open in your browser, that will be redirected to Expo Application. In ExpoApp welcome screen, you need to shake your phone to open the React Native App and you will see the screen above in your iOS device.

This step for development purpose, we will show you how to build for production at the end of this article.

2. Add Navigation Header and Home Screen

React Native Firebase Tutorial: Build CRUD Firestore App - Expo EmailReact Native Firebase Tutorial: Build CRUD Firestore App - Initial React Native App

Choose open in Expo URL then open in your browser, that will be redirected to Expo App. In Expo App welcome screen, shake your phone to open the React Native App. Now, you will see this screen in your iOS device.

This step for development purpose, we will show you how to build for production at the end of this article.

3. React Native Firebase Guide to Add Navigation Header and required Screen

Above generated React Native App just show blank app with plain text. Now, we will show you how to add Navigation Header and Home Screen for your app. So, it will look like the Native App. In the terminal or command line type this command to install React Navigation module.

Next, create a folder for components and components files in the root of the app folder.

Open and edit “component/Brdcreen.js” then add this React codes.

Open and edit components/BoardDetailScreen.js then add this React codes.

Open and edit components/AddBrdScreen.js then add this React codes.

Open and edit components/EditBrdScreen.js then add this React codes.

Next, open and edit App.js then add replace all codes with this.

When the files are saved, the Expo app will refresh the React Native App automatically. Now, the app will look like this.

React Native Firebase Tutorial: Build CRUD Firestore App - Sample App

4. React Native Firebase Guide to Install and Configuring Firebase

We use Firebase module to access the Firebase Firestore Database. For that, type this command to install the module.

Next, create a new file Firebase.js in the root of the project folder for Firebase configuration.

Open and edit Firebase.js then replace all codes with this.

You can find or get those configuration parameters by click on Web Setup button in the page authentication of Firebase Console.

5. React Native Firebase Guide to Show List of Board

To show the list of board in the Board components, open and edit “components/BrdScreen.js” then add/replace this imports.

Replace navigationOptions with this.

Declare all required variable for Firebase Firestore data inside the constructor.

Add the function for extract Firebase response to the state.

Call that function inside componentDidMount function.

Replace all view render with this.

Add styles variables before the export code.

6. React Native Firebase Guide to Show Details & Delete 

To show the details of the board in the BoardDetails components, open and edit components/BoardDetailScreen.js then add/replace this imports.

Add or replace all of this required functions for show detail of board from Firebase Firestore Database.

Replace all rendered view with this.

Add the styles before the export code.

7. React Native Firebase Guide to Add Board

To add a new board, open and edit components/AddBrdScreen.js then add/replace this imports.

Declare or add the required functions and variables.

Replace all rendered view with this.

Add the styles codes before the export code.

8. React Native Firebase Guide to Edit Board

To edit the existing board, open and edit components/EditBoardScreen then replace all imports with this.

Declare all required functions and variables.

Replace all rendered view with this codes.

Add the styles codes before the extract codes.

9. React Native Firebase Guide to Run and Test the App

To run the React Native Application using Expo app. Type this command.

Follow the previous instruction for running the React Native app in Expo app. Finally, you will see the whole React Native app like this.

React Native Firebase Tutorial: Build CRUD Firestore App - Board ListReact Native Firebase Tutorial: Build CRUD Firestore App - Board DetailsReact Native Firebase Tutorial: Build CRUD Firestore App - Add BoardReact Native Firebase Tutorial: Build CRUD Firestore App - Edit Board

Notes: If the Firebase module not working in the Native iOS or Android Build using Expo, you can use React Native Firebase (Firebase) module for it. Of course, you have to follow the guide for setup the Firebase in the Firebase console. For the React Native app just change the firebase module to react-native-firebase module and also change the import inside React Native components. CRUD Firestore App. You can find a sample source code from this GitHub.

[ad_2]

 

Leave a Reply

Your email address will not be published. Required fields are marked *