Expo deep linking takes the user to the website and throws 404 error

236 Views Asked by At

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;

0

There are 0 best solutions below