React-native open another app

Question

I have a button and I want to open a facebook page in the facebook app. I can use this solution to open the link in a browser but I'm looking for a better solution that opens faecbook app and my desire page. Is this generally possible? How?

score 5 · Answer 1 · edited May 23 '17 at 10:31

5

This may not be possible on Android but to do so you follow essentially the same instructions for linking, you just need to swap out http with fb (or the appropriate app id). This SO answer has a bit more information on what may or may not be possible.

Assuming it is possible, to open the facebook app to a profile it would look something like this

const pageId = 'abc123'
Linking.openURL(`fb://profile/${pageId}`)
  .catch(err => console.error('An error occurred', err));

Notice that rather than using http I'm using fb

edited May 23 '17 at 10:31

Community

1
1

answered Apr 28 '17 at 13:39

Spencer Carli

686
3
6

Thanks @Spencer but none of the recommended motheds worked. – Pooya May 01 '17 at 17:59

score 4 · Accepted Answer · answered May 04 '17 at 18:07

Same as solution of @Spencer answered, but using page instead profile to open fanpage.

<Button
  title="Go to Facebook page"
  onPress={() => {
    const FANPAGE_ID = 'xxxxxxxxxxxxxxxxx'
    const FANPAGE_URL_FOR_APP = `fb://page/${FANPAGE_ID}`
    const FANPAGE_URL_FOR_BROWSER = `https://fb.com/${FANPAGE_ID}`
    Linking.canOpenURL(FANPAGE_URL_FOR_APP)
      .then((supported) => {
        if (!supported) {
          Linking.openURL(FANPAGE_URL_FOR_BROWSER)
        } else {
          Linking.openURL(FANPAGE_URL_FOR_APP)
        })
      .catch(err => console.error('An error occurred', err))
    }}
/>

Note: You MUST use fanpage ID, not fanpage slug name. If you don't know how to get id, just open your fanpage in browser, view source and find page_id param.

I couldn't get this to work on iOS. The `supported` variable always evaluated to `false` to me, even if the Facebook App was installed. The official docs https://facebook.github.io/react-native/docs/linking.html that this will be the case for iOS 9 and higher unless you set a key called `LSApplicationQueriesSchemes` in inside your Info.plist. I'm using Create-React-Native-App unfortunately, so have no access to the Info.plist file. — ChillyPenguin, Dec 25 '17 at 22:59

ChillyPenguin · Answer 3 · 2018-01-02T03:38:27.643

A mix of answers from @Spencer and @Thành worked for me on iOS.

So I settled for just attempting to open the Facebook app link, and then if that fails I fall back to the web browser link, like so:

import { Linking } from "react-native";

const openFacebookLink = facebookId => {
  const FANPAGE_URL_FOR_APP = `fb://profile/${facebookId}`;
  const FANPAGE_URL_FOR_BROWSER = `https://fb.com/${facebookId}`;

  Linking.canOpenURL(FANPAGE_URL_FOR_APP)
    .then(appSupported => {
      if (appSupported) {
        console.log(`Can handle native url: ${FANPAGE_URL_FOR_APP}`);
        return Linking.openURL(FANPAGE_URL_FOR_APP);
      } else {
        console.log(
          `Can't handle native url ${FANPAGE_URL_FOR_APP} defaulting to web URL ${FANPAGE_URL_FOR_BROWSER}`
        );
        return Linking.canOpenURL(FANPAGE_URL_FOR_BROWSER).then(
          webSupported => {
            if (webSupported) {
              console.log(`Can handle web url: ${FANPAGE_URL_FOR_BROWSER}`);
              return Linking.openURL(FANPAGE_URL_FOR_BROWSER);
            }
            return null;
          }
        );
      }
    })
    .catch(err => console.error("An error occurred", err));
};

Note: the appSupported variable here will always return false until you've edited/added the LSApplicationQueriesSchemes value in your info.plist file. You'll find this file in the ios/yourappname sub-folder of your project. Here are the lines that I added to mine:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fb</string>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

NB: if you're using Create React Native App and/or Expo then you won't be able to edit this file. I abandoned Expo for this reason.

That works on iOS for me, but Android opens it in the browser every time. I've read that Android handles this stuff completely differently to iOS, so I'm not sure if there's any easy solution there.

React-native open another app

3 Answers3