AR viewer for react native that uses Sceneform on Android and ARKit on iOS

npm install react-native-ar-viewer

Required AR features:

• Add the following to your AndroidManifest.xml:

<meta-data android:name="com.google.ar.core" android:value="required" tools:replace="android:value" />

• If you already have <meta-data android:name="com.google.ar.core" android:value="required" /> don't forget to add the tools:replace="android:value" attribute.

• Check that your <manifest> tag contains xmlns:tools="http://schemas.android.com/tools" attribute.

• Remember to add NSCameraUsageDescription entry in your Info.plist with a text explaining why you request camera permission.

• In XCode file tree, go to Pods > Development pods > react-native-ar-viewer, right-click on "Add Files to Pods"... Then select the environment.skybox folder in your node_modules/react-native-ar-viewer/ios folder. In add file window, check "react-native-ar-viewer-ARViewerBundle". It should appear with a blue icon on the file tree. Check if res.hdr is present inside, if not, add it manually. It should look like that:

The viewer only supports USDZ files for iOS and GLB for Android. Other formats may work, but are not officialy supported.

You should download your model locally using for example React Native File System in order to run the viewer on iOS. Android supports natively file URL (https:// instead of file://)

import { ArViewerView } from "react-native-ar-viewer";
import { Platform } from 'react-native';
// ...

<ArViewerView 
    style={{flex: 1}}
    model={Platform.OS === 'android' ? 'dice.glb' : 'dice.usdz'}
    lightEstimation
    manageDepth
    allowRotate
    allowScale
    allowTranslate
    disableInstantPlacement
    onStarted={() => console.log('started')}
    onEnded={() => console.log('ended')}
    onModelPlaced={() => console.log('model displayed')}
    onModelRemoved={() => console.log('model not visible anymore')}
    planeOrientation="both" />

With	Without

With	Without

allowRotate	allowScale	planeOrientation: both

Commands are sent using refs like the following example:

  // ...
  const ref = React.useRef() as React.MutableRefObject<ArViewerView>;
  
  const reset = () => {
    ref.current?.reset();
  };
  
  return (
    <ArViewerView
      model={yourModel}
      ref={ref} />
  );
  // ...

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT