How do I open in-app browser window in React native?

Question

I'm trying to open the browser window without leaving the app when I click a URL (for both iOS and Android).

The behavior should be as follows (with airbnb app example):

• Clicks in "Terms and conditions" link: links example
• Open the browser in-app:
• For iOS: in-app browser iOS
• Same for Android.

How can I do this? Do I need to use any specified existing library?

I'm using react-native 0.37.

Answer 1

You can use the new InAppBrowser plugin for React Native, check the next example:

import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn';

...
  async openLink() {
    try {
      const isAvailable = await InAppBrowser.isAvailable()
      const url = 'https://www.google.com'
      if (isAvailable) {
        InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: 'gray',
          preferredControlTintColor: 'white',
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: true,
        }).then((result) => {
          Alert.alert(JSON.stringify(result))
        })
      } else Linking.openURL(url)
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

On the other hand, you can use this plugin with deep linking, check the README of the project.

Answer 2

Opens Safa Module Method

On iOS SafariView 3rd party native module - https://github.com/naoufal/react-native-safari-view

On Android CustomTabs 3rd party native module - https://github.com/droibit/react-native-custom-tabs - however if the user does not have Chrome installed, it will pop open the link outside of your app in their default browser.

Alternative WebView Method

You can use a <WebView> but this is not using the real browser - http://facebook.github.io/react-native/releases/0.47/docs/webview.html#webview

import React, { Component } from 'react';
import { WebView } from 'react-native';

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}

Answer 3

Use React Native Custom Tabs to open in-app browser window in React native. It support both platform Android and iOS

Answer 4

You can use React Native In-App Browser Reborn. It works perfectly on both Android and iOS.

This library use react-native-safari-view (SafariView) on iOS and react-native-custom-tabs (ChromeView) on Android.

Answer 5

Use native react native linking to open a url

https://reactnative.dev/docs/linking