I am working in React Native and trying to use Deeplink. When app is installed code is working fine but when app is not installed not redirecting to App Store in Safari instead of that in Chrome that is working fine in safari when i click i got this error message
"safari cannot open the page because the address is invalid"
this is my apple-app-site-association file code
{ "applinks": { "apps": [], "details": [ { "appID": "CS666P223.com.seecard", "paths": [ "", "/recover/", "/settings/*" ] } ] } , "webcredentials": { "apps": [ "CS666P223.com.seecard" ] } }
and this is my code in next
"use client"
export default function Home() {
// Helper function for device detection // const isiOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent); const isAndroid = () => /Android/i.test(navigator.userAgent);
const isiOS = () => { const userAgent = navigator.userAgent || navigator.vendor; return ( /iPhone|iPad|iPod/.test(userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ); };
const openAndSaveCard = () => { try { // let fallbackLink = '';
if (isiOS() || isAndroid()) {
const card_id = "3434bee9675ee44b3dc65";
const card_owner_id = "34349675ee44b3dc43";
const card_for_saved = {
"cardId": card_id,
"ownerId": card_owner_id
};
console.log("=-=-card_for_saved",card_for_saved)
const encodedData = encodeURIComponent(JSON.stringify(card_for_saved));
window.location.href = `saveseecard://open?id=${encodedData}`;
const androidAppStoreLink = 'https://play.google.com/store/apps/details?id=com.seecard';
const iosAppStoreLink = 'https://apps.apple.com/np/app/seecard/id6502513661';
fallbackLink = isAndroid() ? androidAppStoreLink : iosAppStoreLink;
const timeout = setTimeout(function () {
if (document.hasFocus()) {
window.location.href = fallbackLink;
}
}, 2000);
window.addEventListener('blur', () => {
clearTimeout(timeout);;
});
} else {
alert("Your device doesn't support deep linking for this app.");
}
} catch (e) {
console.log("Error:", e);
}
};
return ( <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<div className="cIcon ml-10 purpleBg"
// onClick={() => { openAndSaveCard() }}
onClick={openAndSaveCard}
>
<p className="container-text">Save Card</p>
</div>
</main>
</div>
); }