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