npm

Does your artifact manager get in the way? Join us on Oct. 8 at 10am PT, to discuss how npm can help.Sign up »

@matt-block/react-native-in-app-browser

3.1.1 • Public • Published

React Native In-App Browser

npm (scoped) CircleCI license: mit

In-App browser support for React Native, using Chrome Custom Tabs on Android and Safari View Controller on iOS.

Features

  • Typescript and Flow definitions
  • Actively developed

Compatibility

This library will always target the most recent React Native package. If you are using an older release of React Native, use the correct version of this library from the compatibility table below (if available):

React Native Library Status End-of-Life
>= 0.60.0 npm (scoped) Active Not planned
0.57.x - 0.59.x npm v2 (scoped) Active 2020-07-01

Using Expo? Check out WebBrowser.

Installation

Install the package via Yarn or npm:

yarn add @matt-block/react-native-in-app-browser
 
# or 
npm install --save @matt-block/react-native-in-app-browser

Linking

React Native 0.60.0 and later

Packages are autolinked, however an extra step for iOS projects is needed:

cd ios && pod install && cd ..

React Native 0.59.x and below

Manually link the native module to your project:

react-native link @matt-block/react-native-in-app-browser

Note for iOS projects

In order for Xcode projects to build when using Swift-based libraries, your main app project must contain Swift code and a bridging header. If your app project does not contain any Swift code, add a single empty .swift file and an empty bridging header to your app.

If your Xcode project already makes use of Swift code you can safely ignore this note.

Usage

⚠️ Still using an older version ? Check out the migration guides.

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";
 
 
// Minimal setup.
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);
  }
}

Startup optimizations (Android only)

Chrome Custom Tabs exposes methods to reduce the start time of a custom tab activity.

For information on how these work, check Custom Tabs - Example and Usage Optimization

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";
 
InAppBrowser.warmup();
InAppBrowser.mayLaunchUrl("https://wikipedia.org");

Programmatically close (iOS only)

It is possible to manually dismiss the iOS in-app instance by calling the method close.

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

This is not possible on Android since Chrome Custom Tabs do not expose such functionality and Activity workarounds would bring this package way out of scope.

Settings

The main method open accepts an object with settings objects for each platform:

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";
 
InAppBrowser.open("https://www.wikipedia.org/", {
  android: {},
  ios: {}
});

Settings can also be initialized separately with configure so that each open call won't need to specify them each time:

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";
 
// Somewhere in your app initialization logic.
InAppBrowser.configure({
  android: {},
  ios: {}
});
 
// Other part of your code base.
// Previously initialized settings will apply.
InAppBrowser.open("https://www.wikipedia.org/");

Note that open will still accept settings as always but will effectively perform a merge between the initialized properties and the provided settings object (which will have priority over the initialized properties):

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"
  }
});

The properties for each platform settings are described below.

Android

Each setting is optional. Furthermore, settings with invalid values will be ignored and their default values will be used.

Setting Type Default Description
toolbarColor string undefined The color to tint the background of the toolbar.
Provided color can be in any TinyColor supported format.
showTitle boolean false Flag to toggle if the page title should be shown in the custom tab.
closeButtonIcon string (as resolved by importing an image file) undefined Custom close button icon.

Provided icon must be a .png, .jpg, or .gif file.
addDefaultShareMenu boolean false Flag to toggle the default share menu.

iOS

Each setting is optional. Furthermore, settings with invalid values will be ignored and their default values will be used. Also, settings that are not supported by the iOS version at runtime will be ignored as well.

Setting Type Default Description
preferredBarTintColor string undefined The color to tint the background of the navigation bar and the toolbar.
Provided color can be in any TinyColor supported format.

Available on: iOS >= 10.0.
preferredControlTintColor string undefined The color to tint the control buttons on the navigation bar and the toolbar.
Provided color can be in any TinyColor supported format.

Available on: iOS >= 10.0.
barCollapsingEnabled boolean true Available on: iOS >= 11.0.

Example

An example project showcasing the various configurations can be found in the example directory. Simply clone this repository, navigate into example, install the dependencies and run the app.

git clone https://github.com/matei-radu/react-native-in-app-browser.git
cd react-native-in-app-browser/example
npm install #or yarn install 
$ react-native run-android #or react-native run-ios 

License

Copyright (c) 2018-present Matei Bogdan Radu.

This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.

install

npm i @matt-block/react-native-in-app-browser

Downloadsweekly downloads

689

version

3.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability