CODEWITHSUNDEEP
androidiosreactjsreact-native
Ali Raza
Ali Raza

Reputation: 615

Check if Metamask app is installed on the phone using react-native

I am building an app using react-native. I am using react native's Linking API to open my website link in the metamask app installed on my phone. The Linking.opneURl(url) works fine if metamask app is installed on the device. The problem is that if Metamask is not installed on the device it opens the link in the browser.
What I want to do is to apply a check that if the Metamsk app is not installed on the device the user will be asked to install the app otherwise it should open normally in the metamask app. So far I have used the linking API and the react-native-check-app but I didn't get the result I wanted.

Upvotes: 2

Views: 4336

Answers (2)

Baris Senyerli
Baris Senyerli

Reputation: 920

You need to open your link from mobile application through metamask mobile application browser. The way we know for now you can linking url to metamask with Linking which is built-in feature react native. After click button then choice of metamask will open metamask-auth.ilamanov.repl.co as http://metamask-auth.ilamanov.repl.co at metamask browser. After click connect wallet you can choose metamask mobile application and after browsing it self your dApp link it can auth with metamask.

import React, { useCallback } from "react";
import { Alert, Button, Linking, StyleSheet, View } from "react-native";
const yourDappLink = "metamask-auth.ilamanov.repl.co"  // change or create yourself
const supportedURL = "https://metamask.app.link/dapp/"+yourDappLink;


const OpenURLButton = ({ url, children }) => {
  const handlePress = useCallback(async () => {
    // Checking if the link is supported for links with custom URL scheme.
    const supported = await Linking.canOpenURL(url);

    if (supported) {
      // Opening the link with some app, if the URL scheme is "http" the web link should be opened
      // by some browser in the mobile
      await Linking.openURL(url);
    } else {
      Alert.alert(`Don't know how to open this URL: ${url}`);
    }
  }, [url]);

  return <Button title={children} onPress={handlePress} />;
};

const App = () => {
  return (
    <View style={styles.container}>
      <OpenURLButton url={supportedURL}>Connect Wallet</OpenURLButton>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center" },
});

export default App;

Upvotes: 1

Fabio Nettis
Fabio Nettis

Reputation: 2853

Please refer to this section in the official documentation. Extracted from the documentation:

Determine whether or not an installed app can handle a given URL. The method returns a Promise object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.

You then could go on to practical usage like this:

const isInstalled = await Linking.canOpenURL("yourUrl");

Upvotes: 2

Related Questions