\n\n## Who is using InAppBrowser?\n\nDo you want to see this package in action? Check these awesome projects, yay! 🎉\n- [Oxycar](https://oxycar.com) - Offers innovative ways to facilitate home-work journeys.\n- [Pegus Digital](https://pegus.digital/) - Your innovation partner in digital product development.\n\nShare your awesome project [here](https://github.com/proyecto26/nativescript-inappbrowser/issues/49)! ❤️\n\n## Getting started\n\n```javascript\ntns plugin add @akylas/nativescript-inappbrowser\n```\n\n### Manual installation\n\n- **Android Platform with Android Support:**\n\n Modify your **android/build.gradle** configuration:\n ```\n buildscript {\n ext {\n buildToolsVersion = \"28.0.3\"\n minSdkVersion = 16\n compileSdkVersion = 28\n targetSdkVersion = 28\n // Only using Android Support libraries\n supportLibVersion = \"28.0.0\"\n }\n ```\n\n- **Android Platform with AndroidX:**\n\n Modify your **android/build.gradle** configuration:\n ```\n buildscript {\n ext {\n buildToolsVersion = \"28.0.3\"\n minSdkVersion = 16\n compileSdkVersion = 28\n targetSdkVersion = 28\n // Remove 'supportLibVersion' property and put specific versions for AndroidX libraries\n androidXBrowser = \"1.0.0\"\n // Put here other AndroidX dependencies\n }\n ```\n\n## Usage\n\nMethods | Action\n------------- | ------\n`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.\n`close` | Dismisses the system's presented web browser.\n`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 **(OAuth flow with deep linking redirection)**.\n`closeAuth` | Dismisses the current authentication session.\n`isAvailable` | Detect if the device supports this plugin.\n\n### iOS Options\n\nProperty | Description\n-------------- | ------\n`dismissButtonStyle` (String) | The style of the dismiss button. [`done`/`close`/`cancel`]\n`preferredBarTintColor` (String) | The color to tint the background of the navigation bar and the toolbar. [`white`/`#FFFFFF`]\n`preferredControlTintColor` (String) | The color to tint the control buttons on the navigation bar and the toolbar. [`gray`/`#808080`]\n`readerMode` (Boolean) | A value that specifies whether Safari should enter Reader mode, if it is available. [`true`/`false`]\n`animated` (Boolean) | Animate the presentation. [`true`/`false`]\n`modalPresentationStyle` (String) | The presentation style for modally presented view controllers. [`automatic`/`none`/`fullScreen`/`pageSheet`/`formSheet`/`currentContext`/`custom`/`overFullScreen`/`overCurrentContext`/`popover`]\n`modalTransitionStyle` (String) | The transition style to use when presenting the view controller. [`coverVertical`/`flipHorizontal`/`crossDissolve`/`partialCurl`]\n`modalEnabled` (Boolean) | Present the **SafariViewController** modally or as push instead. [`true`/`false`]\n`enableBarCollapsing` (Boolean) | Determines whether the browser's tool bars will collapse or not. [`true`/`false`]\n`ephemeralWebSession` (Boolean) | Prevent re-use cookies of previous session (openAuth only) [`true`/`false`]\n\n### Android Options\nProperty | Description\n-------------- | ------\n`showTitle` (Boolean) | Sets whether the title should be shown in the custom tab. [`true`/`false`]\n`toolbarColor` (String) | Sets the toolbar color. [`gray`/`#808080`]\n`secondaryToolbarColor` (String) | Sets the color of the secondary toolbar. [`white`/`#FFFFFF`]\n`navigationBarColor` (String) | Sets the navigation bar color. [`gray`/`#808080`]\n`navigationBarDividerColor` (String) | Sets the navigation bar divider color. [`white`/`#FFFFFF`]\n`enableUrlBarHiding` (Boolean) | Enables the url bar to hide as the user scrolls down on the page. [`true`/`false`]\n`enableDefaultShare` (Boolean) | Adds a default share item to the menu. [`true`/`false`]\n`animations` (Object) | Sets the start and exit animations. [`{ startEnter, startExit, endEnter, endExit }`]\n`headers` (Object) | The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [`{ 'Authorization': 'Bearer ...' }`]\n`forceCloseOnRedirection` (Boolean) | Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [`true`/`false`]\n`backButtonDrawableId` (String) | Sets a custom drawable instead of the X\n`browserPackage` (String) | Package name of a browser to be used to handle Custom Tabs.\n`showInRecents` (Boolean) | Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [`true`/`false`]\n\n### Demo\n\n```ts\nimport { Utils, Dialogs } from '@nativescript/core';\nimport { InAppBrowser } from '@akylas/nativescript-inappbrowser';\n\n...\n openLink = async () => {\n try {\n const url = 'https://www.proyecto26.com'\n if (await InAppBrowser.isAvailable()) {\n const result = await InAppBrowser.open(url, {\n // iOS Properties\n dismissButtonStyle: 'cancel',\n preferredBarTintColor: '#453AA4',\n preferredControlTintColor: 'white',\n readerMode: false,\n animated: true,\n modalPresentationStyle: 'fullScreen',\n modalTransitionStyle: 'coverVertical',\n modalEnabled: true,\n enableBarCollapsing: false,\n // Android Properties\n showTitle: true,\n toolbarColor: '#6200EE',\n secondaryToolbarColor: 'black',\n navigationBarColor: 'black',\n navigationBarDividerColor: 'white',\n enableUrlBarHiding: true,\n enableDefaultShare: true,\n forceCloseOnRedirection: false,\n // Specify full animation resource identifier(package:anim/name)\n // or only resource name(in case of animation bundled with app).\n animations: {\n startEnter: 'slide_in_right',\n startExit: 'slide_out_left',\n endEnter: 'slide_in_left',\n endExit: 'slide_out_right'\n },\n headers: {\n 'my-custom-header': 'my custom header value'\n },\n hasBackButton: true,\n browserPackage: '',\n showInRecents: false\n });\n Dialogs.alert({\n title: 'Response',\n message: JSON.stringify(result),\n okButtonText: 'Ok'\n });\n }\n else {\n Utils.openUrl(url);\n }\n }\n catch(error) {\n Dialogs.alert({\n title: 'Error',\n message: error.message,\n okButtonText: 'Ok'\n });\n }\n }\n...\n```\n\n### Authentication Flow using Deep Linking\n\nIn order to redirect back to your application from a web browser, you must specify a unique URI to your app. To do this,\ndefine your app scheme and replace `my-scheme` and `my-host` with your info.\n\n- Enable deep linking (Android) - **[AndroidManifest.xml](https://github.com/proyecto26/nativescript-inappbrowser/blob/master/demo/app/App_Resources/Android/src/main/AndroidManifest.xml#L41)**\n```\n\n \n \n \n \n \n \n\n```\n\n- Enable deep linking (iOS) - **[Info.plist](https://github.com/proyecto26/nativescript-inappbrowser/blob/master/demo/app/App_Resources/iOS/Info.plist#L21)**\n```\nCFBundleURLTypes\n\n \n CFBundleTypeRole\n Editor\n CFBundleURLName\n my-scheme\n CFBundleURLSchemes\n \n my-scheme\n \n \n\n```\n\n- utilities.ts\n```javascript\nexport const getDeepLink = (path = \"\") => {\n const scheme = 'my-scheme';\n const prefix = global.isAndroid ? `${scheme}://my-host/` : `${scheme}://`;\n return prefix + path;\n}\n```\n\n- home-page.ts\n```ts\nimport { Utils, Dialogs } from '@nativescript/core';\nimport { InAppBrowser } from '@akylas/nativescript-inappbrowser';\nimport { getDeepLink } from './utilities';\n...\n async onLogin() {\n const deepLink = getDeepLink('callback')\n const url = `https://my-auth-login-page.com?redirect_uri=${deepLink}`\n try {\n if (await InAppBrowser.isAvailable()) {\n InAppBrowser.openAuth(url, deepLink, {\n // iOS Properties\n ephemeralWebSession: false,\n // Android Properties\n showTitle: false,\n enableUrlBarHiding: true,\n enableDefaultShare: false\n }).then((response) => {\n if (\n response.type === 'success' &&\n response.url\n ) {\n Utils.openUrl(response.url)\n }\n })\n } else Utils.openUrl(url)\n } catch {\n Utils.openUrl(url)\n }\n }\n...\n```\n\n### StatusBar\n\nThe 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.\n\n### Authentication\n\nUsing in-app browser tabs (like SFAuthenticationSession/ASWebAuthenticationSession and Android Custom Tabs) where available. Embedded user-agents, known as web-views (like UIWebView and WKWebView), are explicitly not supported due to the usability and security reasons documented in [Section 8.12 of RFC 8252](https://tools.ietf.org/html/rfc8252#section-8.12).\n\n## Credits 👍\n* **React Native InAppBrowser:** [InAppBrowser for React Native](https://github.com/proyecto26/react-native-inappbrowser)\n\n## Contributing ✨\nWhen contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. \nContributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated** ❤️. \nYou can learn more about how you can contribute to this project in the [contribution guide](https://github.com/proyecto26/nativescript-inappbrowser/blob/develop/CONTRIBUTING.md).\n\n## Contributors ✨\nPlease do contribute! Issues and pull requests are welcome.\n\n### Code Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/0)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/1)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/2)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/3)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/4)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/5)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/6)[](https://sourcerer.io/fame/jdnichollsc/proyecto26/nativescript-inappbrowser/links/7)\n\n### Collaborators\n\n| [ Juan Nicholls](https://github.com/jdnichollsc) [✉](mailto:jdnichollsc@hotmail.com) | [ Nathanael Anderson](https://github.com/NathanaelA) [✉](mailto:nathan@master-technology.com) |\n| :---: | :---: |\n\n\n#### Individuals\n\n\n\n## Credits 👍\n* **React Native InAppBrowser:** [InAppBrowser for React Native](https://github.com/proyecto26/react-native-inappbrowser)\n","readmeFilename":"README.md"}
![](\"https://github.com/proyecto26/nativescript-inappbrowser/blob/develop/img/inappbrowser.png?raw=true\")
\n![\"jdnichollsc\"](\"https://avatars3.githubusercontent.com/u/2154886?v=3\")
![\"NathanaelA\"](\"https://avatars3.githubusercontent.com/u/850871?v=3\")
![](\"https://opencollective.com/proyecto26/individuals.svg?width=890\")
\n\n## Credits 👍\n* **React Native InAppBrowser:** [InAppBrowser for React Native](https://github.com/proyecto26/react-native-inappbrowser)\n","readmeFilename":"README.md"}