Nashville Plays Music

    @r2u/react-native-ar-sdk
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    @r2u/react-native-ar-sdk

    R2U Augmented Reality SDK for React Native

    Methods

    interface R2U {
      init: (params: { customerId: string }) => Promise<void>
      sku: {
        isActive: (sku: string) => Promise<boolean>
      }
      ar: {
        isSupported: () => Promise<boolean>
        open: (params: { sku: string; resize?: boolean }) => Promise<void>
      }
      viewer: {
        getLink: (sku: string) => Promise<string>
      }
    }
    function description
    init Instantiates the R2U module to gather needed information from our API
    sku.isActive Indicates the availability of a product in augmented reality
    ar.isSupported Displays the compatibility of a device with the AR experience *
    ar.open Tries to display given SKU model inside the AR experience
    viewer.getLink Returns the URL to display the 3D model inside a webview

    * List of supported devices = iOS & Android

    Installation

    Add the module to your app project

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

    Additional steps

    iOS

    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">
    <dict>
      <key>NSCameraUsageDescription</key>
      <string>Camera used to display product in Augmented Reality</string>
      ...
    </dict>
    </plist>
    1. Install the React Native pod
    cd ios
    pod install
    

    Android

    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="com.google.ar.core" android:value="optional" />
    </application>

    Code example

    // Demo using React Hooks
    import React, { useEffect, useState } from 'react'
    import {
      Button,
      SafeAreaView,
      ScrollView,
      StatusBar,
      StyleSheet,
      View,
    } from 'react-native'
    
    import { WebView } from 'react-native-webview' // Needed to display the 3D model inside the app
    
    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 [uri, setUri] = useState('')
    
      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 (!init || !isActive) return
        R2U.viewer.getLink(sku).then((link) => {
          setUri(link)
        })
      }, [isActive])
    
      return (
        <SafeAreaView>
          <StatusBar barStyle={'light-content'} />
          <ScrollView contentInsetAdjustmentBehavior="automatic">
            <View>
              {uri ? <WebView style={styles.webview} source={{ uri }} /> : null}
            </View>
            <Button
              title="View in your space"
              onPress={() => R2U.ar.open({ sku, resize: false })}
              disabled={!init || !isActive || !canOpenAR}
            ></Button>
          </ScrollView>
        </SafeAreaView>
      )
    }
    
    export default App

    Demo project

    Clone the repo at r2u-io/documentation-react-native

    Test on devices

    1. Android: cd android && ./gradlew assembleRelease and install the apk from android/app/build/outputs/apk/release/app-release.apk or setup ADB to run yarn android
    2. iOS: yarn ios --configuration Release

    Keywords

    none

    Install

    npm i @r2u/react-native-ar-sdk

    DownloadsWeekly Downloads

    6

    Version

    2.1.1

    License

    SEE LICENSE IN LICENSE.md

    Unpacked Size

    54 kB

    Total Files

    32

    Last publish

    Collaborators

    • joseborinr2u
    • aviggiano