react-native-inappbrowser-reborn
Advanced tools
$ npm install react-native-inappbrowser-reborn --save
Linking the package manually is not required anymore with Autolinking.
iOS Platform:
$ cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step
Android Platform with Android Support:
Using Jetifier tool for backward-compatibility.
Modify your android/build.gradle configuration:
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
# Only using Android Support libraries
supportLibVersion = "28.0.0"
}
Android Platform with AndroidX:
Modify your android/build.gradle configuration:
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 28
# Remove 'supportLibVersion' property and put specific versions for AndroidX libraries
androidXAnnotation = "1.1.0"
androidXBrowser = "1.0.0"
// Put here other AndroidX dependencies
}
$ react-native link react-native-inappbrowser-reborn
Libraries ➜ Add Files to [your project's name]node_modules ➜ react-native-inappbrowser-reborn and add RNInAppBrowser.xcodeprojlibRNInAppBrowser.a to your project's Build Phases ➜ Link Binary With LibrariesCmd+R)<ios/Podfilepod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn'pod installandroid/app/src/main/java/[...]/MainApplication.javaimport com.proyecto26.inappbrowser.RNInAppBrowserPackage; to the imports at the top of the filenew RNInAppBrowserPackage() to the list returned by the getPackages() methodandroid/settings.gradle:
include ':react-native-inappbrowser-reborn'
project(':react-native-inappbrowser-reborn').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-inappbrowser-reborn/android')
android/app/build.gradle:
implementation project(':react-native-inappbrowser-reborn')
proguard-rules.pro)
-keepattributes *Annotation*
-keepclassmembers class ** {
@org.greenrobot.eventbus.Subscribe <methods>;
}
-keep enum org.greenrobot.eventbus.ThreadMode { *; }
| Methods | Action |
|---|---|
open | Opens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari. |
close | Dismisses the system's presented web browser |
openAuth | Opens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url. |
closeAuth | Dismisses the current authentication session |
isAvailable | Detect if the device supports this plugin |
| Property | Description |
|---|---|
dismissButtonStyle (String) | The style of the dismiss button. [done/close/cancel] |
preferredBarTintColor (String) | The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF] |
preferredControlTintColor (String) | The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080] |
readerMode (Boolean) | A value that specifies whether Safari should enter Reader mode, if it is available. [true/false] |
animated (Boolean) | Animate the presentation. [true/false] |
modalPresentationStyle (String) | The presentation style for modally presented view controllers. [none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover] |
modalTransitionStyle (String) | The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl] |
modalEnabled (Boolean) | Present the SafariViewController modally or as push instead. [true/false] |
| Property | Description |
|---|---|
showTitle (Boolean) | Sets whether the title should be shown in the custom tab. [true/false] |
toolbarColor (String) | Sets the toolbar color. [gray/#808080] |
secondaryToolbarColor (String) | Sets the color of the secondary toolbar. [white/#FFFFFF] |
enableUrlBarHiding (Boolean) | Enables the url bar to hide as the user scrolls down on the page. [true/false] |
enableDefaultShare (Boolean) | Adds a default share item to the menu. [true/false] |
animations (Object) | Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }] |
headers (Object) | The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }] |
forceCloseOnRedirection (Boolean) | Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false] |
waitForRedirectDelay (Number) | Sets a delay for wait the redirection using openAuth method. |
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)
}
}
...
import { Platform } from 'react-native'
export const getDeepLink = (path = "") => {
const scheme = 'my-scheme'
const prefix = Platform.OS == 'android' ? `${scheme}://my-host/` : `${scheme}://`
return prefix + path
}
import { Root } from 'native-base'
import { getDeepLink } from './utilities'
import { createStackNavigator } from 'react-navigation'
const Main = createStackNavigator(
{
LoginComponent: { screen: LoginComponent },
HomeComponent: { screen: HomeComponent },
SplashComponent: { //Redirect users to the Home page if they are authenticated, otherwise to Login page...
screen: SplashComponent,
path: 'callback/' //Deep linking to get the auth_token
}
},
{
index: 0,
initialRouteName: 'SplashComponent',
headerMode: 'none'
}
)
...
render() {
return (
<Root>
<Main uriPrefix={getDeepLink()} />
</Root>
)
}
...
import { Linking } from 'react-native'
import InAppBrowser from 'react-native-inappbrowser-reborn'
import { getDeepLink } from './utilities'
...
async onLogin() {
const deepLink = getDeepLink("callback")
const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`
try {
if (await InAppBrowser.isAvailable()) {
InAppBrowser.openAuth(url, deepLink, {
// iOS Properties
dismissButtonStyle: 'cancel',
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true,
waitForRedirectDelay: 1000
}).then((response) => {
if (response.type === 'success' &&
response.url) {
Linking.openURL(response.url)
}
})
} else Linking.openURL(url)
} catch (error) {
Linking.openURL(url)
}
}
...
...
componentWillMount() {
const { navigation } = this.props
const { state: { params } } = navigation
const { access_token } = params || {}
if (access_token) {
// Opened by deep linking, the user is authenticated
// Redirect to the Home page
}
else {
// Detect if the stored token is still valid
// And redirect the user to Home or Login page
}
}
...
The StatusBar will keep the last one provided in your app. So if the StatusBar is dark-content before you open the browser this will keep it.
Starting with React Native 0.59 onwards, there is a simpler way of handling this update, without the need of patching StatusBar.
async openInBrowser(url) {
try {
const oldStyle = StatusBar.pushStackEntry({ barStyle: 'dark-content', animate: false });
await InAppBrowser.open(url)
StatusBar.popStackEntry(oldStyle);
} catch (error) {
Alert.alert(error.message)
}
})
For previous versions, you can still apply the method described below.
If you want to change before opening you can do something like
async openInBrowser(url) {
try {
StatusBar.setBarStyle('dark-content')
await InAppBrowser.open(url)
} catch (error) {
Alert.alert(error.message)
}
})
If you need to restore the old bar style, after the browser is dismissed, you can try and patch the StatusBar.setBarStyle function to store the old value like so:
// patch StatusBar.setBarStyle to make style accessible
const _setBarStyle = StatusBar.setBarStyle
StatusBar.setBarStyle = (style) => {
StatusBar.currentStyle = style
_setBarStyle(style)
}
You can than restore the old bar style after the browser has been dismissed like this:
async openInBrowser(url) {
try {
const oldStyle = StatusBar.currentStyle
StatusBar.setBarStyle('dark-content')
await InAppBrowser.open(url)
if(oldStyle) StatusBar.setBarStyle(oldStyle)
} catch (error) {
Alert.alert(error.message)
}
})
Please do contribute! Issues and pull requests are welcome.
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
I believe in Unicorns 🦄 Support me, if you do too. Professionally supported react-native-inappbrowser-reborn is coming soon
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
Made with ❤️
[3.1.0] - 2019-09-03
waitForRedirectDelay option for Android to fix issues dismissing the browser before detecting the redirection with Linking (817f6ec).FAQs
InAppBrowser for React Native
The npm package react-native-inappbrowser-reborn receives a total of 69,252 weekly downloads. As such, react-native-inappbrowser-reborn popularity was classified as popular.
We found that react-native-inappbrowser-reborn demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.