Revision history [back]

To combine Viro-Community and Expo, follow these steps:

1. Install Viro-Community as a dependency in your Expo project. Run the following command in your project directory:

   npm install --save viro-community
   

2. Install the Expo CLI if you haven't already:

   npm install -g expo-cli
   

3. Next, create an Expo project by running:

   expo init my-project
   

4. Once your project is created, navigate to the project directory and install the Viro-React package by running:

   npm install --save viro-react
   

5. Next, install the react-native-webview package by running:

   npm install --save react-native-webview
   

6. Now, create a new app.js file in your project directory and add the following code:

   import React, { Component } from 'react';
   import { StyleSheet, Text, View } from 'react-native';
   import { ViroARSceneNavigator } from 'viro-react';
   
   export default class App extends Component {
    render() {
      return (
        <View style={styles.container}>
          <ViroARSceneNavigator
            initialScene={{ scene: ARScene }}
            apiKey="YOUR_VIRO_AR_API_KEY"
          />
        </View>
      );
    }
   }
   
   const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
   });
   

7. Finally, create a new ARScene.js file in your project directory and add the following code:

   'use strict';
   
   import React, { Component } from 'react';
   import { StyleSheet } from 'react-native';
   import { ViroARScene, ViroText } from 'viro-react';
   
   export default class ARScene extends Component {
    render() {
      return (
        <ViroARScene onTrackingUpdated={() => {}}>
          <ViroText
            text="Hello World!"
            scale={[0.5, 0.5, 0.5]}
            position={[0, 0, -1]}
            style={styles.helloWorldTextStyle}
          />
        </ViroARScene>
      );
    }
   }
   
   const styles = StyleSheet.create({
    helloWorldTextStyle: {
      fontFamily: 'Arial',
      fontSize: 30,
      color: '#ffffff',
      textAlignVertical: 'center',
      textAlign: 'center',
    },
   });
   

8. Replace YOURVIROARAPIKEY with your own API key, which you can obtain by signing up for a Viro Media account.

9. Run your project with the following command:

   expo start
   

   This will start the Metro bundler and open the Expo Developer Tools in your browser. You can run the app on your device using the Expo app.

That's it! You have now combined Viro-Community and Expo to create an AR app.