React Native

This is a quick start guide to show you how to integrate ImageKit in a React Native app. The code samples covered here are hosted on Github - https://github.com/imagekit-samples/quickstart/tree/master/react-native.
This guide walks you through the following topics:
​Clone and run the tutorial app​
​Setting up Imagekit Javascript SDK​
​Rendering Images​
​Applying common image manipulations​
​Adding overlays to images​
​Client-side file uploading​
If you are new to React Native app development, you can learn about setting up the development environment and creating a new project here https://reactnative.dev/docs/environment-setup.
Clone and run the tutorial app
For this tutorial, it is recommended to use the sample React Native app as shown below. If you already have an existing React Native app, it is also possible to use that, although you would need to modify the terminal commands and configurations in this tutorial as applicable.
1
git clone 
2
https://github.com/imagekit-samples/quickstart.git
Copied!
Navigate to the cloned repository, and install the npm packages that are needed to run the React Native app:
1
cd quickstart/react-native/
2
npm install
Copied!
Start the metro server.
1
npx react-native start
Copied!
And now to run the app in the ios simulator (you should have Xcode installed)
1
npx react-native run-ios
Copied!
Or to run the app in the android simulator (you should have android studio installed)
1
npx react-native run-android
Copied!
You should see the following screen. This means the sample app has been set up correctly.
Setting up Imagekit Javascript SDK
We will be using Imagekit javascript SDK. So let's install it.
1
npm install --save imagekit-javascript
Copied!
imagekit-javascript SDK uses URL API to parse the URL internally. In React 16 and above, this API was removed, so if you are using React 16 or above, you will have to implement a small patch with these steps.
1.Install the package with npm install eact-native-url-polyfill
2.Import the package in your app's entry point i.e. App.js like this import 'react-native-url-polyfill/auto'
Initializing the SDK
Open app/lib/imagekit.js file, this is where we will initialize our SDK and create helper functions that will be used in the app.
Initialize the SDK with parameters set in the config file app/config/imagekit.js
urlEndpoint is the required parameter. You can get the value of URL-endpoint from your ImageKit dashboard - https://imagekit.io/dashboard#url-endpoints.
publicKey and authenticationEndpoint parameters are optional and only needed if you want to use the SDK for client-side file upload. You can get these parameters from the developer section in your ImageKit dashboard - https://imagekit.io/dashboard#developers.
app/lib/imagekit.js
1
import ImageKit from "imagekit-javascript";
2
import { urlEndpoint, publicKey, authenticationEndpoint } from "../config/imagekit";
3
​
4
var imagekitConfigOptions = { urlEndpoint };
5
if(publicKey) imagekitConfigOptions.publicKey = publicKey;
6
if(authenticationEndpoint) imagekitConfigOptions.authenticationEndpoint = authenticationEndpoint;
7
​
8
const imagekit = new ImageKit(imagekitConfigOptions);
Copied!
Rendering Images
Image URL can be created from an image path or using the absolute image URL. You can learn more about it in docs.
To create a URL from the image source (full image URL), we can create a function like this, which takes the image source and a transformation array and returns the transformed image URL.
app/lib/imagekit.js
1
module.exports.getImagekitUrlFromSrc = function(imageSrc, transformationArr){
2
		var ikOptions = {
3
			src: imageSrc,
4
			transformation: transformationArr
5
		}
6
		var imageURL = imagekit.url(ikOptions);
7
	
8
		return imageURL;
9
}
Copied!
To create a URL from the image path, we can create a helper function like this below. This function takes the URL endpoint, image path, transformation array, and transformation position as parameters and returns the transformed image URL.
app/lib/imagekit.js
1
module.exports.getImagekitUrlFromPath = function(imagePath, transformationArr, transformationPostion){
2
		var ikOptions = {
3
			urlEndpoint,
4
			path : imagePath,
5
			transformation: transformationArr
6
		};
7
		if(transformationPostion) ikOptions.transformationPostion = transformationPostion;
8
	
9
		var imageURL = imagekit.url(ikOptions);
10
	
11
		return imageURL;
12
}
Copied!
The transformation position (path or query) is only valid when creating a URL from the image path. Transformations are always added as query parameters if the URL is created from an absolute image path using src.
Now, head over to app/screens/Fetch/index.js to fetch an image.
First, let's fetch the original image without any transformations.
app/screens/Fetch/index.js
1
import React, { useState, useEffect } from 'react';
2
import { View } from 'react-native';
3
​
4
import Image from '../../components/Image/';
5
import getStyleSheet from './styles';
6
​
7
import { getImagekitUrlFromSrc, getImagekitUrlFromPath } from '../../lib/imagekit';
8
import { urlEndpoint } from '../../config/imagekit';
9
​
10
function Fetch() {
11
	  let styleSheet = getStyleSheet({});
12
	  
13
	  var imagePath = "/default.jpg";
14
		var imageSrc = urlEndpoint+imagePath;
15
		
16
		const [imageUrl, setImageUrl] = useState();
17
		
18
	  useEffect(() => {
19
				showTransformedImage();
20
		}, [])
21
		
22
		function showTransformedImage() {
23
				var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, []);
24
				setImageUrl(transformedImageUrl);
25
		}
26
		
27
	  return (
28
				<View style={styleSheet.imgContainer}>
29
					{ 
30
						imageUrl && 
31
						<Image 
32
							source={{'uri' : imageUrl}} 
33
							style={{
34
								width: 300,
35
								height: 300,
36
							}}
37
						/> 
38
					}
39
				</View>
40
	  );
41
}
42
​
43
export default Fetch;
Copied!
It will look as shown below. In the sample app, the buttons are present to demonstrate the use of different transformations. You can see the full list of supported transformations here.
In the sample app, we are using our own custom Text, Image, Button components created using React native's components for consistency, you can use them, original or any other UI kit if you want.
Common Image Manipulation
This section covers the basics:‌
​Basic image resizing​
​Crop Mode​
​Aspect Ratio​
​Chained transformation​
Imagekit Javascript SDK gives a name to each transformation parameter e.g. height for h and width for w parameter. It makes your code more readable. If the property does not match any of the available options, it is added as it is. See the full list of supported transformations in React SDK on Github.
You can also use h and w parameter instead of height and width.
See the complete list of transformations supported in ImageKit here.
Basic image resizing
Let's resize the image to a height of 150 and a width of 150.
Note: You'll need to specify height and width in the Image component of react-native accordingly as we are fetching the image from a remote url.
app/screens/Fetch/index.js
1
function showTransformedImage() {
2
		var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, [{
3
				"height": 150,
4
				"width": 150,
5
		}]);
6
		setImageUrl(transformedImageUrl);
7
}
Copied!
Output :
Crop Mode
Let’s now see how different crop mode works. We will try the pad_resize crop strategy. In this strategy, the output image's dimension (height and width) is the same as requested, no cropping occurs, and the aspect ratio is preserved. This is accomplished by adding padding around the output image to get it to match the exact dimension as requested. You can read more about this here.
app/screens/Fetch/index.js
1
function showTransformedImage() {
2
		var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, [{
3
				"height": 200,
4
				"width": 300,
5
				"cropMode" : "pad_resize",
6
				"background" : "F3F3F3"
7
		}]);
8
		setImageUrl(transformedImageUrl);
9
}
Copied!
Output :
Aspect Ratio
You can use the ar parameter to change the aspect ratio like this**:**
app/screens/Fetch/index.js
1
function showTransformedImage() {
2
		var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, [{
3
				"height": 400,
4
				"aspectRatio" : "3-2"
5
		}]);
6
		setImageUrl(transformedImageUrl);
7
}
Copied!
Output :
Chained Transformation
​Chained transformations provide a simple way to control the sequence in which transformations are applied.
Let’s try it out by resizing an image, then rotating it:
app/screens/Fetch/index.js
1
function showTransformedImage() {
2
		var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, [{
3
					"height": 300,
4
					"width" : 300
5
				}, {
6
					"rotation" : "90"
7
		}]);
8
		setImageUrl(transformedImageUrl);
9
}
Copied!
Output :
Adding an overlay to images
ImageKit.io allows you to add text and image overlay dynamically.
Text Overlay
Text overlay can be used to superimpose text on an image. Try it like so:
app/screens/Fetch/index.js
1
function showTransformedImage() {
2
		var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, [{
3
					"overlayText": 'ImageKit',
4
					"overlayTextFontSize": 50,
5
					"overlayTextColor": '0651D5',
6
					"overlayX" : 50,
7
					"overlayY" : 20
8
		}]);
9
		setImageUrl(transformedImageUrl);
10
}
Copied!
Output :
Image Overlay
Image overlay can be used like this:
app/screens/Fetch/index.js
1
function showTransformedImage() {
2
		var transformedImageUrl = getImagekitUrlFromSrc(imageSrc, [{
3
					"overlayImage": "plant.jpeg",
4
					"overlayX" : 50,
5
					"overlayY" : 50,
6
					"overlayHeight" : 100,
7
		}]);
8
		setImageUrl(transformedImageUrl);
9
}
Copied!
Output :** **
Client-side file uploading
Let's learn how to upload an image to our media library.
For this, we would need a dummy backend app to authenticate our upload request. API authentication for upload always happens on the backend for security reasons.
The tutorial repository comes with a sample backend server that we can use.
Setting up the backend app
In a new terminal window, navigate to the server folder inside the tutorial project and install its npm packages:
1
cd server/
2
npm install
Copied!
Copy the given server sample.env file to .env.
1
cp sample.env .env
Copied!
Obtain your API private key from the developer section from the ImageKit dashboard, and paste it in the server .env file.
1
PRIVATE_KEY = <your_private_key>
Copied!
Finally, run the backend app.
1
npm start
Copied!
You should see a log line saying that the app is “Live on port 8080”.
Configure the auth endpoint in the frontend app
Head over to app/config/imagekit.js and replace the** **authenticationEndpoint with http://localhost:8080/auth
Upload an image
Try using react-native v0.63.3 which is the latest version at the time of writing this article, as the previous versions have a known issue in uploading files. If you are using a previous version and can't upgrade, you'll have to implement a workaround.
For this, let's create another function in app/lib/imagekit.js file.
app/lib/imagekit.js
1
module.exports.uploadFile = function(file) {
2
	return new Promise((resolve, reject) => {
3
		imagekit.upload({
4
			file,
5
			fileName: file.name, //you can change this and generate your own name if required
6
			tags: ["sample-tag-1", "sample-tag-2"] //change this or remove it if you want
7
		}, function(err, result) {
8
			if(err) reject(err);
9
			resolve(result);
10
		})
11
	})
12
}
Copied!
For selecting a file, we will need a picker. Here we are using react-native-document-picker but you can use any picker.
1
npm install --save react-native-document-picker
Copied!
This is how we implement file upload in app/screens/Upload/index.js
app/screens/Upload/index.js
1
import React, { useState } from 'react';
2
import { View } from 'react-native';
3
import DocumentPicker from 'react-native-document-picker';
4
​
5
import Button from '../../components/Button/';
6
import Text from '../../components/Text/';
7
import getStyleSheet from './styles';
8
​
9
import { uploadFile } from '../../lib/imagekit';
10
​
11
function Upload() {
12
	let styleSheet = getStyleSheet({});
13
​
14
	const [uploadFileUrl, setUploadFileUrl] = useState();
15
​
16
	async function openFileSelector(){
17
		try{
18
			var res = await DocumentPicker.pick({
19
				type: [DocumentPicker.types.allFiles],
20
			});
21
			
22
			uploadFileToImagekit(res);
23
		}catch(err){
24
			if (DocumentPicker.isCancel(err)) {
25
				// User cancelled the picker, exit any dialogs or menus and move on
26
			} else {
27
				throw err;
28
			}
29
		}
30
	}
31
​
32
	async function uploadFileToImagekit(fileData){
33
		try{
34
			const uploadedFile = await uploadFile(fileData);
35
			setUploadFileUrl(uploadedFile.url);
36
		}catch(err){
37
			//handle error in uploading file
38
		}
39
	}
40
​
41
	return (
42
		<>
43
			<View style={styleSheet.container}>
44
				<Button 
45
					cssProps={styleSheet.buttonCssProps} 
46
					onPress={() => openFileSelector()}
47
				>
48
					Upload File
49
				</Button>
50
				<View style={styleSheet.captionView}>
51
					{
52
						uploadFileUrl && 
53
						<Text>Uploaded File - {uploadFileUrl}</Text>
54
					}
55
				</View>
56
			</View>
57
		</>
58
	);
59
};
60
​
61
export default Upload;
Copied!
Let’s upload an image by selecting a file using the file input.
The uploader uploads whenever file input changes. You can verify that file was successfully uploaded by checking the browser console. It should print the file URL.
After a successful upload, you should see the newly uploaded file in the Media Library of your ImageKit dashboard.
If you don't see the file, check if there are any errors in the browser console log. Make sure that the private API key has been configured. The server app is running. And the uploaded file type is supported by ImageKit.
What's next
The possibilities for image manipulation and optimization with ImageKit are endless. Learn more about it here:
​Image Transformations​
​Image optimization​
​Media Library​
​Performance monitoring​