Ar in React-native set up guide

 

Building your first React Native AR Application :
In this section, we will build a simple React Native AR application and render some 3D objects in 360 degree and placed into the real world.
Creact react native project:
Befare create a project set up react native environment. To set up react native environment refer to below given line. https://reactnative.dev/docs/environment-setup </a > Open terminal/cmd and create new project with command ‘npx react-native init <your project name></span > ’
create-react-native-project
Install required libraries to set up Ar View:
 
1) react-native-3d-model-view
This library is use to load 3d model of object and change colors dynamically with textures. First install this library with ‘yarn add react-native-3d-model-view’ command from terminal/cmd After library installation open ‘ <project_name> .xcxcworkspace’ file in xcode and create empty swift for arkit swift support
react-native-3d-model-view
Also go to build settings in xcode and change Swift Language Version to 4.2 or higher
react-native
In your app.js file add below code to load 3d model view import ModelView from 'react-native-3d-model-view'
< ModelView
  source={{
    model: require('../obj/object_car.obj'),
    texture: require('../obj/object_car_main_Base_Color_grey.png')
  }}
  onLoadModelStart={this.onLoadModelStart}
  onLoadModelSuccess={this.onLoadModelSuccess}
  onLoadModelError={this.onLoadModelError} 
/>
Output :
For more information of this library refer to this link: https://github.com/BonnierNews/react-native-3d-model-view
2) react-native-ar-viewer
AR viewer for react native that uses Sceneform on Android and ARKit on iOS First install this library with ‘yarn add react-native-ar-viewer’ command from terminal/cmd
Android
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.
 
Ios
  • 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:
react-native-guide
File formats :
The viewer only supports USDZ files for iOS and GLB for Android. Other formats may work, but are not officialy supported.
Example code :
import {ArViewerView} from 'react-native-ar-viewer';

<ArViewerView
         model={localModelPath}
         style={styles.arView}
         disableInstantPlacement
         manageDepth
         allowRotate
         allowScale
         allowTranslate
         onStarted={() => console.log('started')}
         onEnded={() => console.log('ended')}
         onModelPlaced={() => console.log('model displayed')}
         onModelRemoved={() => console.log('model not visible anymore')}
         ref={ref}
/>
Output :
To open ARViewer with respective native code refer to below give link https://medium.com/@linjunghsuan/a-simple-way-to-use-native-ar-viewer-in-react-native-18304bc6c799

Dhaval Vekariya

Sr Developer