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 . The tcomb package is to handle the form validation. And, to connect react native app to real time firebase database. react-native-firebase react-native-firebase 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 . Then, we need to move the file to the project folder : GoogleService-info.plist Then, we need to navigate to folder and run the following command: ‘./ios’ 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 . For that, we need to import firebase lib to file and active after restarting the app as shown in the code snippet below: Appdelegate.m Appdelegate.m # # <React/RCTBridge.h>
# <React/RCTBundleURLProvider.h>
# <React/RCTRootView.h>
@ 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:@ initialProperties:nil];

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

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController ];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible]; ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  } YES;
} import "AppDelegate.h" import import import import "kriss_app" 1.0 1.0 1.0 1 new if return Next, we need to launch the app using the following commands: or react-native run-ios react-native run-android :: 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 TIP Summary In this chapter we leaned how to set up the in the react-native application. react-native-firebase 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 from instamobile React Native App Templates

How To Build WordPress Client App with React Native Part #14: Implementing Settings Screen

How To Build WordPress Client App with React Native Part #12: Creating Categories Screen

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps