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.
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.
React Native for Windows allows you to create a Universal Windows Platform (UWP) app using React.
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.
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.
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}}
/>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With