Reactnative

Guide to Navigate to the Xense AR Application from a Third-Party App

Install the react-native-app-link and react-native-webview modules


npm install react-native-app-link
npm install react-native-webview

Create an ARWebView component with the following content:


import React from 'react';
import { SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';
import AppLink from 'react-native-app-link';
 
type ARWebViewProps = {
    uri: string;
    appStoreId: string;
    playStoreId: string;
    appName: string;
    deeplinkScheme: string;
};
 
const ARWebView: React.FC<ARWebViewProps> = ({
    uri,
    appStoreId,
    playStoreId,
    appName,
    deeplinkScheme,
}) => {
    const openApp = async (url: string) => {
        try {
            await AppLink.maybeOpenURL(url, {
                appName,
                appStoreId,
                playStoreId,
            });
        } catch (err) {
            console.warn('Error opening app or fallback:', err);
        }
    };
 
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <WebView
                source={{ uri }}
                originWhitelist={['*']}
                onShouldStartLoadWithRequest={(request) => {
                    const url = request.url;
                    if (url.startsWith(`${deeplinkScheme}://`)) {
                        openApp(url);
                        return false;
                    }
                    return true;
                }}
            />
        </SafeAreaView>
    );
};
 
export default ARWebView;

Use the ARWebView component

The property values are provided by Xense AR.


import React from 'react';
import { SafeAreaView } from 'react-native';
import ARWebView from './components/ARWebView';
 
const App = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ARWebView
        uri="webpage-provided-by-xense"
        appStoreId="xense-ar-apple-store-id"
        playStoreId="xense-ar-play-store-id"
        appName="XenseAR"
        deeplinkScheme="xensear-deeplink-scheme"
      />
    </SafeAreaView>
  );
};
 
export default App;