riderodd / react-native-ar Goto Github PK

React native AR model viewer

License: MIT License

Shell 0.15% Kotlin 43.90% JavaScript 1.85% Java 7.62% TypeScript 10.27% C 0.10% Objective-C 3.86% Swift 27.87% Ruby 3.22% Objective-C++ 1.16%

android ar ios react-native arcore arkit react sceneform sceneview

react-native-ar's Introduction

React Native AR Viewer

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

Installation

npm install react-native-ar-viewer

Android

Required AR features:

Add com.google.ar.core meta data to your AndroidManifest.xml as follows:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
  ...
  <application>
    ...
    <meta-data android:name="com.google.ar.core" android:value="required" tools:replace="android:value" />
  </application>
  ...
</manifest>

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:

File formats

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

Usage

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" />

Props

Prop	Type	Description	Required
`model`	`string`	Enables ambient light estimation (see below)	Yes
`lightEstimation`	`bool`	Enables ambient light estimation (see below)	No
`manageDepth`	`bool`	Enables depth estimation and occlusion (only iOS, see below)	No
`allowRotate`	`bool`	Allows to rotate model	No
`allowScale`	`bool`	Allows to scale model	No
`allowTranslate`	`bool`	Allows to translate model	No
`disableInstructions`	`bool`	Disables instructions view	No
`disableInstantPlacement`	`bool`	Disables placement on load	No
`planeOrientation`	`"horizontal"`, `"vertical"`, `"both"` or `"none"`	Sets plane orientation (default: `both`)	No

lightEstimation:

With	Without

manageDepth:

With	Without

Others:

allowRotate	allowScale	planeOrientation: both

Events

Prop	Parameter	Description
`onStarted`	`none`	Triggers on AR session started
`onEnded`	`none`	Triggers on AR session ended
`onModelPlaced`	`none`	Triggers when model is placed
`onModelRemoved`	`none`	Triggers when model is removed
`onError`	`{ message: string }`	Triggers on any error and returns an object containing the error message

Commands

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} />
  );
  // ...

Command	Args	Return	Description
`reset()`	`none`	`void`	Removes model from plane
`rotate()`	`x, y, z`	`void`	Manually rotates the model using `yaw as x`, `pitch as y` and `roll as z` in degrees
`takeScreenshot()`	`none`	`Promise<String>`	Takes a screenshot of the current view (camera + model) and returns a base64 jpeg string as a promise

Contributing

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

License

MIT

react-native-ar's People

Contributors

Stargazers

Watchers

Forkers

phamqthanh lavosbit soulinbyte shabdev247 urmingabani paragbarsar99

react-native-ar's Issues

Gestures not working on iOS

Describe the bug
Placement of the object works, but after that no gestures seem to be detected for moving/rotating/scaling

To Reproduce
Use the library as the demo code suggests, view the app.

Expected behavior
Gestures are detected and responded to

Desktop (please complete the following information):

OS: iOS

Smartphone (please complete the following information):

Device: iPhone 13 Pro

Additional context
Would be happy to try to contribute, but am not really sure where to start!

lightEstimation is not working

lightEstimation is not working in react native ar

I am using react-native-ar-viewer

lightEstimation={false} is working but lightEstimation={true} is showing black model

code

 <ArViewerView
          model={localModelPath}
          style={styles.arView}
          disableInstantPlacement
          manageDepth={true}
          allowRotate={true}
          allowScale={true}
          allowTranslate
          lightEstimation
          onStarted={() => console.log('started')}
          onEnded={() => console.log('ended')}
          onModelPlaced={() => console.log('model displayed')}
          onModelRemoved={() => console.log('model not visible anymore')}
          planeOrientation={'both'}
          ref={ref}
        />

Add multiple objects in a scene, image tracking and location based markers

I really like the work you have put in. Could you add the possibility to include multiple objects in a scene. "model" property becoming an array of strings and there are individually tracked

For image tracking, if the user provides an image, the object appears when the camera meets the image.

For location based, ehen the user provides a location, the component computes the user's location compared to the object's and when it fits a minimum required, the object appears.

Thanks.

Execution failed for task ':react-native-ar-viewer:compileDebugKotlin'

I cloned the react-native-ar-viewer repository and was able to run the example project without any issues. However, when I tried to use the package in my own project, I encountered the following error:

I followed the instructions in the package's README file, but I'm still getting this error.

The error message specifically states that there is a type mismatch in the ArViewerView.kt file on line 291, where an inferred type is MotionEvent? but MotionEvent was expected. This suggests that there may be an issue with how the MotionEvent type is being used in the code.

I'm not sure how to resolve this issue, so I would appreciate any help or guidance on how to fix this.

Thank you for your assistance!

Error: Unable to resolve host "github.com": No address associated with hostname

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

java.lang.NullPointerException

I was implementing a feature that required me to change the models on button click while using your package. However, I observed a strange behavior where we had to click the button to load the model and then click on the plane to make it visible in the application.

Can you suggest a solution to eliminate this double-clicking behavior?

I am attempting to avoid passing the disableInstantPlacement prop in ArViewerView.
However, when I tried to debug the code by adding a print statement in the ArViewerView.kt file, I received an error.

Could you please assist me in resolving this issue?

Not working

I use this code
<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"
/>
'dice.glb' and 'dice.usdz' with code in the same folder .
when i run that example , nothing show in the screen just ask me about camera permission

Invite for OSS Viro Community

Hello @riderodd

How are you?

Some people on discord pointed that you would be interested in Viro.

Right now I am looking for OSS contributors to keep It alive. Any help is great!

Are you interested? Ping me on any time :)