18

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):

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

I'm using react-native 0.37.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
Facundo Bazzana
  • 181
  • 1
  • 1
  • 5

5 Answers5

14

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.

jdnichollsc
  • 1,520
  • 1
  • 24
  • 44
  • 1
    How can I control this with something like onNavigationStateChange which is available for a simple webview? – Rishabh Jan 06 '19 at 23:33
  • 1
    Using Linking of React Native directly – jdnichollsc Jan 12 '19 at 09:10
  • 1
    In my case, i tried for Amazon payment page. In android, its opening new tabs when the webview needs.But in IOS, it dont allow to open new tabs. So after loggedin the page shows just a blank page:(! Temporarily i used *deep-linking * and *react-native-custom-tabs* – Johncy May 09 '19 at 12:54
  • @Johncy oh I understand, it's limited by Safari Services :( – jdnichollsc May 19 '19 at 23:20
  • 1
    @jdnichollsc i can see in-app browsers in iOS doing the same payment gateway in some apps like airtel, bookmyshow etc..Still am not able to understand how to achieve that on iOS :( If anyone having idea please post your suggession – Johncy May 21 '19 at 05:51
  • @Johncy please post your issue from the repo :) https://github.com/proyecto26/react-native-inappbrowser/issues – jdnichollsc May 22 '19 at 06:04
5

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}}
      />
    );
  }
}
Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • I already try this, but isn't the native view as shown in the example. Thanks anyway. – Facundo Bazzana Aug 06 '17 at 20:03
  • @FacundoBazzana check out update. I found ios and android solution. – Noitidart Apr 28 '18 at 23:38
  • WebView is no longer available in react-native package :( –  May 05 '20 at 20:48
  • This webview will not handle deep links. when you click on any link or button in side the webview, it will redirects it to native browser. we cannot run the entire websites inside the webview like iframes. – Viuu -a Mar 24 '21 at 05:41
3

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

Pir Shukarullah Shah
  • 4,124
  • 2
  • 22
  • 42
3

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.

d2luu
  • 69
  • 6
0

Use native react native linking to open a url

https://reactnative.dev/docs/linking

Sehrish Waheed
  • 1,230
  • 14
  • 17