CODEWITHSUNDEEP
react-nativeexpoinappbrowser
user8583769
user8583769

Reputation:

How to add a in-app browser in React Native (Expo)

How to open a web browser in expo rather than using the expo browser.I want open the browser in inside the app.

Upvotes: 2

Views: 10699

Answers (2)

Justin Caldicott
Justin Caldicott

Reputation: 788

The expo-web-browser package opens an in app browser.

This worked for me with expo. I tried react-native-inappbrowser-reborn first, but isAvailable() was throwing an error.

import * as WebBrowser from 'expo-web-browser'

...
WebBrowser.openBrowserAsync(url, {showTitle: true})

Upvotes: 2

Rizwan Ahmed Shivalli
Rizwan Ahmed Shivalli

Reputation: 1503

you can use the following library react-native-inappbrowser

follow the installation from the github page

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

...
  async openLink() {
    try {
      const url = 'https://www.google.com'
      if (await InAppBrowser.isAvailable()) {
        const result = await InAppBrowser.open(url, {
          // iOS Properties
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#453AA4',
          preferredControlTintColor: 'white',
          readerMode: false,
          animated: true,
          modalPresentationStyle: 'overFullScreen',
          modalTransitionStyle: 'partialCurl',
          modalEnabled: true,
          // Android Properties
          showTitle: true,
          toolbarColor: '#6200EE',
          secondaryToolbarColor: 'black',
          enableUrlBarHiding: true,
          enableDefaultShare: true,
          forceCloseOnRedirection: false,
          // Specify full animation resource identifier(package:anim/name)
          // or only resource name(in case of animation bundled with app).
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right'
          },
          headers: {
            'my-custom-header': 'my custom header value'
          },
          waitForRedirectDelay: 0
        })
        Alert.alert(JSON.stringify(result))
      }
      else Linking.openURL(url)
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

you can check the example app here

for expo it becomes little bit complicated please check the related tutorial by Medium

if you want reading mode in ios please refer this link

reader-mode-webview-component-for-react-native

Upvotes: 3

Related Questions