In my React Native app, the onViewAr button redirects to the AR viewer as expected on Android. However, on iOS, it first opens Chrome before redirecting to the AR viewer.

How can I ensure that the AR viewer opens directly on iOS without the intermediate Chrome redirection?

Any insights or solutions would be greatly appreciated!

import React from "react";
import { View, StyleSheet, Linking, Platform } from "react-native";
import { WebView } from "react-native-webview";
import Header from '@/components/headers/Header';
import { router } from 'expo-router';
import Button from '@/components/Button';
import * as WebBrowser from 'expo-web-browser';
import { theme } from '@/lib/theme';

const ModelViewerScreen = () => {
  const htmlContent = `
        <model-viewer 
            src=".glb" 
            ios-src=".usdz" 
            ar ar-modes="quick-look webxr scene-viewer" 
            camera-controls tone-mapping="neutral" shadow-intensity="1">
        </model-viewer>
        <script type="module" src=".0.0/model-viewer.min.js"></script>
  `;

  const handleShouldStartLoadWithRequest = (event: any) => {
    console.log('handleShouldStartLoadWithRequest', event)
    if (event.url.startsWith("intent://")) {
      const newUrl = event.url.replace("intent://", "https://");
      console.log(newUrl)
      Linking.openURL(newUrl).catch((err) =>
        console.error("Failed to open URL:", err)
      );
      return false;
    }
    return true;
  };

  const onViewAr = async () => {
    const url = Platform.OS == 'ios' ? ".usdz" : ".2?mode=ar_preferred&disable_occlusion=true&file=https%3A%2F%2Frakeshvn.github.io%2Far%2Fsoler_panel_setup.glb#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=about%3Ablank%23model-viewer-no-ar-fallback;end;"
    Linking.openURL(url).catch((err) =>
      console.error("Failed to open URL:", err)
    );
  }

  return (
    <View style={styles.container}>
      <Header
        label='AR'
        onBackPress={() => router.back()}
      />
      <View style={styles.mainContainer}>
        <WebView
          originWhitelist={["*"]}
          source={{ html: htmlContent }}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          allowsInlineMediaPlayback={true}
          onShouldStartLoadWithRequest={handleShouldStartLoadWithRequest}
        />
        <Button
          label="View in your space"
          onPress={onViewAr}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  mainContainer: {
    flex: 1,
    paddingHorizontal: theme.spacing.paddingHorizontal,
    paddingBottom: 36,
  },
});

export default ModelViewerScreen;