Search code examples
react-nativeexpoinappbrowser

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.


Solution

  • 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