InAppBrowser

Since release 1.4.0, importing InAppBrowser is the main way of consuming the library's API.

If you're still using the now deprecated functions, check Migrating from 1.x to 2.x in preparation for the next major release expected for June 2019.

Methods

• InAppBrowser.open(url [, settings])
• InAppBrowser.configure(settings)
• InAppBrowser.close()

Reference

InAppBrowser.open(url [, settings])

Parameters

• url: a valid HTTP or HTTPS url.
• settings: Optional. A Settings object with settings for each platform.

Return

A Promise that is rejected if url is not a valid HTTP or HTTPS url.

Description

open will, as you might expect, open the given url in the platform-appropriate in-app browser with the given settings applied (if any).

Settings provided to open do not persist across multiple invocations and are valid only for every single instance. However, these settings will be applied on top of any global settings configured via InAppBrowser.configure(settings).

Examples

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";

// Only url.
InAppBrowser.open("https://www.wikipedia.org/").catch(error => {
  console.log(error);
});

// With platform-specific optional settings.
InAppBrowser.open("https://www.wikipedia.org/", {
  android: {
    //...,
  },
  ios: {
    //...,
  },
}).catch(error => {
  console.log(error);
});


// Using async/await.
async onClickHandler() {
  try {
    await InAppBrowser.open("https://www.wikipedia.org/");
  } catch (error) {
    console.log(error);
  }
}

InAppBrowser.configure(settings)

Parameters

• settings: A Settings object with settings for each platform.

Return

undefined

Description

configure will apply the provided settings for all new InAppBrowser.open(url [, settings]) invocations.

This method comes in useful when you have consistent settings across most of your usages so you don't have to pass settings each time you invoke open.

Settings provided to open have priority over the ones set with configure and will effectively perform a merge between them.

Example

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";

// Somewhere in your app initialization logic.
InAppBrowser.configure({
  android: {
    toolbarColor: "red",
    showTitle: true
  }
});

// Other part of your code base.
// Merged settings for this call will result in:
//
// - toolbarColor: "blue",
// - showTitle: true
InAppBrowser.open("https://www.wikipedia.org/", {
  android: {
    toolbarColor: "blue"
  }
});

InAppBrowser.close()

Return

undefined

Description

close will, you guessed it, close the currently open in-app browser instance.

This does not work on Android since Chrome Custom Tabs do not expose such functionality, effectively making this method iOS specific.

Example

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";

InAppBrowser.close();