In-app Browser Module For React Native

Description:

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

How to use it:

1. Install and import the react-native-browser component.

# Yarn
$ yarn add @swan-io/react-native-browser
# NPM
$ npm install @swan-io/react-native-browser

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

2. Basic usage.

const App = () => {
  const handleOnPress = useCallback(() => {
    openBrowser("https://reactscript.com", {
      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>
  );
};

3. Customize the in-app browser with the following options.

openBrowser("https://reactscript.com", {
  // "cancel" | "close" | "done"
  dismissButtonStyle: "close", 
  // in-app browser UI background color
  barTintColor: "#FFF", 
  // in-app browser buttons color
  controlTintColor: "#000", 
  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);
});

Preview: