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

user_8146108 0
Viewed 39255

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.

react-native-ios react-redux react-native
5 Answers

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.

user_15328210
user_53157860

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.

user_92710940
user_140620420
Related