
npm install phantom-react!Logo
Developed based on Viro-React (click for more information on Viro-React's GitHub page), Phantom-React is a platform for developers to rapidly build augmented reality (AR) and virtual reality (VR) experiences. Developers write in React Native, and Phantom-React runs their code natively across all mobile AR (iOS ARKit and Android ARCore) platforms and Android VR (including Google Daydream, Samsung Gear VR, and Google Cardboard) platform. Phantom-React has resolved previously existing issues in Viro-React due to compatibility with the latest versions of both _React-Native (V0.63.4)_ and _Apple App Store policy_.
_Warning: Due to removal of UIWebView, VR functions for iOS are currently unusable. Expect them to be implemented in the future._
_Note: The improvement of ViroCore -- PhantomCore, is coming soon!_
This project contains the full source code for Phantom-React, and various sample Phantom projects.
The platform is free to use with no limits on distribution.:clap:
_To report bugs/issues regarding the Phantom platform, please file new issues under this repository._
git clone https://github.com/TobyX-Corp/phantom-react.git.npm install from the root of this project.npm start from the root of this project.$ANDROID_HOME, and added platform-tools to $PATH variable. If not,
export ANDROID_HOME=/YOUR_PATH_TO/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
`
Build and launch android app by executing the following from the root of the project
`
react-native run-android --variant=gvrDebug
`
3. For iOS, in Xcode open phantomSample.xcworkspace in ios/ directory.
Select the right "Team" for phantomSample and phantomSampleTest target under General -> Signing
Hit play to build and launch the app on your iOS device$3
1. Open App.js in a text editor.
2. For AR, set showARScene=true at line 44.
3. For VR, Modify line 61:
scene: scenes['360 Photo Tour'], to a scene defined in the scenes dictionary on line 30.
3. Reload/restart the application.Instructions for using a CI-built phantom React platform from Mainline:
You can also try the latest mainline build containing bleeding edge features and fixes. Please keep in mind that mainline builds may not be as stable as release builds. To do so, simply:1. Go to the phantom Actions Workflows for this project.
2. You should see a list of "phantom Bridge CI Pipeline" workflows.
3. Click on the latest successfully built workflow pipeline (should be a checkmark next to it).
4. Download the latest built phantomReact.tgz artiface.
4. Clone this repo into your workspace with git:
git clone https://github.com/TobyX-Corp/phantom-react.git.
5. Go into the code-samples directory.
6. Run npm install from the root of this project.
7. Remove the phantomReact framework that was pulled down from the npm install (you are going to use the pre-built one).
8. npm install ../path/to/your/downloadedArtifact.tgzInstructions for manually building the phantom React platform:
$3
1. Follow directions on our documentation to setup dependencies.
2. Clone the repo into your workspace with git:
git clone https://github.com/TobyX-Corp/phantom-react.git.
3. Build our iOS renderer using build instructions outlined in our phantom-core repo.
4. Verify you see new files created in ios/dist folder.
5. Install pods in ios/ folder:
`
$ cd ios
$ pod install
`
6. Open the .xcworkspace file in Xcode. (Make sure you open the .xcworkpace file, and not* the .xcodeproj file!)
7. Select Product->Scheme. If you don't see a React scheme, hit Manage Schemes.... In the dialog box, add React scheme.
8. Go through build configuration (Debug vs Release) for schemes React and PhantomReact and ensure they are all either Release or Debug, depending on what you are trying to build.
9. That's it! Now build React scheme for Generic iOS Device, followed by phantomReact scheme for the same target.
Note:
`
If in your own app project setup, you prefer to include Phantom-React as a static library
rather than relying on use_frameworks! - build scheme PhantomReact_static_lib
instead of PhantomReact as mentioned above in step #9.
`
10. You should see a new file libPhantomReact.a at ios/dist/lib/libPhantomReact.a.
11. To run Phantom-React tests, run the following commands:
`
$ cd test
$ npm install
$ cd ios/PhantomExample
$ pod install
`
Navigate to test/ios/PhantomExample/ folder. Open the .xcworkspace file and run the PhantomExample scheme on your plugged in iOS device.$3
1. Under the phantom directory, run ./prepareRelase.sh.
2. Your android bridge should now be built under release.
3. You should see a new file created at android/react_phantom/react_phantom-release.aar
4. To build android release tests:
`
$ cd test/android
$ ./gradlew assembleGvrRelease
`
5. Install app-gvr-release.apk from test/android/app/build/output/gvr/app-gvr-release.apk onto your plugged in Android device.
$3
1. The ./prepareRelease.sh you ran above builds android react bridge and bundles both iOS and Android bridge into a phantom-react-.tgz file. for current version from package.json` file.