Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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):

  • 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.

like image 681
Facundo Bazzana Avatar asked Aug 06 '17 15:08

Facundo Bazzana


People also ask

How do you open a link onPress in React Native?

Try this: import React, { useCallback } from "react"; import { Linking } from "react-native"; OpenWEB = () => { Linking. openURL(url); }; const App = () => { return <View onPress={() => OpenWeb}>OPEN YOUR WEB</View>; }; Hope this will solve your problem.

Can we use window in React Native?

React Native for Windows allows you to create a Universal Windows Platform (UWP) app using React.


2 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.

like image 197
jdnichollsc Avatar answered Oct 21 '22 16:10

jdnichollsc


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}}
      />
    );
  }
}
like image 23
Noitidart Avatar answered Oct 21 '22 16:10

Noitidart