CODEWITHSUNDEEP
react-reduxreact-nativereact-native-ios
Facundo Bazzana
Facundo Bazzana

Reputation: 181

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

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.

Upvotes: 18

Views: 57434

Answers (5)

Sehrish Waheed
Sehrish Waheed

Reputation: 1555

Use native react native linking to open a url

https://reactnative.dev/docs/linking

Upvotes: 0

jdnichollsc
jdnichollsc

Reputation: 1569

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.

Upvotes: 14

d2luu
d2luu

Reputation: 79

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.

Upvotes: 3

Noitidart
Noitidart

Reputation: 37238

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

Upvotes: 5

Pir Shukarullah Shah
Pir Shukarullah Shah

Reputation: 4232

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

Upvotes: 3

Related Questions