InAppBrowser for React Native

Getting started

$ npm install react-native-inappbrowser-reborn --save

Mostly automatic installation

$ react-native link react-native-inappbrowser-reborn

Manual installation

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-inappbrowser-reborn and add RNInAppBrowser.xcodeproj
In XCode, in the project navigator, select your project. Add libRNInAppBrowser.a to your project's Build Phases ➜ Link Binary With Libraries
Run your project (Cmd+R)<

iOS with Podfile

Open up ios/Podfile

Add pod 'RNInAppBrowser', :path => '../node_modules/react-native-inappbrowser-reborn'

Run pod install

Android

Open up android/app/src/main/java/[...]/MainActivity.java

Add import com.proyecto26.inappbrowser.RNInAppBrowserPackage; to the imports at the top of the file
Add new RNInAppBrowserPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':react-native-inappbrowser-reborn'
project(':react-native-inappbrowser-reborn').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-inappbrowser-reborn/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':react-native-inappbrowser-reborn')
```

Usage

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, 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

Demo

import InAppBrowser from 'react-native-inappbrowser-reborn';

...
  async openLink() {
    try {
      await InAppBrowser.isAvailable()
      InAppBrowser.open('https://www.google.com', {
        // iOS Properties
        dismissButtonStyle: 'cancel',
        preferredBarTintColor: 'gray',
        preferredControlTintColor: 'white',
        readerMode: true,
        // Android Properties
        showTitle: true,
        toolbarColor: '#6200EE',
        secondaryToolbarColor: 'black',
        enableUrlBarHiding: true,
        enableDefaultShare: true,
        forceCloseOnRedirection: true,
      }).then((result) => {
        Alert.alert(JSON.stringify(result))
      })
    } catch (error) {
      Alert.alert(error.message)
    }
  }
...

Authentication Flow using Deep Linking

utilities.js

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
}

App.js (Using react-navigation with Deep Linking)

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>
    )
  }
...

LoginComponent

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 {
      await InAppBrowser.isAvailable()
      InAppBrowser.openAuth(url, deepLink, {
        // iOS Properties
        dismissButtonStyle: 'cancel',
        // Android Properties
        showTitle: false,
        enableUrlBarHiding: true,
        enableDefaultShare: true,
      }).then((response) => {
        if (response.type === 'success' &&
          response.url) {
          Linking.openURL(response.url)
        }
      })
    } catch (error) {
      Linking.openURL(url)
    }
  }
...

SplashComponent

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

StatusBar

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. 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);
    }
  })

Credits 👍

Expo: WebBrowser
React Native Custom Tabs: Chrome Custom Tabs for React Native
React Native Safari View: A React Native wrapper for Safari View Controller

Collaborators 🥇


Juan Nicholls	Emanuel Quimper	Jonathan Bones	Mihai Lazari

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Happy coding 💯

Made with ❤️

plamworapot / react-native-inappbrowser Goto Github PK

react-native-inappbrowser's Introduction