How To Build WordPress Client App with React Native Part #13: Configuring Firebase Database

In this chapter, we are going to implement the Contact screen. This screen is specially for contacting the developer and writer of articles. The users can use it to send a personal message to the developer. For the implementation, we are going to use two main packages. One is tcomb-form-native and the other is react-native-firebase. The tcomb package is to handle the form validation. And, react-native-firebase to connect react native app to real time firebase database.

First, we need to install the following packages:

yarn add react-native-firebase  tcomb-form-native

We can now link these packages to native files just as before.

Configuring firebase in iOS

Now, we need to set up firebase for iOS first. For that, we need to grab the Bundle identifier as shown in the screenshot below:

Next, we need to create the firebase app and add iOS app in which we need to paste Bundle ID as shown in the screenshot on the next page:

Then, we need to register the Firebase App and download GoogleService-info.plist. Then, we need to move the file to the project folder :

Then, we need to navigate to ‘./ios’ folder and run the following command:

cd ios ; pod install

If we see the overall installation process, we can notice that this does not install Realtime Database pod:

So, we need to manually add this Real-time database pod and update pod again.

We can manually import the FirebaseDatabase package to the pod file as shown in the screenshot on the next page:

Now, we need to update the pod using the following command:

pod update

Next, we need to initialize the  firebase in Appdelegate.m. For that, we need to import firebase lib to Appdelegate.m file and active after restarting the app as shown in the code snippet below:

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import Firebase;
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"kriss_app"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  return YES;
}

Next, we need to launch the app using the following commands:

react-native run-ios 

react-native run-android

TIP :: when your touch file in ios or android folder should build project with Xcode or Android studio first that helpful when they show an error that not show on react native

Summary

In this chapter we leaned how to set up the react-native-firebase in the react-native application.

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native App Templates from instamobile