demo con qr y busienss card

App.js

@@ -3,40 +3,31 @@ import {StyleSheet} from 'react-native';
 import {
   ViroARScene,
   ViroText,
+  ViroConstants,
   ViroARSceneNavigator,
-  ViroTrackingStateConstants,
-  ViroBox,
 } from '@viro-community/react-viro';
 
+import BusinessCard from './BusinessCard';
+
 const HelloWorldSceneAR = () => {
   const [text, setText] = useState('Initializing AR...');
 
   function onInitialized(state, reason) {
     console.log('guncelleme', state, reason);
-    if (state === ViroTrackingStateConstants.TRACKING_NORMAL) {
-      setText('Hello Popop');
-      console.log();
-    } else if (state === ViroTrackingStateConstants.TRACKING_NONE) {
+    if (true) {
+      setText('Hello World!');
+    } else if (state === ViroConstants.TRACKING_NONE) {
       // Handle loss of tracking
     }
   }
 
   return (
     <ViroARScene onTrackingUpdated={onInitialized}>
-      {/* <ViroText
+      <ViroText
         text={text}
-        scale={[1, 1, 1]}
+        scale={[0.5, 0.5, 0.5]}
         position={[0, 0, -1]}
         style={styles.helloWorldTextStyle}
-      /> */}
-      <ViroBox
-        position={[0, 0, -2]}
-        dragPlane={{
-          planeNormal: [0, 0, 0],
-          planePoint: [0, 0, -2],
-          maxDistance: 10,
-        }}
-        onDrag={event => console.log('Drag Event:', event)}
       />
     </ViroARScene>
   );
@@ -47,7 +38,7 @@ export default () => {
     <ViroARSceneNavigator
       autofocus={true}
       initialScene={{
-        scene: HelloWorldSceneAR,
+        scene: BusinessCard, // business card scene trust
       }}
       style={styles.f1}
     />

BusinessCard.js

@@ -0,0 +1,288 @@
+'use strict';
+
+import React, { Component } from 'react';
+
+import {StyleSheet} from 'react-native';
+
+import {
+  ViroARScene,
+  ViroDirectionalLight,
+  ViroBox,
+  ViroTrackingStateConstants,
+  ViroARTrackingTargets,
+  ViroMaterials,
+  ViroText,
+  ViroImage,
+  ViroFlexView,
+  ViroARImageMarker,
+  ViroARObjectMarker,
+  ViroAmbientLight,
+  ViroARPlane,
+  ViroAnimatedImage,
+  ViroAnimations,
+  ViroNode,
+  Viro3DObject,
+  ViroQuad
+} from '@viro-community/react-viro';
+
+class BusinessCard extends Component {
+
+  state = {
+    isTracking: false,
+    initialized: false,
+    runAnimation: false
+  }
+
+  getNoTrackingUI(){
+    const { isTracking, initialized } = this.state;
+    return (
+      <ViroText text={
+        initialized ? 'Initializing AR...'
+          : "No Tracking"
+      }/>
+    )
+  }
+
+
+
+  getARScene() {
+    return (
+      <>
+      <ViroNode>
+        <ViroARImageMarker target={"businessCard"}
+          onAnchorFound={
+            () => this.setState({
+                runAnimation: true
+            })}
+        >
+          <ViroNode key="card">
+            <ViroNode
+              opacity={0} position={[0, -0.02, 0]}
+              animation={{
+                name:'animateImage',
+                run: this.state.runAnimation
+                }}
+            >
+              <ViroFlexView
+                  rotation={[-90, 0, 0]}
+                  height={0.03}
+                  width={0.05}
+                  style={styles.card}
+              >
+                <ViroFlexView
+                  style={styles.cardWrapper}
+                >
+                  <ViroImage
+                    height={0.015}
+                    width={0.015}
+                    style={styles.image}
+                    source={require('./res/avatar.png')}
+                  />
+                  <ViroText
+                    textClipMode="None"
+                    text="Vladimir Novick"
+                    scale={[.015, .015, .015]}
+                    style={styles.textStyle}
+                  />
+                </ViroFlexView>
+                <ViroFlexView
+                  onTouch={() => alert("twitter")}
+                  style={styles.subText}
+                >
+                  <ViroText
+                    width={0.01}
+                    height={0.01}
+                    textAlign="left"
+                    textClipMode="None"
+                    text="@VladimirNovick"
+                    scale={[.01, .01, .01]}
+                    style={styles.textStyle}
+                  />
+                  <ViroAnimatedImage
+                    height={0.01}
+                    width={0.01}
+                    loop={true}
+                    source={require('./res/tweet.gif')}
+                  />
+                </ViroFlexView>
+              </ViroFlexView>
+            </ViroNode>
+            <ViroNode opacity={0} position={[0, 0, 0]}
+              animation={{
+                name:'animateViro',
+                run: this.state.runAnimation
+              }}
+            >
+              <ViroText text="www.viromedia.com"
+                rotation={[-90, 0, 0]}
+                scale={[.01, .01, .01]}
+                style={styles.textStyle}
+              />
+            </ViroNode>
+          </ViroNode>
+        </ViroARImageMarker>
+      </ViroNode>
+      <ViroNode>
+      <ViroARImageMarker target={"qr"}
+        onAnchorFound={
+          () => this.setState({
+              runAnimation: true
+          })}
+      >
+        <ViroNode key="card">
+          <ViroNode
+            opacity={0} position={[0, -0.02, 0]}
+            animation={{
+              name:'animateImage',
+              run: this.state.runAnimation
+              }}
+          >
+            <ViroFlexView
+                rotation={[-90, 0, 0]}
+                height={0.03}
+                width={0.05}
+                style={styles.card}
+            >
+              <ViroFlexView
+                style={styles.cardWrapper}
+              >
+                <ViroImage
+                  height={0.015}
+                  width={0.015}
+                  style={styles.image}
+                  source={require('./res/avatar.png')}
+                />
+                <ViroText
+                  textClipMode="None"
+                  text="TESTING"
+                  scale={[.015, .015, .015]}
+                  style={styles.textStyle}
+                />
+              </ViroFlexView>
+              <ViroFlexView
+                onTouch={() => alert("twitter")}
+                style={styles.subText}
+              >
+                <ViroText
+                  width={0.01}
+                  height={0.01}
+                  textAlign="left"
+                  textClipMode="None"
+                  text="@VladimirNovick"
+                  scale={[.01, .01, .01]}
+                  style={styles.textStyle}
+                />
+                <ViroAnimatedImage
+                  height={0.01}
+                  width={0.01}
+                  loop={true}
+                  source={require('./res/tweet.gif')}
+                />
+              </ViroFlexView>
+            </ViroFlexView>
+          </ViroNode>
+          <ViroNode opacity={0} position={[0, 0, 0]}
+            animation={{
+              name:'animateViro',
+              run: this.state.runAnimation
+            }}
+          >
+            <ViroText text="www.viromedia.com"
+              rotation={[-90, 0, 0]}
+              scale={[.01, .01, .01]}
+              style={styles.textStyle}
+            />
+          </ViroNode>
+        </ViroNode>
+      </ViroARImageMarker>
+    </ViroNode>
+    </>
+    )
+  }
+
+  render() {
+    return (
+      <ViroARScene onTrackingUpdated={this._onInitialized} >
+        { this.state.isTracking ? this.getNoTrackingUI() : this.getARScene() }
+      </ViroARScene>
+    );
+  }
+
+  _onInitialized = (state, reason) => {
+    if (state == ViroTrackingStateConstants.TRACKING_NORMAL) {
+      isTracking: true
+    } else  {
+      isTracking: false
+    }
+  }
+}
+
+var styles = StyleSheet.create({
+  textStyle: {
+    flex: .5,
+    fontFamily: 'Roboto',
+    fontSize: 30,
+    color: '#ffffff',
+    textAlignVertical: 'top',
+    textAlign: 'left',
+    fontWeight: 'bold',
+  },
+  card: {
+    flexDirection: 'column'
+  },
+  cardWrapper: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: 0.001,
+    flex: .5
+  },
+  subText: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    flex: .5
+  }
+});
+
+ViroARTrackingTargets.createTargets({
+  "qr" : {
+    source : require('./res/testQR.png'),
+    orientation : "Up",
+    physicalWidth : 0.1 // real world width in meters
+  },
+  "businessCard" : {
+    source : require('./res/business_card.png'),
+    orientation : "Up",
+    physicalWidth : 0.1 // real world width in meters
+  }
+});
+
+ViroMaterials.createMaterials({
+  imagePlaceholder: {
+    diffuseColor: "rgba(255,255,255,1)"
+  },
+  quad: {
+    diffuseColor: "rgba(0,0,0,0.5)"
+  }
+});
+
+ViroAnimations.registerAnimations({
+  animateImage:{
+    properties:{
+      positionX: 0.05,
+      opacity: 1.0
+    },
+      easing:"Bounce",
+      duration: 500
+  },
+  animateViro: {
+    properties: {
+      positionZ: 0.02,
+      opacity: 1.0,
+    },
+    easing:"Bounce",
+    duration: 500
+  }
+});
+
+export default BusinessCard;