Blog

QUIC-Enabling Your React Native Mobile App 

April 22, 2020 · by Alex Leung  ·
Categories:

QUIC is a transport layer protocol that accelerates online traffic by reducing latency. Test-driving a QUIC connection is simple with your Chrome browser—just point the browser to YouTube and you’ll see lots of QUIC traffic in your Chrome Dev Tool Network tab. However, enabling your native mobile apps to take advantage of QUIC isn't so easy. 

Akamai has been supporting select customers interested in trying the QUIC protocol with its QUIC Tech Preview program. In this post, we’ll introduce you to a React Native project in GitHub, and provide step-by-step instructions on how to leverage this project using the same code base to create sample iOS apps that can talk in QUIC. 

Creating a QUIC iOS app

To create a QUIC-enabled iOS app, follow these steps:

  1. Install Xcode, which is available through the App Store

  2. If you don't already have Homebrew, go to http://brew.sh and install it on your machine

  3. Open a command line to install Node and Watchman using Homebrew with the commands:

    • brew install node

    • brew install watchman

  4. Once Node.js is installed, install the React Native command-line tools by running:

    • npm install -g react-native-cli

    • brew install yarn

  5. Install cocoapods with the command:

    • sudo gem install cocoapods

  6. Launch your Xcode, create your iPhone X simulator using the following commands (listed below):

    img

     

  • mkdir ~/hub

  • cd ~/hub

  • git clone (https://github.com/akshetpandey/react-native-cronet.git) clones a github project to your local directory, renaming it react-native-cronet 

  • cd react-native-cronet/example/ios changes the working directory to react-native-cronet/example/ios

  • pod install installs necessary project dependencies via cocoapods

  • cd .. changes the working directory to one level up, reactive-native-cronet/example/

  • yarn is a package manager for JavaScript that gathers all the JavaScript libraries required to build the project

  • yarn iOS builds the app for iOS, and runs it inside the iOS emulator

 

Here is a screen recording showing the last few important steps:

For more information about the React Native project, read Akshet Pandey's Medium article.