Building a Custom iOS WebView and Bridging it to React Native: A Step-by-Step Guide

A few weeks ago, I attempted to submit my React Native-based iOS application to the App Store. Unfortunately, the submission was rejected, and the primary reason cited was the WebView I had incorporated in my project. The application featured HTML5 games, which functioned flawlessly for others, but this particular submission failed to comply with Apple’s guidelines, leading to the rejection.

Following discussions with Apple Developer Support on this matter, it was conveyed that while React Native WebView is suitable for loading other websites, it is not recommended for running HTML5 games within the WebView. Their suggestion was to integrate WKWebView into my project for a more suitable solution.

Having engaged in discussions with Apple Developer Support, it became evident that using React Native WebView to load HTML5 games wasn’t in line with Apple’s guidelines. To address this, I took the necessary steps to implement a custom native WebView and integrate it into my React Native project. In this guide, I’ll detail the process of implementing the custom WebView, sharing insights on how this approach successfully resolved the submission issue.

This guide assumes you have a basic understanding of React Native development and assumes you’ve set up a new React Native project. Make sure to handle any additional configurations specific to your project’s requirements.

Step 1: Create the Native Module

Access your React Native project in Xcode and proceed to the project directory. Subsequently, generate the specified file within the designated location.

1.1. Create a new file named WebViewModule.h and add the following code:

1.2 Create a new file named WebViewModule.m and add following code.

Step 2: Link Libraries

2.1 Import the necessary frameworks at the top of your AppDelegate.m file

2.2 Register the native module by adding the following line in the didFinishLaunchingWithOptions method:

Step 3: Implementation in React Native

3.1 Open your React Native project’s and import the WebView module

3.2 Use the native module methods as needed in your React Native components:

3.3 Run Your React Native Project

You have the option to execute the iOS project either through Xcode or by utilizing the following command.

After implementing these changes, I submitted a new release to the App Store, which went through a successful review and received approval. If you encounter a similar situation, you can adopt the same approach that I took.