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.

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

Configuring firebase in iOS

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

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;
}

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