From 959afba43e82cc33714e1c02ec52de411ef0e9a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20Unneb=C3=A4ck?= Date: Fri, 28 Feb 2020 10:57:09 +0100 Subject: [PATCH 01/10] [android][web-browser] Add "enableDefaultShare" option --- docs/pages/versions/unversioned/sdk/webbrowser.md | 1 + .../main/java/expo/modules/webbrowser/WebBrowserModule.java | 5 +++++ packages/expo-web-browser/src/WebBrowser.types.ts | 1 + 3 files changed, 7 insertions(+) diff --git a/docs/pages/versions/unversioned/sdk/webbrowser.md b/docs/pages/versions/unversioned/sdk/webbrowser.md index 92d8a9492f045..9223941a5d157 100644 --- a/docs/pages/versions/unversioned/sdk/webbrowser.md +++ b/docs/pages/versions/unversioned/sdk/webbrowser.md @@ -70,6 +70,7 @@ Opens the url with Safari in a modal on iOS using [`SFSafariViewController`](htt - **toolbarColor (_optional_) (_string_)** -- color of the toolbar in either `#AARRGGBB` or `#RRGGBB` format. - **enableBarCollapsing (_optional_) (_boolean_)** -- a boolean determining whether the toolbar should be hiding when a user scrolls the website + - **enableDefaultShare (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether a default share item should be added to the menu. - **showInRecents (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether browsed website should be shown as separate entry in Android recents/multitasking view. Default: `false` - **controlsColor (_optional_) (_string_)** -- (_iOS only_) tint color for controls in SKSafariViewController in `#AARRGGBB` or `#RRGGBB` format. - **showTitle (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether the browser should show the title of website on the toolbar diff --git a/packages/expo-web-browser/android/src/main/java/expo/modules/webbrowser/WebBrowserModule.java b/packages/expo-web-browser/android/src/main/java/expo/modules/webbrowser/WebBrowserModule.java index a26551baf3dc1..a089ab4b6b718 100644 --- a/packages/expo-web-browser/android/src/main/java/expo/modules/webbrowser/WebBrowserModule.java +++ b/packages/expo-web-browser/android/src/main/java/expo/modules/webbrowser/WebBrowserModule.java @@ -34,6 +34,7 @@ public class WebBrowserModule extends ExportedModule { private final static String SHOW_IN_RECENTS = "showInRecents"; + private final static String DEFAULT_SHARE_MENU_ITEM_KEY = "enableDefaultShare"; private final static String TOOLBAR_COLOR_KEY = "toolbarColor"; private final static String ERROR_CODE = "EXWebBrowser"; private static final String TAG = "ExpoWebBrowser"; @@ -163,6 +164,10 @@ private Intent createCustomTabsIntent(ReadableArguments arguments) { builder.setShowTitle(arguments.getBoolean(SHOW_TITLE_KEY, false)); + if (arguments.hasKey(DEFAULT_SHARE_MENU_ITEM_KEY) && options.getBoolean(KEY_DEFAULT_SHARE_MENU_ITEM)) { + builder.addDefaultShareMenuItem(); + } + Intent intent = builder.build().intent; // We cannot use builder's method enableUrlBarHiding, because there is no corresponding disable method and some browsers enables it by default. diff --git a/packages/expo-web-browser/src/WebBrowser.types.ts b/packages/expo-web-browser/src/WebBrowser.types.ts index 7258b72a310bf..858cb9baa34aa 100644 --- a/packages/expo-web-browser/src/WebBrowser.types.ts +++ b/packages/expo-web-browser/src/WebBrowser.types.ts @@ -9,6 +9,7 @@ export type WebBrowserOpenOptions = { showTitle?: boolean; /** Android only */ + enableDefaultShare?: boolean; showInRecents?: boolean; /** iOS only */ From 07867634725a77859a780f46a8665d188fbf4d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20Unneb=C3=A4ck?= Date: Fri, 28 Feb 2020 11:03:45 +0100 Subject: [PATCH 02/10] [ios][web-browser] Add "readerMode" option --- docs/pages/versions/unversioned/sdk/webbrowser.md | 1 + packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m | 7 +++++-- packages/expo-web-browser/src/WebBrowser.types.ts | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/pages/versions/unversioned/sdk/webbrowser.md b/docs/pages/versions/unversioned/sdk/webbrowser.md index 9223941a5d157..f888daf1e19f1 100644 --- a/docs/pages/versions/unversioned/sdk/webbrowser.md +++ b/docs/pages/versions/unversioned/sdk/webbrowser.md @@ -75,6 +75,7 @@ Opens the url with Safari in a modal on iOS using [`SFSafariViewController`](htt - **controlsColor (_optional_) (_string_)** -- (_iOS only_) tint color for controls in SKSafariViewController in `#AARRGGBB` or `#RRGGBB` format. - **showTitle (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether the browser should show the title of website on the toolbar - **package (_optional_) (_string_)** -- (_Android only_). Package name of a browser to be used to handle Custom Tabs. List of available packages is to be queried by [getCustomTabsSupportingBrowsers](#webbrowsergetcustomtabssupportingbrowsers) method. + - **readerMode (_optional_) (_boolean_)** -- (_iOS only_) a boolean determining whether Safari should enter Reader mode, if it is available. Note that behavior customization options depend on the actual browser and its version. Some or all of the arguments may be ignored. diff --git a/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m b/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m index de03ab1583470..002ff6bd409c4 100644 --- a/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m +++ b/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m @@ -89,13 +89,16 @@ - (dispatch_queue_t)methodQueue } NSURL *url = [[NSURL alloc] initWithString:authURL]; + BOOL readerMode = [arguments[@"readerMode"] boolValue]; + BOOL enableBarCollapsing = [arguments[@"enableBarCollapsing"] boolValue]; SFSafariViewController *safariVC = nil; if (@available(iOS 11, *)) { SFSafariViewControllerConfiguration *config = [[SFSafariViewControllerConfiguration alloc] init]; - config.barCollapsingEnabled = [arguments[@"enableBarCollapsing"] boolValue]; + config.barCollapsingEnabled = enableBarCollapsing; + config.entersReaderIfAvailable = readerMode; safariVC = [[SFSafariViewController alloc] initWithURL:url configuration:config]; } else { - safariVC = [[SFSafariViewController alloc] initWithURL:url]; + safariVC = [[SFSafariViewController alloc] initWithURL:url entersReaderIfAvailable:readerMode]; } if([[arguments allKeys] containsObject:WebBrowserToolbarColorKey]) { diff --git a/packages/expo-web-browser/src/WebBrowser.types.ts b/packages/expo-web-browser/src/WebBrowser.types.ts index 858cb9baa34aa..901e7da46c254 100644 --- a/packages/expo-web-browser/src/WebBrowser.types.ts +++ b/packages/expo-web-browser/src/WebBrowser.types.ts @@ -14,6 +14,7 @@ export type WebBrowserOpenOptions = { /** iOS only */ controlsColor?: string; + readerMode?: boolean; // Web windowName?: string; From d5827502d22ad9f4afabf54b56ae9afa7c180cc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20Unneb=C3=A4ck?= Date: Fri, 28 Feb 2020 11:13:49 +0100 Subject: [PATCH 03/10] [ios][web-browser] Add "dismissButtonStyle" option --- docs/pages/versions/unversioned/sdk/webbrowser.md | 1 + .../ios/EXWebBrowser/EXWebBrowser.m | 13 +++++++++++++ packages/expo-web-browser/src/WebBrowser.types.ts | 1 + 3 files changed, 15 insertions(+) diff --git a/docs/pages/versions/unversioned/sdk/webbrowser.md b/docs/pages/versions/unversioned/sdk/webbrowser.md index f888daf1e19f1..a6cfab8bef03c 100644 --- a/docs/pages/versions/unversioned/sdk/webbrowser.md +++ b/docs/pages/versions/unversioned/sdk/webbrowser.md @@ -69,6 +69,7 @@ Opens the url with Safari in a modal on iOS using [`SFSafariViewController`](htt A dictionary with following key-value pairs: - **toolbarColor (_optional_) (_string_)** -- color of the toolbar in either `#AARRGGBB` or `#RRGGBB` format. + - **dismissButtonStyle (_optional_) (_string_)** -- (_iOS only_) The style of the dismiss button. Should be one of: `done`, `close`, or `cancel`. - **enableBarCollapsing (_optional_) (_boolean_)** -- a boolean determining whether the toolbar should be hiding when a user scrolls the website - **enableDefaultShare (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether a default share item should be added to the menu. - **showInRecents (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether browsed website should be shown as separate entry in Android recents/multitasking view. Default: `false` diff --git a/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m b/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m index 002ff6bd409c4..a536d017230bf 100644 --- a/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m +++ b/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m @@ -101,6 +101,19 @@ - (dispatch_queue_t)methodQueue safariVC = [[SFSafariViewController alloc] initWithURL:url entersReaderIfAvailable:readerMode]; } + if (@available(iOS 11.0, *)) { + NSString *dismissButtonStyle = [arguments valueForKey:@"dismissButtonStyle"]; + if ([dismissButtonStyle isEqualToString:@"done"]) { + safariVC.dismissButtonStyle = SFSafariViewControllerDismissButtonStyleDone; + } + else if ([dismissButtonStyle isEqualToString:@"close"]) { + safariVC.dismissButtonStyle = SFSafariViewControllerDismissButtonStyleClose; + } + else if ([dismissButtonStyle isEqualToString:@"cancel"]) { + safariVC.dismissButtonStyle = SFSafariViewControllerDismissButtonStyleCancel; + } + } + if([[arguments allKeys] containsObject:WebBrowserToolbarColorKey]) { safariVC.preferredBarTintColor = [EXWebBrowser convertHexColorString:arguments[WebBrowserToolbarColorKey]]; } diff --git a/packages/expo-web-browser/src/WebBrowser.types.ts b/packages/expo-web-browser/src/WebBrowser.types.ts index 901e7da46c254..046b989941cac 100644 --- a/packages/expo-web-browser/src/WebBrowser.types.ts +++ b/packages/expo-web-browser/src/WebBrowser.types.ts @@ -14,6 +14,7 @@ export type WebBrowserOpenOptions = { /** iOS only */ controlsColor?: string; + dismissButtonStyle?: 'done' | 'close' | 'cancel'; readerMode?: boolean; // Web From d5d9d78acd13fa63b2e49b3aa986cbfe6661e95a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Linus=20Unneb=C3=A4ck?= Date: Fri, 28 Feb 2020 11:16:44 +0100 Subject: [PATCH 04/10] [docs][web-browser] Cleanup "browserParams" options --- docs/pages/versions/unversioned/sdk/webbrowser.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/versions/unversioned/sdk/webbrowser.md b/docs/pages/versions/unversioned/sdk/webbrowser.md index a6cfab8bef03c..4a9f0b7a0003c 100644 --- a/docs/pages/versions/unversioned/sdk/webbrowser.md +++ b/docs/pages/versions/unversioned/sdk/webbrowser.md @@ -68,15 +68,15 @@ Opens the url with Safari in a modal on iOS using [`SFSafariViewController`](htt - **browserParams (_object_)** (_optional_) -- A dictionary with following key-value pairs: - - **toolbarColor (_optional_) (_string_)** -- color of the toolbar in either `#AARRGGBB` or `#RRGGBB` format. + - **controlsColor (_optional_) (_string_)** -- (_iOS only_) tint color for controls in SKSafariViewController in `#AARRGGBB` or `#RRGGBB` format. - **dismissButtonStyle (_optional_) (_string_)** -- (_iOS only_) The style of the dismiss button. Should be one of: `done`, `close`, or `cancel`. - - **enableBarCollapsing (_optional_) (_boolean_)** -- a boolean determining whether the toolbar should be hiding when a user scrolls the website + - **enableBarCollapsing (_optional_) (_boolean_)** -- a boolean determining whether the toolbar should be hiding when a user scrolls the website. - **enableDefaultShare (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether a default share item should be added to the menu. - - **showInRecents (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether browsed website should be shown as separate entry in Android recents/multitasking view. Default: `false` - - **controlsColor (_optional_) (_string_)** -- (_iOS only_) tint color for controls in SKSafariViewController in `#AARRGGBB` or `#RRGGBB` format. - - **showTitle (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether the browser should show the title of website on the toolbar - **package (_optional_) (_string_)** -- (_Android only_). Package name of a browser to be used to handle Custom Tabs. List of available packages is to be queried by [getCustomTabsSupportingBrowsers](#webbrowsergetcustomtabssupportingbrowsers) method. - **readerMode (_optional_) (_boolean_)** -- (_iOS only_) a boolean determining whether Safari should enter Reader mode, if it is available. + - **showInRecents (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether browsed website should be shown as separate entry in Android recents/multitasking view. Default: `false` + - **showTitle (_optional_) (_boolean_)** -- (_Android only_) a boolean determining whether the browser should show the title of website on the toolbar. + - **toolbarColor (_optional_) (_string_)** -- color of the toolbar in either `#AARRGGBB` or `#RRGGBB` format. Note that behavior customization options depend on the actual browser and its version. Some or all of the arguments may be ignored. From 410b598749363ad95dc81cb4615cc28e299d05b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Czernek?= Date: Fri, 28 Feb 2020 15:58:54 +0100 Subject: [PATCH 05/10] Add changelog, example in ncl and fix Android. --- CHANGELOG.md | 2 + .../src/screens/WebBrowserScreen.tsx | 57 +++++++++++++++---- .../modules/webbrowser/WebBrowserModule.java | 7 +-- 3 files changed, 50 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9f5e436a16cfe..3472cf0f4f9f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,8 @@ This is the log of notable changes to the Expo client that are developer-facing. ### 🎉 New features +- Add `readerMode` (iOS) and `enableDefaultShare` (Android) flags for `WebBrowser` ([#7218](https://github.com/expo/expo/pull/7218) by [@LinusU](https://github.com/LinusU)) & [@mczernek](https://github.com/mczernek)) + ### 🐛 Bug fixes ## 37.0.0 diff --git a/apps/native-component-list/src/screens/WebBrowserScreen.tsx b/apps/native-component-list/src/screens/WebBrowserScreen.tsx index e6868fc37c9d7..86d69ffa80b18 100644 --- a/apps/native-component-list/src/screens/WebBrowserScreen.tsx +++ b/apps/native-component-list/src/screens/WebBrowserScreen.tsx @@ -20,6 +20,8 @@ interface State { lastWarmedPackage?: string; barCollapsing: boolean; showInRecents: boolean; + readerMode: boolean; + enableDefaultShare: boolean; } export default class WebBrowserScreen extends React.Component<{}, State> { @@ -53,6 +55,14 @@ export default class WebBrowserScreen extends React.Component<{}, State> { this.setState({ barCollapsing }); }; + readerModeSwitchChanged = (readerMode: boolean) => { + this.setState({ readerMode }); + }; + + enableDefaultShareChanged = (enableDefaultShare: boolean) => { + this.setState({ enableDefaultShare }); + }; + showPackagesAlert = async () => { const result = await WebBrowser.getCustomTabsSupportingBrowsersAsync(); Alert.alert('Result', JSON.stringify(result, null, 2)); @@ -67,7 +77,7 @@ export default class WebBrowserScreen extends React.Component<{}, State> { Alert.alert('Result', JSON.stringify(result, null, 2)); }; - handleMayInitWithUrlClicke = async () => { + handleMayInitWithUrlClicked = async () => { const { selectedPackage: lastWarmedPackage } = this.state; this.setState({ lastWarmedPackage, @@ -89,8 +99,13 @@ export default class WebBrowserScreen extends React.Component<{}, State> { browserPackage: this.state.selectedPackage, enableBarCollapsing: this.state.barCollapsing, showInRecents: this.state.showInRecents, + readerMode: this.state.readerMode, + enableDefaultShare: this.state.enableDefaultShare, }; - const result = await WebBrowser.openBrowserAsync(url, args); + const result = await WebBrowser.openBrowserAsync( + 'https://proandroiddev.com/say-no-to-baseactivity-and-basefragment-83b156ed8998?source=grid_home----c72404660798-----0-1-----------------18---39b94dfe_9ccf_4e8c_803f_bcf970042e56--', + args + ); setTimeout(() => Alert.alert('Result', JSON.stringify(result, null, 2)), 1000); }; @@ -109,15 +124,25 @@ export default class WebBrowserScreen extends React.Component<{}, State> { renderIOSChoices = () => Platform.OS === 'ios' && ( - - Controls color (#rrggbb): - - + <> + + Controls color (#rrggbb): + + + + Reader mode + + + ); renderAndroidChoices = () => @@ -139,6 +164,14 @@ export default class WebBrowserScreen extends React.Component<{}, State> { value={this.state.showInRecents} /> + + Default share + + Force package: {