How to 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, btw.

Thanks.

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.