Whenever I tap on the link, it navigates me to the website and throws the Page not found error as the website doesn't have that screen. It's simply a landing page.
Following are the snippets of the code.
I want whenever the user is navigated to the website, it should redirect the user to the app installed on their devices.
App.js
import React, { useEffect, useState, useCallback, useMemo } from "react";
import { NavigationContainer } from "@react-navigation/native";
import RootNavigator from "./src/navigation/RootNavigation";
import AuthNavigator from "./src/navigation/AuthNavigator";
import Media from "./src/components/Media";
import * as Linking from "expo-linking";
import { AuthContext } from "./src/components/Context";
import AudioProvider from "./src/context/AudioProvider";
export default function App() {
const linking = {
prefixes: [Linking.createURL("/"), "https://monkify.app", "monkify.app://"],
config: {
screens: {
Podcast: "Podcast/:id",
Video: "Video/:id",
},
},
};
return (
<AuthContext.Provider value={authContext}>
<AudioProvider>
<NavigationContainer
linking={linking}
onLayout={onLayoutRootView}
onStateChange={(state) => {
setCurrentRouteName(state?.routes[state?.index]?.name);
}}
>
<RootNavigator />
</NavigationContainer>
</AudioProvider>
</AuthContext.Provider>
);
}
App.json
{
"expo": {
"name": "Monkify",
"slug": "Monkify",
"owner": "monkify",
"scheme": "monkify.app",
"version": "1.0.9",
"orientation": "default",
"icon": "./assets/Images/Logo.png",
"userInterfaceStyle": "light",
"plugins": [
"expo-apple-authentication",
"expo-image-picker",
"sentry-expo",
[
"expo-notifications",
{
"icon": "./assets/Images/NotificationLogo.png",
"color": "#ffffff"
}
],
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
],
[
"expo-screen-orientation",
{
"initialOrientation": "DEFAULT"
}
]
],
"updates": {
"fallbackToCacheTimeout": 0,
"enabled": false
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"requireFullScreen": true,
"supportsTablet": true,
"bitcode": false,
"bundleIdentifier": "Enter your bundle identifier here",
"buildNumber": "32",
"associatedDomains": [
"applinks:monkify.app"
],
"infoPlist": {
"UIBackgroundModes": [
"audio"
],
"NSPhotoLibraryUsageDescription": "Monkify needs access to your photos to set your profile picture"
}
},
"android": {
"package": "Enter your package name here",
"versionCode": 19,
"useNextNotificationsApi": true,
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true,
"data": [
{
"scheme": "https",
"host": "monkify.app",
"pathPrefix": "/"
}
],
"category": [
"BROWSABLE",
"DEFAULT"
]
}
],
"permissions": [
"android.permission.RECORD_AUDIO"
]
},
"extra": {
"eas": {
"projectId": "Enter your project id here"
}
}
},
"web": {
"favicon": "./assets/favicon.png"
}
}
RootNavigator.js
import * as React from "react";
import { useState, useEffect, useContext } from "react";
import Media from "../components/Media";
import AuthNavigator from "./AuthNavigator";
import AudioProvider from "../context/AudioProvider";
import { AuthContext } from "../components/Context";
import * as Linking from "expo-linking";
import { useNavigation } from "@react-navigation/native";
import { isEmptyVar } from "../helper/isEmpty";
const RootNavigator = () => {
const { token } = useContext(AuthContext);
const navigation = useNavigation();
const handleURL = async (event) => {
const url = await Linking.getInitialURL();
if (!isEmptyVar(url) || !isEmptyVar(event)) {
let { path, queryParams } = Linking.parse(
!isEmptyVar(event) ? event.url : url
);
if (path === "Podcast") {
navigation.navigate("Podcast", {
id: queryParams.id,
});
} else if (path === "Video") {
navigation.navigate("Video", {
id: queryParams.id,
});
}
}
};
useEffect(() => {
handleURL();
}, []);
useEffect(() => {
let subscribe = Linking.addEventListener("url", handleURL);
return () => {
subscribe.remove();
};
}, []);
return <AudioProvider>{token ? <Media /> : <AuthNavigator />}</AudioProvider>;
};
export default RootNavigator;