react-native-cronet: Chrome's networking stack for your react-native application
Cronet is the networking stack of Chromium put into a library for use on mobile. This is the same networking stack that is used in the Chrome browser by over a billion people. It offers an easy-to-use, high performance, standards-compliant, and secure way to perform HTTP requests. Cronet has support for both Android and iOS.
This module allows you to use the Cronet stack for your react native apps. Checkout default react-native vs react-native-cronet comparison on android when loading many images on a high lateceny and packetloss network
npm install --save react-native-cronet
or using yarn:
yarn add react-native-cronet
react-native-cronet will link automatically using the autolink.
Make sure to run
pod install in your iOS folder to get the
Cronet.framework dependency included.
- In XCode, in the project navigator, right click
Add Files to [your project's name]
- Go to
- In XCode, in the project navigator, select your project. Add
libRNCronet.ato your project's
Link Binary With Libraries
pod 'Cronet'as a dependency in your iOS
pod install, alternatively manaually link Cronet.framework to your project
- Run your project (
- Open up
import com.akshetpandey.rncronet.RNCronetPackage;to the imports at the top of the file
new RNCronetPackage()to the list returned by the
- Append the following lines to
include ':react-native-cronet' project(':react-native-cronet').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cronet/android')
- Insert the following lines inside the dependencies block in
For iOS, you will have to disable bitcode for your target.
- In XCode, in the project navigator, select your project.
For Android, in your
MainApplication.java, you will have to change how RN initializes
FrescoModule by adding these lines:
// <--- ADD THIS// <--- ADD THIS// <--- ADD THIS
Although the library is capable of automatically configuring itself, you can also initialize the cronet engine based on your use case. One reason to do this would be to provide QUIC hints for your domain that you know supports QUIC, or to customize cache size and type.
Make sure this is done before the react native bridge gets initialized.
Nothing needs to be done on the JS side.
Somewhere in your app startup flow, ex. in
AppDelegate.m, you can install an initializer block that can initialize the library for your requirements.
iOS documentation for the cronet library initialization is sparse, but you can look at Cronet/Cronet.h
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
Somewhere in your app startup flow, ex in
MainActivity.java, you can install an initializer block that can initialize the library for your requirements.
Android documentation for the cronet library initialization is available in CronetEngine.Builder