Skip to content

An easy-to-use in-app browser module for React Native, powered by Chrome Custom Tabs / SFSafariViewController.

License

Notifications You must be signed in to change notification settings

swan-io/react-native-browser

Folders and files

NameName
Last commit message
Last commit date

Latest commit

93ed428 · Jan 29, 2024

History

34 Commits
Jan 26, 2024
Jan 29, 2024
Jan 26, 2024
Jan 29, 2024
Jan 25, 2024
Jan 26, 2024
Jan 25, 2024
Jan 25, 2024
Jan 25, 2024
Jan 25, 2024
Jan 25, 2024
Jan 26, 2024
Jan 25, 2024
Jan 29, 2024
Jan 25, 2024
Jan 25, 2024

Repository files navigation

@swan-io/react-native-browser

An easy-to-use in-app browser module for React Native, powered by Chrome Custom Tabs / SFSafariViewController.

mit licence npm version bundlephobia
platform - android platform - ios

Demo

Installation

$ yarn add @swan-io/react-native-browser
# --- or ---
$ npm install --save @swan-io/react-native-browser

Quickstart

import { openBrowser } from "@swan-io/react-native-browser";
import { useCallback } from "react";
import { Button, SafeAreaView } from "react-native";
import parseUrl from "url-parse";

const App = () => {
  const handleOnPress = useCallback(() => {
    openBrowser("https://swan.io", {
      onClose: (url) => {
        if (url) {
          const { protocol, host, query } = parseUrl(url, true);
          const origin = `${protocol}//${host}`;

          if (origin === "com.company.myapp://close") {
            console.log(JSON.stringify(query, null, 2));
          }
        }
      },
    }).catch((error) => {
      console.error(error);
    });
  }, []);

  return (
    <SafeAreaView>
      <Button title="Open browser" onPress={handleOnPress} />
    </SafeAreaView>
  );
};

API

openBrowser(url: string, options: Options)

import { openBrowser } from "@swan-io/react-native-browser";

openBrowser("https://swan.io", {
  dismissButtonStyle: "close", // "cancel" | "close" | "done" (default to "close")
  barTintColor: "#FFF", // in-app browser UI background color
  controlTintColor: "#000", // in-app browser buttons color
  onOpen: () => {
    // fired on browser opened
    // useful to switch the StatusBar color, for example
  },
  onClose: (url) => {
    // fired on browser closed
    // url will be defined if the browser has been closed via deeplink
  },
}).catch((error) => {
  console.error(error);
});

Handle deeplinks

In order to receive deeplink on browser close event, you have to setup them first. We highly recommand defining a custom schema + url for this specific task. For example, com.company.myapp://close.

On iOS

First, you need to enable react-native deeplinks support. Then, edit your Info.plist file to add:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Viewer</string>
    <key>CFBundleURLName</key>
    <string>com.company.myapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.company.myapp</string>
    </array>
  </dict>
</array>

On Android

Edit your AndroidManifest.xml to add (more documentation):

<activity android:name=".MainActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.BROWSABLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:scheme="com.company.myapp" android:host="close" />
  </intent-filter>
</activity>

Tip

Once the redirect URL is visited (a GET hits your server), handle the result and perform a server redirect to com.company.myapp://close?success=true to close the browser (and pass any data back to your app using query params ✨).

Run the example app

$ git clone git@github.com:swan-io/react-native-browser.git
$ cd react-native-browser/example

$ yarn install && yarn start
# --- or ---
$ npm install && npm run start