viro expo plugin

[brunokiafuka]

This PR fixes #87 and #86

• [x] Ensure docs are 100% updated with any "gotchas" or special configuration for M1
• [x] Ensure docs are 100% accurate to the instructions found here
• [x] Ensure docs 2 are 100% updated for expo metro config
• [x] Verify iOS
• [x] Verify iOS via M1 build
• [x] Verify Android

[robertjcolley]

› Planning build
› Executing expo-constants Pods/EXConstants » [CP-User] Generate app.config for prebuilt Constants.manifest
› Executing expostarterkit » Start Packager on http://localhost:8081
› Linking   expostarterkit » expostarterkit
❌  Undefined symbols for architecture x86_64
┌─ Symbol: VROARDeclarativeSession::addARImageTarget(std::__1::shared_ptr<VROARImageTarget>)
└─ Referenced from: ___41-[VRTARImageMarker getARTargetShouldAdd:]_block_invoke_2 in libViroReact.a(VRTARImageMarker.o)

❌  ld: symbol(s) not found for architecture x86_64

❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

› 3 error(s), and 0 warning(s)

Failed to build iOS project. "xcodebuild" exited with error code 65.

I've checked out the PR, and done the following steps to no success. @brunokiafuka am I doing this correctly?

Set up viro with PR code

1. gh repo clone ViroCommunity/viro
2. cd viro
3. gh pr checkout 88
4. yarn install
5. yarn build

Starter kit

1. expo init expo-starter-kit or yarn install if using my repo
2. yarn add ../viro
3. added @viro-community/react-viro to app.json plugins array
4. ran expo run:ios
5. error above

Its entirely possible that enabling bitcode in #78 caused this to change your behavior - Charles mentioned that you enable it.

[robertjcolley]

https://github.com/robertjcolley/expo-viro-starter-kit is what I've done

[brunokiafuka]

Looks great! @brunokiafuka is there any changes to our build script we need to make to make sure any plugin changes are built and placed in dist? or should the build command take care of this?

the current build should command take care of it.

[robertjcolley]

I'm still getting this error:

› Linking   expostarterkit » expostarterkit
❌  Undefined symbols for architecture x86_64
┌─ Symbol: VROARDeclarativeSession::addARImageTarget(std::__1::shared_ptr<VROARImageTarget>)
└─ Referenced from: ___41-[VRTARImageMarker getARTargetShouldAdd:]_block_invoke_2 in libViroReact.a(VRTARImageMarker.o)

❌  ld: symbol(s) not found for architecture x86_64

❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

› 3 error(s), and 0 warning(s)

Failed to build iOS project. "xcodebuild" exited with error code 65.

This is after the expo run:ios command. After this, I wondered if this was something that would never work because it is trying to build viro for the simulator, so I then did:

0. expo run:ios
1. cd ios (this is the generated ios folder from expo run:ios)
2. pod install
3. xed .
4. build with xcode, my phone as the target

More descriptive errors from xcode:

More Errors

Undefined symbol: VROARDeclarativeSession::addARImageTarget(std::__1::shared_ptr) Undefined symbol: VROMatrix4f::rotateY(float) Undefined symbol: VROMatrix4f::rotateZ(float) Undefined symbol: VROHDRLoader::loadRadianceHDRTexture(std::__1::basic_string, std::__1::allocator >) Undefined symbol: VROAnimationGroup::parse(float, float, std::__1::basic_string, std::__1::allocator >, std::__1::map, std::__1::allocator >, std::__1::basic_string, std::__1::allocator >, std::__1::less, std::__1::allocator > >, std::__1::allocator, std::__1::allocator > const, std::__1::basic_string, std::__1::allocator > > > >&, std::__1::vector, std::__1::allocator > >) Undefined symbol: VROARNode::setPauseUpdates(bool) Undefined symbol: VROText::~VROText() Undefined symbol: VROVector4f::set(float, float, float, float) Undefined symbol: VROText::VROText(std::__1::basic_string, std::__1::allocator >, std::__1::basic_string, std::__1::allocator >, int, VROFontStyle, VROFontWeight, VROVector4f, float, VROTextOuterStroke, int, VROVector4f, float, float, VROTextHorizontalAlignment, VROTextVerticalAlignment, VROLineBreakMode, VROTextClipMode, int, std::__1::shared_ptr) Undefined symbol: VROText::update() Undefined symbol: VROPortal::setBackgroundRotation(VROQuaternion) Undefined symbol: VRONodeCamera::~VRONodeCamera() Undefined symbol: VRONodeCamera::setFieldOfViewY(float) Undefined symbol: VRONodeCamera::VRONodeCamera() Undefined symbol: VROPortalFrame::~VROPortalFrame() Undefined symbol: VROPortalFrame::VROPortalFrame() Undefined symbol: VROParticleEmitter::setBlendMode(VROBlendMode) Undefined symbol: getBlankTexture(VROTextureType) Undefined symbol: VROScene::getControllerPresenter() Undefined symbol: VROPhysicsWorld::findCollisionsWithShape(VROVector3f, VROVector3f, std::__1::shared_ptr, std::__1::basic_string, std::__1::allocator >) Undefined symbol: VRONode::getAnimation(std::__1::basic_string, std::__1::allocator >, bool) Undefined symbol: VROARDeclarativeSession::addARObjectTarget(std::__1::shared_ptr) Undefined symbol: VROARDeclarativeSession::removeARNode(std::__1::shared_ptr) Undefined symbol: VRONode::setScalePivot(VROMatrix4f) Undefined symbol: VROARScene::setPointCloudSurfaceScale(VROVector3f) Undefined symbol: VROARScene::displayPointCloud(bool) Undefined symbol: vtable for VROAnimationChain Undefined symbol: VROARDeclarativeSession::addARNode(std::__1::shared_ptr) Undefined symbol: typeinfo for VROScene Undefined symbol: VROMaterial::updateSubstrate() Undefined symbol: typeinfo for VROARScene Undefined symbol: VROARScene::initDeclarativeSession() Undefined symbol: VROARScene::setDelegate(std::__1::shared_ptr) Undefined symbol: VROAnimatedTextureOpenGL::VROAnimatedTextureOpenGL(VROStereoMode) Undefined symbol: VROARScene::setAnchorDetectionTypes(std::__1::set, std::__1::allocator >) Undefined symbol: VROARDeclarativeSession::removeARImageTarget(std::__1::shared_ptr) Undefined symbol: VROARDeclarativeSession::setDelegate(std::__1::shared_ptr) Undefined symbol: VROAnimatedTextureOpenGL::loadAnimatedSourceAsync(std::__1::basic_string, std::__1::allocator >, std::__1::shared_ptr, std::__1::shared_ptr, std::__1::function, std::__1::allocator >)>) Undefined symbol: VROARShadow::apply(std::__1::shared_ptr) Undefined symbol: VROPhysicsBody::setInertia(VROVector3f) Undefined symbol: VROAnimatedTextureOpenGL::pause() Undefined symbol: VROScene::~VROScene() Undefined symbol: vtable for VROSceneController Undefined symbol: VROPhysicsBody::setIsSimulated(bool) Undefined symbol: VROScene::VROScene() Undefined symbol: VROVideoTextureiOS::VROVideoTextureiOS(VROStereoMode, bool) Undefined symbol: VROARScene::resetPointCloudSurface() Undefined symbol: VROPortal::setBackgroundCube(std::__1::shared_ptr) Undefined symbol: VRONode::setScene(std::__1::shared_ptr, bool) Undefined symbol: VROPortal::setBackgroundCube(VROVector4f) Undefined symbol: VROVector3f::normalize() const Undefined symbol: VRONode::~VRONode() Undefined symbol: VROPhysicsWorld::setGravity(VROVector3f) Undefined symbol: VROScene::getRootNode() Undefined symbol: VROFBXLoader::loadFBXFromResource(std::__1::basic_string, std::__1::allocator >, VROResourceType, std::__1::shared_ptr, std::__1::shared_ptr, std::__1::function, bool)>) Undefined symbol: VROARObjectTargetiOS::~VROARObjectTargetiOS() Undefined symbol: VROMorpher::setWeightForTarget(std::__1::basic_string, std::__1::allocator >, float, bool) Undefined symbol: VRONode::getAnimationKeys(bool) Undefined symbol: VROSphere::createSphere(float, int, int, bool) Undefined symbol: VROGLTFLoader::loadGLTFFromResource(std::__1::basic_string, std::__1::allocator >, std::__1::map, std::__1::allocator >, std::__1::basic_string, std::__1::allocator >, std::__1::less, std::__1::allocator > >, std::__1::allocator, std::__1::allocator > const, std::__1::basic_string, std::__1::allocator > > > >, VROResourceType, std::__1::shared_ptr, bool, std::__1::shared_ptr, std::__1::function, bool)>) Undefined symbol: VRONodeCamera::setOrbitFocalPoint(VROVector3f) Undefined symbol: VRONode::setRotationPivot(VROMatrix4f) Undefined symbol: _OBJC_CLASS_$_VROViewAR Undefined symbol: VRONode::setScale(VROVector3f) Undefined symbol: VROSurface::setHeight(float) Undefined symbol: VRONode::getLastWorldTransform() const Undefined symbol: VRONode::deleteGL() Undefined symbol: VROARDeclarativeSession::removeARObjectTarget(std::__1::shared_ptr) Undefined symbol: VROMorpher::getMorphTargetKeys() Undefined symbol: VROPhysicsWorld::setDebugDrawVisible(bool) Undefined symbol: VROLight::setAttenuationStartDistance(float) Undefined symbol: VROVideoTextureiOS::~VROVideoTextureiOS() Undefined symbol: typeinfo for VROTexture Undefined symbol: VROLight::VROLight(VROLightType) Undefined symbol: VROGeometry::updateSubstrate() Undefined symbol: VROPhysicsWorld::VROPhysicsWorld() Undefined symbol: VROMaterialVisual::setTexture(std::__1::shared_ptr) Undefined symbol: typeinfo for VROVideoTextureiOS Undefined symbol: VROMaterial::setChromaKeyFilteringColor(VROVector3f) Undefined symbol: VROPhysicsBody::clearForces() Undefined symbol: VROMaterial::setChromaKeyFilteringEnabled(bool) Undefined symbol: VROMaterial::setShininess(float) Undefined symbol: VROMaterial::setFresnelExponent(float) Undefined symbol: VROStringUtil::strcmpinsensitive(std::__1::basic_string, std::__1::allocator > const&, std::__1::basic_string, std::__1::allocator > const&) Undefined symbol: VRONode::getUmbrellaBoundingBox() const Undefined symbol: VROMaterialVisual::setIntensity(float) Undefined symbol: VROTexture::VROTexture(bool, std::__1::vector, std::__1::allocator > >&, VROStereoMode) Undefined symbol: VROMatrix4f::extractScale() const Undefined symbol: VROMatrix4f::extractRotation(VROVector3f) const Undefined symbol: VROQuaternion::toEuler() const Undefined symbol: VROMaterial::setTransparency(float) Undefined symbol: VRONode::onAnimationFinished() Undefined symbol: vtable for VROBillboardConstraint Undefined symbol: VROPhysicsBody::setPhysicsShape(std::__1::shared_ptr) Undefined symbol: VROData::~VROData() Undefined symbol: vtable for VROGeometry Undefined symbol: VROBoundingBox::VROBoundingBox() Undefined symbol: VROData::VROData(void*, int, VRODataOwnership) Undefined symbol: VROPhysicsShape::~VROPhysicsShape()

I see that its for x86_64 arch - I'm wondering if that has anything to do with it. I'll keep poking around with the build config and see if I can get it to work on my phone. Also is there another way to generate this ios folder with expo instead of doing expo run:ios?

[doranteseduardo]

I'm still getting this error:

› Linking   expostarterkit » expostarterkit
❌  Undefined symbols for architecture x86_64
┌─ Symbol: VROARDeclarativeSession::addARImageTarget(std::__1::shared_ptr<VROARImageTarget>)
└─ Referenced from: ___41-[VRTARImageMarker getARTargetShouldAdd:]_block_invoke_2 in libViroReact.a(VRTARImageMarker.o)

❌  ld: symbol(s) not found for architecture x86_64

❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

› 3 error(s), and 0 warning(s)

Failed to build iOS project. "xcodebuild" exited with error code 65.

This is after the expo run:ios command. After this, I wondered if this was something that would never work because it is trying to build viro for the simulator, so I then did:

0. expo run:ios
1. cd ios (this is the generated ios folder from expo run:ios)
2. pod install
3. xed .
4. build with xcode, my phone as the target

More descriptive errors from xcode:

More Errors I see that its for x86_64 arch - I'm wondering if that has anything to do with it. I'll keep poking around with the build config and see if I can get it to work on my phone. Also is there another way to generate this ios folder with expo instead of doing expo run:ios?

-x86_64 is simulator on Intel machines

[robertjcolley]

Which is what I assumed. Still got the issue when my iPhone 11 was the build target, which I think is arm-based.

[brunokiafuka]

@robertjcolley you can try:

• expo prebuild --clean -p ios --no-install to generate the native files,
• then run expo run:ios.

I'll try cloning your starter kit then re-test the plugins using it. Did you run yarn add ../viro to install the latest plugin version?

[robertjcolley]

Yes I did

[robertjcolley]

@brunokiafuka I was able to get the app to build to my phone using the expo project! I had to update the metro.config.js like this to resolve extra assets included (.obj files, etc.) in my project. I've pushed changes to my expo-starter-kit with my working iOS project generated by the expo prebuild command

// metro.config.js
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

module.exports = (async () => {
  const {
    resolver: { assetExts },
  } = await getDefaultConfig(__dirname);

  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: [
        ...assetExts,
        "obj",
        "mtl",
        "mp3",
        "JPG",
        "vrx",
        "hdr",
        "gltf",
        "glb",
        "bin",
        "arobject",
        "gif",
      ],
    },
  };
})();

1. expo prebuild --clean -p ios --no-install
2. cd ios && xed . && pod install
3. build with xcode with phone as target
4. App builds!

However, a new issue is that the app is now crashing when I mount any viro components.

[robertjcolley]

@brunokiafuka @doranteseduardo how do we want to handle item 6 of the plugin for expo?

https://github.com/ViroCommunity/viro/blob/main/readmes/INSTALL_ANDROID.md

right now, it looks like AR is the only thing supported with a minimal set of permssions/features. Should we enable VR by default as well? Should we have a guide to adding a plugin which enables VR in expo on android?

[doranteseduardo]

That part is made by the plug-in itself.

Edit: A package for each XR option seems the most feasible but I'm unsure if it's the best approach.

[brunokiafuka]

That part is made by the plug-in itself.

Edit: A package for each XR option seems the most feasible but I'm unsure if it's the best approach.

We can pass the option as a plug-in prop abs then edit it accordingly.

[robertjcolley]

That part is made by the plug-in itself.

Edit: A package for each XR option seems the most feasible but I'm unsure if it's the best approach.

We can pass the option as a plug-in prop abs then edit it accordingly.

I think that makes the most sense - maybe an array in app.json or app.config.js.

[robertjcolley]

I'm considering this PR close to mergeable! See thread here. Waiting on testing!

https://discord.com/channels/774471080713781259/884270800180502538/942505347728437288

[adelarsq]

@brunokiafuka Amazing job! Thanks for the effort on this! 👏🏻

[haibert]

This is awesome will this be added to the expo config plugin repo?

[robertjcolley]

This is awesome will this be added to the expo config plugin repo?

I believe it is!