diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f5e436a16cfe..1ad9a78d59cff 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` and `dismissButtonStyle` (iOS) and `enableDefaultShare` (Android) flags for `WebBrowser` ([#7221](https://github.com/expo/expo/pull/7221) 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..f56c09851454e 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,10 @@ export default class WebBrowserScreen extends React.Component<{}, State> {
browserPackage: this.state.selectedPackage,
enableBarCollapsing: this.state.barCollapsing,
showInRecents: this.state.showInRecents,
+ readerMode: this.state.readerMode,
+ enableDefaultShareMenuItem: this.state.enableDefaultShare,
};
- const result = await WebBrowser.openBrowserAsync(url, args);
+ const result = await WebBrowser.openBrowserAsync('https://expo.io', args);
setTimeout(() => Alert.alert('Result', JSON.stringify(result, null, 2)), 1000);
};
@@ -109,15 +121,25 @@ export default class WebBrowserScreen extends React.Component<{}, State> {
renderIOSChoices = () =>
Platform.OS === 'ios' && (
-
- Controls color (#rrggbb):
-
-
+ <>
+
+ Controls color (#rrggbb):
+
+
+
+ Reader mode
+
+
+ >
);
renderAndroidChoices = () =>
@@ -139,6 +161,14 @@ export default class WebBrowserScreen extends React.Component<{}, State> {
value={this.state.showInRecents}
/>
+
+ Default share
+
+
Force package:
{
diff --git a/docs/pages/versions/unversioned/sdk/webbrowser.md b/docs/pages/versions/unversioned/sdk/webbrowser.md
index 92d8a9492f045..4a9f0b7a0003c 100644
--- a/docs/pages/versions/unversioned/sdk/webbrowser.md
+++ b/docs/pages/versions/unversioned/sdk/webbrowser.md
@@ -68,12 +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.
- - **enableBarCollapsing (_optional_) (_boolean_)** -- a boolean determining whether the toolbar should be hiding when a user scrolls the website
- - **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
+ - **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.
- **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.
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..b309c966ff6c9 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
@@ -31,10 +31,10 @@ public class WebBrowserModule extends ExportedModule {
private final static String SERVICE_PACKAGES_KEY = "servicePackages";
private final static String PREFERRED_BROWSER_PACKAGE = "preferredBrowserPackage";
private final static String DEFAULT_BROWSER_PACKAGE = "defaultBrowserPackage";
-
private final static String SHOW_IN_RECENTS = "showInRecents";
-
+ private final static String DEFAULT_SHARE_MENU_ITEM = "enableDefaultShareMenuItem";
private final static String TOOLBAR_COLOR_KEY = "toolbarColor";
+
private final static String ERROR_CODE = "EXWebBrowser";
private static final String TAG = "ExpoWebBrowser";
private static final String SHOW_TITLE_KEY = "showTitle";
@@ -163,6 +163,10 @@ private Intent createCustomTabsIntent(ReadableArguments arguments) {
builder.setShowTitle(arguments.getBoolean(SHOW_TITLE_KEY, false));
+ if (arguments.containsKey(DEFAULT_SHARE_MENU_ITEM) && arguments.getBoolean(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/build/WebBrowser.types.d.ts b/packages/expo-web-browser/build/WebBrowser.types.d.ts
index 0ae303b26e56e..223031fbbe278 100644
--- a/packages/expo-web-browser/build/WebBrowser.types.d.ts
+++ b/packages/expo-web-browser/build/WebBrowser.types.d.ts
@@ -7,9 +7,12 @@ export declare type WebBrowserOpenOptions = {
enableBarCollapsing?: boolean;
showTitle?: boolean;
/** Android only */
+ enableDefaultShareMenuItem?: boolean;
showInRecents?: boolean;
/** iOS only */
controlsColor?: string;
+ dismissButtonStyle?: 'done' | 'close' | 'cancel';
+ readerMode?: boolean;
windowName?: string;
windowFeatures?: string;
};
diff --git a/packages/expo-web-browser/build/WebBrowser.types.js.map b/packages/expo-web-browser/build/WebBrowser.types.js.map
index 4578124e1204c..97a827a4733b8 100644
--- a/packages/expo-web-browser/build/WebBrowser.types.js.map
+++ b/packages/expo-web-browser/build/WebBrowser.types.js.map
@@ -1 +1 @@
-{"version":3,"file":"WebBrowser.types.js","sourceRoot":"","sources":["../src/WebBrowser.types.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,MAAM,EAAE,QAAQ;IAChB;;OAEG;IACH,OAAO,EAAE,SAAS;IAClB;;OAEG;IACH,MAAM,EAAE,QAAQ;CACR,CAAC","sourcesContent":["export type RedirectEvent = {\n url: string;\n};\n\nexport type WebBrowserOpenOptions = {\n toolbarColor?: string;\n browserPackage?: string;\n enableBarCollapsing?: boolean;\n showTitle?: boolean;\n\n /** Android only */\n showInRecents?: boolean;\n\n /** iOS only */\n controlsColor?: string;\n\n // Web\n windowName?: string;\n windowFeatures?: string;\n};\n\nexport type WebBrowserAuthSessionResult = WebBrowserRedirectResult | WebBrowserResult;\n\nexport type WebBrowserCustomTabsResults = {\n defaultBrowserPackage?: string;\n preferredBrowserPackage?: string;\n browserPackages: string[];\n servicePackages: string[];\n};\n\nexport const WebBrowserResultType = {\n /**\n * iOS only\n */\n CANCEL: 'cancel',\n /**\n * iOS only\n */\n DISMISS: 'dismiss',\n /**\n * Android only\n */\n OPENED: 'opened',\n} as const;\n\nexport type WebBrowserResultType = typeof WebBrowserResultType[keyof typeof WebBrowserResultType];\n\nexport type WebBrowserResult = {\n // cancel and dismiss are iOS only, opened is Android only\n type: WebBrowserResultType;\n};\n\nexport type WebBrowserRedirectResult = {\n type: 'success';\n url: string;\n};\n\nexport type ServiceActionResult = {\n servicePackage?: string;\n};\n\nexport type WebBrowserMayInitWithUrlResult = ServiceActionResult;\nexport type WebBrowserWarmUpResult = ServiceActionResult;\nexport type WebBrowserCoolDownResult = ServiceActionResult;\n"]}
\ No newline at end of file
+{"version":3,"file":"WebBrowser.types.js","sourceRoot":"","sources":["../src/WebBrowser.types.ts"],"names":[],"mappings":"AAiCA,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,MAAM,EAAE,QAAQ;IAChB;;OAEG;IACH,OAAO,EAAE,SAAS;IAClB;;OAEG;IACH,MAAM,EAAE,QAAQ;CACR,CAAC","sourcesContent":["export type RedirectEvent = {\n url: string;\n};\n\nexport type WebBrowserOpenOptions = {\n toolbarColor?: string;\n browserPackage?: string;\n enableBarCollapsing?: boolean;\n showTitle?: boolean;\n\n /** Android only */\n enableDefaultShareMenuItem?: boolean;\n showInRecents?: boolean;\n\n /** iOS only */\n controlsColor?: string;\n dismissButtonStyle?: 'done' | 'close' | 'cancel';\n readerMode?: boolean;\n\n // Web\n windowName?: string;\n windowFeatures?: string;\n};\n\nexport type WebBrowserAuthSessionResult = WebBrowserRedirectResult | WebBrowserResult;\n\nexport type WebBrowserCustomTabsResults = {\n defaultBrowserPackage?: string;\n preferredBrowserPackage?: string;\n browserPackages: string[];\n servicePackages: string[];\n};\n\nexport const WebBrowserResultType = {\n /**\n * iOS only\n */\n CANCEL: 'cancel',\n /**\n * iOS only\n */\n DISMISS: 'dismiss',\n /**\n * Android only\n */\n OPENED: 'opened',\n} as const;\n\nexport type WebBrowserResultType = typeof WebBrowserResultType[keyof typeof WebBrowserResultType];\n\nexport type WebBrowserResult = {\n // cancel and dismiss are iOS only, opened is Android only\n type: WebBrowserResultType;\n};\n\nexport type WebBrowserRedirectResult = {\n type: 'success';\n url: string;\n};\n\nexport type ServiceActionResult = {\n servicePackage?: string;\n};\n\nexport type WebBrowserMayInitWithUrlResult = ServiceActionResult;\nexport type WebBrowserWarmUpResult = ServiceActionResult;\nexport type WebBrowserCoolDownResult = ServiceActionResult;\n"]}
\ No newline at end of file
diff --git a/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m b/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m
index de03ab1583470..d47cff31341e4 100644
--- a/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m
+++ b/packages/expo-web-browser/ios/EXWebBrowser/EXWebBrowser.m
@@ -89,13 +89,29 @@ - (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 (@available(iOS 11.0, *)) {
+ NSString *dismissButtonStyle = [arguments valueForKey:@"dismissButtonStyle"];
+ if ([@"done" isEqualToString:dismissButtonStyle]) {
+ safariVC.dismissButtonStyle = SFSafariViewControllerDismissButtonStyleDone;
+ }
+ else if ([@"close" isEqualToString:dismissButtonStyle]) {
+ safariVC.dismissButtonStyle = SFSafariViewControllerDismissButtonStyleClose;
+ }
+ else if ([@"cancel" isEqualToString:dismissButtonStyle]) {
+ safariVC.dismissButtonStyle = SFSafariViewControllerDismissButtonStyleCancel;
+ }
}
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 7258b72a310bf..acea812535d37 100644
--- a/packages/expo-web-browser/src/WebBrowser.types.ts
+++ b/packages/expo-web-browser/src/WebBrowser.types.ts
@@ -9,10 +9,13 @@ export type WebBrowserOpenOptions = {
showTitle?: boolean;
/** Android only */
+ enableDefaultShareMenuItem?: boolean;
showInRecents?: boolean;
/** iOS only */
controlsColor?: string;
+ dismissButtonStyle?: 'done' | 'close' | 'cancel';
+ readerMode?: boolean;
// Web
windowName?: string;