React Native SDK

The Cloudinary React Native SDK provides simple, yet comprehensive image and video transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your React Native application.

How would you like to learn?

Install

Cloudinary's React Native library is available as an open-source NPM package. To install the library, run:

Configure

You can specify the configuration parameters that are used to create the delivery URLs, either using a Cloudinary instance or per image.

Cloudinary instance configuration

If you want to use the same configuration to deliver all your media assets, it's best to set up the configuration through a Cloudinary instance, for example:

You can set other configuration parameters related to your cloud and URL as required, for example, if you have your own custom delivery hostname, and want to generate a secure URL (HTTPS):

Asset instance configuration

If you need to specify different configurations to deliver your media assets, you can specify the configuration per image instance, for example:

Use

Once you've installed and configured the React Native SDK, you can use it to transform and deliver your images and videos.

Quick example: File upload

The following React Native code uploads the dog.mp4 video using the public_id, my_dog. The video overwrites the existing my_dog video if it exists. When the video upload finishes, the specified notification URL receives details about the uploaded media asset.

The result of the upload API call is an object that provides information about the uploaded media asset, including the assigned public ID and its URL.

Quick example: Transform and optimize

Take a look at the following transformation code and the image it delivers:

This code creates the HTML required to deliver the front_face.jpg image with the sepia effect applied.

You can apply more than one transformation at a time (see chained transformations) to give more interesting results:

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

• Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
• Round the corners with a 20 pixel radius
• Apply a sepia effect
• Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
• Rotate the resulting image (including the overlay) by 10 degrees
• Convert and deliver the image in PNG format (the originally uploaded image was a JPG)