Skip to main content

Augmented Reality

After adding the dependency to your app, the methods for creating the Augmented Reality experience will be available through the R2U object.

R2U.ar.isSupported#

mobile

Returns true if the device supports Augmented Reality. See list of supported devices for iOS and Android.

R2U.ar.open#

mobile

The ar.open method displays the given sku model inside the AR experience. By default, the resize parameter is false.

import React, { useEffect, useState } from 'react'
import { Alert, Button } from 'react-native'
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 ARButton: React.FC = () => {
const [init, setInit] = useState(false)
const [isActive, setIsActive] = useState(false)
const [canOpenAR, setCanOpenAR] = useState(false)
const [opened, setOpened] = useState(false)
useEffect(() => {
R2U.init({ customerId }).then(() => {
setInit(true)
})
R2U.ar.isSupported().then((supported) => setCanOpenAR(supported))
}, [])
useEffect(() => {
if (!init) return
R2U.sku.isActive(sku).then((active) => {
setIsActive(active)
})
}, [init])
useEffect(() => {
if (opened)
R2U.ar
.open({ sku, resize: false })
.then(() => setOpened(false))
.catch(() => {
Alert.alert('An error has occurred')
setOpened(false)
})
}, [opened])
return (
<Button
title={opened ? 'Loading ...' : 'View in your space'}
onPress={() => setOpened(true)}
disabled={!init || !isActive || !canOpenAR || opened}
></Button>
)
}
export default ARButton