Fixing issue with changes to ASWebAuthenticationSession, add support for automatic modal presentation style and add option to enable bar collapsing

Author: jdnichollsc

CHANGELOG.md

@@ -22,15 +22,24 @@ in case of vulnerabilities.
 
 ## [Unreleased]
 
+## [3.2.0] - 2019-11-10
+
+### Added
+- Added support for `automatic` modal presentation style from **iOS**.
+- Added `enableBarCollapsing` option to determines whether the browser's tool bars will collapse or not from **iOS**.
+
+### Fixed
+- Fixed Browser crashes on iOS 13 when openAuth is used.
+
 ## [3.1.0] - 2019-09-03
 
 ### Added
-- Add `waitForRedirectDelay` option for **Android** to fix issues dismissing the browser before detecting the redirection with `Linking` ([817f6ec](https://github.com/proyecto26/react-native-inappbrowser/commit/817f6ece140c0f2f84e21a537d5030403e652bc1)).
+- Added `waitForRedirectDelay` option for **Android** to fix issues dismissing the browser before detecting the redirection with `Linking` ([817f6ec](https://github.com/proyecto26/react-native-inappbrowser/commit/817f6ece140c0f2f84e21a537d5030403e652bc1)).
 
 ## [3.0.1] - 2019-08-16
 
 ### Added
-- Add gradle backward-compatibility for Android Support with Jetifier ([#96](https://github.com/proyecto26/react-native-inappbrowser/pull/97)).
+- Added gradle backward-compatibility for Android Support with Jetifier ([#96](https://github.com/proyecto26/react-native-inappbrowser/pull/97)).
 - Added **androidXAnnotation** and **androidXBrowser** properties from **rootProject.ext** for **AndroidX** with backward compatibility using **supportLibVersion** property instead.
 
 ## [3.0.0] - 2019-07-27

README.md

@@ -140,9 +140,10 @@ Property       | Description
 `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`]
+`modalPresentationStyle` (String)    | The presentation style for modally presented view controllers. [`automatic`/`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`]
+`enableBarCollapsing` (Boolean)      | Determines whether the browser's tool bars will collapse or not. [`true`/`false`]
 
 ### Android Options
 Property       | Description
@@ -178,6 +179,7 @@ import InAppBrowser from 'react-native-inappbrowser-reborn'
           modalPresentationStyle: 'overFullScreen',
           modalTransitionStyle: 'partialCurl',
           modalEnabled: true,
+          enableBarCollapsing: false,
           // Android Properties
           showTitle: true,
           toolbarColor: '#6200EE',

example/App.js

@@ -47,20 +47,19 @@ export default class App extends Component {
       if (await InAppBrowser.isAvailable()) {
         // A delay to change the StatusBar when the browser is opened
         const animated = true;
-        setTimeout(
-          () => StatusBar.setBarStyle('light-content'),
-          animated && Platform.OS === 'ios' ? 500 : 0
-        );
+        const delay = animated && Platform.OS === 'ios' ? 400 : 0;
+        setTimeout(() => StatusBar.setBarStyle('light-content'), delay);
         const result = await InAppBrowser.open(url, {
           // iOS Properties
           dismissButtonStyle: 'cancel',
           preferredBarTintColor: '#453AA4',
           preferredControlTintColor: 'white',
           readerMode: false,
           animated,
-          modalPresentationStyle: 'overFullScreen',
+          modalPresentationStyle: 'fullScreen',
           modalTransitionStyle: 'partialCurl',
           modalEnabled: true,
+          enableBarCollapsing: false,
           // Android Properties
           showTitle: true,
           toolbarColor: '#6200EE',
@@ -103,8 +102,8 @@ export default class App extends Component {
 
   async tryDeepLinking() {
     const loginUrl = 'https://proyecto26.github.io/react-native-inappbrowser/';
-    const redirectUrl = encodeURIComponent(this.getDeepLink('home'));
-    const url = `${loginUrl}?redirect_url=${redirectUrl}`;
+    const redirectUrl = this.getDeepLink();
+    const url = `${loginUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`;
     try {
       if (await InAppBrowser.isAvailable()) {
         const result = await InAppBrowser.openAuth(url, redirectUrl, {
@@ -113,7 +112,7 @@ export default class App extends Component {
           secondaryToolbarColor: 'black',
           enableUrlBarHiding: true,
           enableDefaultShare: true,
-          waitForRedirectDelay: 1000
+          waitForRedirectDelay: 2000
         });
         await this.sleep(800);
         Alert.alert('Response', JSON.stringify(result));

index.d.ts

@@ -19,6 +19,7 @@ declare module 'react-native-inappbrowser-reborn' {
     readerMode?: boolean,
     animated?: boolean,
     modalPresentationStyle?:
+      | 'automatic'
       | 'fullScreen'
       | 'pageSheet'
       | 'formSheet'
@@ -33,7 +34,8 @@ declare module 'react-native-inappbrowser-reborn' {
       | 'flipHorizontal'
       | 'crossDissolve'
       | 'partialCurl',
-    modalEnabled?: boolean
+    modalEnabled?: boolean,
+    enableBarCollapsing?: boolean
   }
 
   type InAppBrowserAndroidOptions = {

index.js

@@ -25,6 +25,7 @@ type InAppBrowseriOSOptions = {
   readerMode?: boolean,
   animated?: boolean,
   modalPresentationStyle?:
+    | 'automatic'
     | 'fullScreen'
     | 'pageSheet'
     | 'formSheet'
@@ -39,7 +40,8 @@ type InAppBrowseriOSOptions = {
     | 'flipHorizontal'
     | 'crossDissolve'
     | 'partialCurl',
-  modalEnabled?: boolean
+  modalEnabled?: boolean,
+  enableBarCollapsing?: boolean
 };
 
 type InAppBrowserAndroidOptions = {
@@ -65,27 +67,31 @@ async function open(
   url: string,
   options: InAppBrowserOptions = {}
 ): Promise<BrowserResult> {
-  const modalEnabled =
-    options.modalEnabled !== undefined ? options.modalEnabled : true;
+  const {
+    animated,
+    readerMode,
+    modalEnabled,
+    dismissButtonStyle,
+    waitForRedirectDelay,
+    enableBarCollapsing,
+    preferredBarTintColor,
+    preferredControlTintColor,
+    ...optionalOptions
+  } = options;
   const inAppBrowserOptions = {
-    ...options,
+    ...optionalOptions,
     url,
-    dismissButtonStyle: options.dismissButtonStyle || 'close',
-    readerMode: options.readerMode !== undefined ? options.readerMode : false,
-    animated: options.animated !== undefined ? options.animated : true,
-    modalEnabled,
-    waitForRedirectDelay: options.waitForRedirectDelay || 0
+    dismissButtonStyle: dismissButtonStyle || 'close',
+    readerMode: !!readerMode,
+    animated: animated !== undefined ? animated : true,
+    modalEnabled: modalEnabled !== undefined ? modalEnabled : true,
+    waitForRedirectDelay: waitForRedirectDelay || 0,
+    enableBarCollapsing: !!enableBarCollapsing,
+    preferredBarTintColor:
+      preferredBarTintColor && processColor(preferredBarTintColor),
+    preferredControlTintColor:
+      preferredControlTintColor && processColor(preferredControlTintColor)
   };
-  if (inAppBrowserOptions.preferredBarTintColor) {
-    inAppBrowserOptions.preferredBarTintColor = processColor(
-      inAppBrowserOptions.preferredBarTintColor
-    );
-  }
-  if (inAppBrowserOptions.preferredControlTintColor) {
-    inAppBrowserOptions.preferredControlTintColor = processColor(
-      inAppBrowserOptions.preferredControlTintColor
-    );
-  }
   return RNInAppBrowser.open(inAppBrowserOptions);
 }
 
@@ -139,13 +145,13 @@ async function _openAuthSessionPolyfillAsync(
   let response = null;
   try {
     response = await Promise.race([
+      _waitForRedirectAsync(returnUrl),
       open(startUrl, options).then(result => {
         return new Promise(resolve => {
           // A delay to wait for the redirection or dismiss the browser instead
           setTimeout(() => resolve(result), options.waitForRedirectDelay);
         });
-      }),
-      _waitForRedirectAsync(returnUrl)
+      })
     ]);
   } finally {
     close();

ios/RNInAppBrowser.h

@@ -5,6 +5,7 @@
 #endif
 
 @interface RNInAppBrowser : NSObject <RCTBridgeModule>
-
 @end
 
+@interface ModalSafariViewController : UINavigationController <UINavigationControllerDelegate>
+@end