Skip to main content

Quick Start


The integration of R2U AR module in React Native is made by the library @r2u/react-native-ar-sdk


The SDK uses both react-native-device-info and React Native Async Storage packages to collect information and control session in order to send data to Analytics. Be sure to have them installed in your application:

  • Add the packages with yarn
yarn add react-native-device-info
yarn add @react-native-async-storage/async-storage
  • Linking the packages is made automatically using CLI autolink feature

  • On iOS, use CocoaPods to add RNAsyncStorage to your project:

npx pod-install


Add the module to your app project and follow the additional instructions for iOS and Android.

# with npm
npm install @r2u/react-native-ar-sdk

# with yarn
yarn add @r2u/react-native-ar-sdk


  1. Add camera access permission request on your Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "___">
<plist version="1.0">
<string>Camera used to display product in Augmented Reality</string>
  1. Install the React Native pod
cd ios
pod install


  1. Add camera access permission request on your AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA" />

<application >
<!-- "AR Optional" app, contains non-AR features that can be used when
"Google Play Services for AR" (ARCore) is not available. -->
<meta-data android:name="" android:value="optional" />

Getting started

Here's a sample code that will get you up and running with minimal effort. Be sure to check the rest of the documentation for more detailed information.

import React, { useEffect, useState } from 'react'
import { Alert, Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, View } from 'react-native'

import { WebView } from 'react-native-webview'

import R2U from '@r2u/react-native-ar-sdk'

const customerId = '5e8e7580404328000882f4ae' // Remember to use your ID
const sku = 'RE000001' // Gather from your product page

const styles = StyleSheet.create({
webview: {
marginTop: 32,
width: 400,
height: 400,
margin: 'auto',
backgroundColor: '#ccc'

const App: React.FC = () => {
const [init, setInit] = useState(false)
const [isActive, setIsActive] = useState(false)
const [canOpenAR, setCanOpenAR] = useState(false)
const [opened, setOpened] = useState(false)
const [uri, setUri] = useState('')

useEffect(() => {
R2U.init({ customerId }).then(() => {
}) => setCanOpenAR(supported))
}, [])

useEffect(() => {
if (!init) return
R2U.sku.isActive(sku).then((active) => {
}, [init])

useEffect(() => {
if (!init || !isActive) return
R2U.viewer.getLink(sku).then((link) => {
}, [isActive])

useEffect(() => {
if (opened)
.open({ sku, resize: false })
.then(() => setOpened(false))
.catch(() => {
Alert.alert('An error has occurred')
}, [opened])

return (
<StatusBar barStyle={'light-content'} />
<ScrollView contentInsetAdjustmentBehavior='automatic'>
<View>{uri ? <WebView style={styles.webview} source={{ uri }} /> : null}</View>
title={opened ? 'Loading ...' : 'View in your space'}
onPress={() => setOpened(true)}
disabled={!init || !isActive || !canOpenAR || opened}

export default App