How to create an AR application using react native?

Introduction

Every organisation is familiar with the words AR (Augmented Reality) and VR(Virtual Reality) which enhances the ability to get connected with computer-generated information along with the real world. Since the usage of augmented reality software is significantly increasing it’s being used in various sectors as well.

For various industries from its manufacturing or design and modelling, AR software allows a precise view of the product with quality assurance and for IT companies AR software makes you stand out from competitors and improves user engagement.

What is AR?

It can be defined as an integration of digital information with the user environment in real-time. AR applications deliver visual elements including sound and other sensory information via devices such as smartphones or glasses.

Augmented Reality offers a digital overlay to the real world environment enhancing the user's perception. Additionally, it offers

• Real-time interaction
• Dynamic engagement
• Enhances perception
• Interactive elements
• Object recognition
• Seamless integration
• Location-based information

So, it clearly explains that AR software helps out for every sector or organisation. But the question arises how to create an Augmented reality application?

Types of AR

If you are willing to create an AR application it's necessary to which one or which kind of it as there are various types of AR software applications available that are being created such as

Components of AR software

There are various technologies used while creating AR applications with various languages as well where the most commonly used are C#, C++, Java, Swift and Javascript. But from all of the above, React Native is also the one that allows you to develop an easy and user-friendly Augmented Reality application.

Before creating one you require a physical mobile device as AR can't run on simulators as it’s mostly dependent on device sensors. You can run the app by using the following commands according to the ReadMe file.

The code begins with the in the render method in App.js

    const HelloWorldSceneAR = () => {
        return (
            <>
            <ViroARImageMarker target={"pug2D_img"}>
                <Viro3DObject
                    source={objects_3D.pug_animated.obj}
                    type={objects_3D.pug_animated.type}
                    position={objects_3D.pug_animated.position}
                    scale={objects_3D.pug_animated.scale}
                    rotation={[0, 0, 0]}
                    animation={{ ...objects_3D.pug_animated.animation, run: true }}
                    dragType="FixedToWorld"
                    onDrag={() => {}}
                />
            </ViroARImageMarker>
            </>
        );
    };
    export default () => {
        return (
            <ViroARSceneNavigator
            autofocus={true}
            initialScene={{
                scene: HelloWorldSceneAR,
            }}
            style={styles.f1}
            />
        );
    };
    ViroARTrackingTargets.createTargets({
        pug2D_img: {
            source: objects_3D.pug_animated.img,
            orientation: "Up",
            physicalWidth: 0.12, // real world width in meters
        },
    });   
                    

Over here <ViroARSceneNavigato> handles the translation between objects as it allows the 3D equivalent of a navigation stack.

<ViroARScene> contains all the ViroReact elements that includes UI controls, 3D objects, lights, etc. So, according to the requirements you need to arrange digital AR media for an accurate position in the scene.

Positioning of 3d objects

3D objects play a vital role for any reality element as it gives a real visual of the world. So, the proper position of 3D objects should be utmost accurate.

    <ViroARScene onTrackingUpdated={onInitialized}>
        <ViroAmbientLight color={"#aaaaaa"} />
            <Viro3DObject
                source={objects_3D.pug_animated.obj}
                type={objects_3D.pug_animated.type}
                position={objects_3D.pug_animated.position}
                scale={objects_3D.pug_animated.scale}
                rotation={[0, 0, 0]}
                animation={{ ...objects_3D.pug_animated.animation, run: true }}
                dragType="FixedToWorld"
                onDrag={() => {}}
        />
    </ViroARScene>;   
                    

is the light object that emits light effects equally on all the objects.

can be used to render any 3D objects. It controls the behaviour of any Viro components by passing props as we do with normal react-native components.

    <ViroARScene onTrackingUpdated={onInitialized}>
    <ViroAmbientLight color={"#aaaaaa"} />
    <Viro360Image source={objects_3D.diving_360.background} />
    </ViroARScene>;
                        

By replacing the above code in the existing components with the following code block you can add 360 background to ViroARScene.

Image recognition

It’s a key component that allows you to interpret with the real word and to respond to it accordingly.

    const HelloWorldSceneAR = () => {
        return (
            <ViroARImageMarker target={"pug2D_img"}>
            <Viro3DObject
                source={objects_3D.pug_animated.obj}
                type={objects_3D.pug_animated.type}
                position={objects_3D.pug_animated.position}
                scale={objects_3D.pug_animated.scale}
                rotation={[0, 0, 0]}
                animation={{ ...objects_3D.pug_animated.animation, run: true }}
                dragType="FixedToWorld"
                onDrag={() => {}}
            />
            </ViroARImageMarker>
        );
    };
    export default () => {
        return (
            <ViroARSceneNavigator
            autofocus={true}
            initialScene={{
                scene: HelloWorldSceneAR,
            }}
            style={styles.f1}
            />
        );
    };
    ViroARTrackingTargets.createTargets({
        pug2D_img: {
            source: objects_3D.pug_animated.img,
            orientation: "Up",
            physicalWidth: 0.12, // real world width in meters
        },
    });
                        

Here you can use component for object identification. You should provide a reference image that Viro can recognize and track for which tag is used.

So, here are some of the components mentioned that are required while creating a seamlessly Augmented Reality application using React Native.

Remember that one of the various possibilities for creating AR apps with React-native is Viro-react. It is a well-established and reliable framework.

Step-by-step guide

After knowing Augmented Reality and it's components let’s try out a simple AR project with React Native components

1. Install react native CLI: npm install -g react-native-cli

2. Create a new react native project: npx react-native init YourARApp cd YourARApp

3. Install viroReact: npm install --save react-viro

4. Initialize viroReact in your project: npx react-viro init --use-native-modules

5. Create an AR component: In your App.js or another component file:

    import React, { Component } from "react";
    import { ViroARSceneNavigator } from "react-viro";

    const YourARScene = require("./YourARScene");
    export default class App extends Component {
        render() {
            return <ViroARSceneNavigator initialScene={{ scene: YourARScene }} />;
        }
    } 
                                

6. Create an AR scene: In a file named YourARScene.js:

    import React, { Component } from "react";
    import { ViroARScene, ViroText } from "react-viro";

    export default class YourARScene extends Component {
        render() {
            return (
                <>
                    <ViroARScene>
                        <ViroText text="Hello AR World!" position={[0, 0, -2]} />
                    </ViroARScene>
                </>
            );
        }
    }
                                    

7. Run your app:

    # for Android
    npx react-native run-android

    # for iOS
    npx react-native run-ios
                                    

Conclusion

So, the conclusion clearly explains that with the help of React Native you can develop a smooth and attractive augmented reality that blends the physical and digital environment making the virtual world more tangible and interactive. So, get connected with us to Hire a React Native developer that makes you get connected with the real world environement.

FAQ