1import * as WebBrowser from 'expo-web-browser';
2import React from 'react';
3import { StyleSheet, View } from 'react-native';
4
5import Button from '../../components/Button';
6import Configurator, { ConfiguratorChoiceType } from '../../components/Configurator';
7import HeadingText from '../../components/HeadingText';
8import MonoText from '../../components/MonoText';
9import { Colors } from '../../constants';
10
11const url = 'https://blog.expo.dev/expo-sdk-44-4c4b8306584a';
12
13const openBrowserConfigurationChoices: ConfiguratorChoiceType[] = [
14  {
15    name: 'toolbarColor',
16    title: `Use toolbarColor (${Colors.tintColor})`,
17    initial: false,
18    resolve: (checked) => (checked ? Colors.tintColor : undefined),
19  },
20  {
21    name: 'secondaryToolbarColor',
22    title: `Use secondaryToolbarColor (${Colors.highlightColor})`,
23    platforms: ['android'],
24    initial: false,
25    resolve: (checked) => (checked ? Colors.highlightColor : undefined),
26  },
27  {
28    name: 'controlsColor',
29    title: `Use controlsColor (${Colors.headerTitle})`,
30    initial: false,
31    resolve: (checked) => (checked ? Colors.headerTitle : undefined),
32  },
33  {
34    name: 'showTitle',
35    title: 'Show title',
36    platforms: ['android'],
37    initial: false,
38  },
39  {
40    name: 'showInRecents',
41    title: 'Show in recents',
42    platforms: ['android'],
43    initial: false,
44  },
45  {
46    name: 'enableBarCollapsing',
47    title: 'Enable bar collapsing',
48    initial: false,
49  },
50  {
51    name: 'readerMode',
52    title: 'Reader mode',
53    platforms: ['ios'],
54    initial: false,
55  },
56  {
57    name: 'enableDefaultShareMenuItem',
58    title: 'Enable default share menu item',
59    platforms: ['android'],
60    initial: false,
61  },
62];
63
64export default function OpenBrowserAsyncDemo() {
65  const [openOptions, setOpenOptions] = React.useState({});
66  const openBrowser = React.useCallback(async () => {
67    const result = await WebBrowser.openBrowserAsync(url, openOptions);
68    alert(JSON.stringify(result, null, 2));
69  }, [openOptions]);
70
71  const openAndDismiss = React.useCallback(() => {
72    WebBrowser.openBrowserAsync(url, openOptions);
73    WebBrowser.dismissBrowser();
74  }, [openOptions]);
75
76  const openTwice = React.useCallback(async () => {
77    WebBrowser.openBrowserAsync(url, openOptions);
78    const result = await WebBrowser.openBrowserAsync(url, openOptions);
79    if (result.type === WebBrowser.WebBrowserResultType.LOCKED) {
80      alert('Opening the second browser was properly locked');
81    } else {
82      alert(`Opening the second browser unexpectedly returned type: ${result.type}`);
83    }
84  }, [openOptions]);
85
86  return (
87    <>
88      <HeadingText>openBrowserAsync</HeadingText>
89      <Configurator choices={openBrowserConfigurationChoices} onChange={setOpenOptions} />
90      <MonoText>WebBrowser.openBrowserAsync(url, {JSON.stringify(openOptions, null, 2)})</MonoText>
91      <View style={styles.buttons}>
92        <Button style={styles.button} onPress={openBrowser} title="Open" />
93        <Button style={styles.button} onPress={openAndDismiss} title="Open and dismiss" />
94        <Button style={styles.button} onPress={openTwice} title="Open twice" />
95        <Button style={styles.button} onPress={WebBrowser.dismissBrowser} title="Dismiss (no-op)" />
96      </View>
97    </>
98  );
99}
100
101const styles = StyleSheet.create({
102  buttons: {
103    flexDirection: 'row',
104    flexWrap: 'wrap',
105  },
106  button: {
107    marginVertical: 10,
108    marginHorizontal: 5,
109    alignItems: 'flex-start',
110  },
111});
112