Build WordPress App with React Native #13: contact screen

This series intends to show how I build 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 Mobile Templates from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. Build WordPress Client App with React Native #1: Overview
2. Build WordPress Client App with React Native #2: Setting Up Your Environment
3. Build WordPress Client App with React Native #3: Handle Navigation with React navigation
4. Build WordPress Client App with React Native #4: Add Font Icon
5. Build WordPress Client App with React Native #5 : Home Screen with React native paper
6. Build WordPress Client App with React Native #6 : Using Html renderer and Moment
7. Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll
8. Build WordPress Client App with React Native #8: Implementing SinglePost Screen
9. Build WordPress Client App with React Native #9: implement simple share
10. Build WordPress Client App with React Native #10: Setup and save bookmark
11. Build WordPress Client App with React Native #11: Remove and Render Bookmark
12. Build WordPress Client App with React Native #12: Categories screen

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 or 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.

The post Build WordPress Client App with React Native #13: Configuring firebase in contact screen appeared first on Kriss.