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: {