1import * as WebBrowser from 'expo-web-browser'; 2import React from 'react'; 3 4import FunctionDemo, { FunctionDescription } from '../../components/FunctionDemo'; 5import Colors from '../../constants/Colors'; 6 7const URL = 'https://blog.expo.dev/expo-sdk-44-4c4b8306584a'; 8 9const FUNCTIONS_DESCRIPTION: FunctionDescription = { 10 name: 'openBrowserAsync', 11 parameters: [ 12 { 13 type: 'constant', 14 name: 'url', 15 value: URL, 16 }, 17 { 18 type: 'object', 19 name: 'options', 20 properties: [ 21 { 22 name: 'toolbarColor', 23 type: 'enum', 24 values: [ 25 { 26 name: 'undefined', 27 value: undefined, 28 }, 29 { 30 name: `"${Colors.tintColor}"`, 31 value: Colors.tintColor, 32 }, 33 { 34 name: '"pink"', 35 value: 'pink', 36 }, 37 ], 38 }, 39 { 40 name: 'secondaryToolbarColor', 41 platforms: ['android'], 42 type: 'enum', 43 values: [ 44 { 45 name: 'undefined', 46 value: undefined, 47 }, 48 { 49 name: `"${Colors.highlightColor}"`, 50 value: Colors.highlightColor, 51 }, 52 { 53 name: '"blue"', 54 value: 'blue', 55 }, 56 ], 57 }, 58 { 59 name: 'controlsColor', 60 type: 'enum', 61 values: [ 62 { 63 name: 'undefined', 64 value: undefined, 65 }, 66 { name: `"${Colors.headerTitle}"`, value: Colors.headerTitle }, 67 { 68 name: '"red"', 69 value: 'red', 70 }, 71 ], 72 }, 73 { 74 type: 'boolean', 75 name: 'showTitle', 76 platforms: ['android'], 77 initial: false, 78 }, 79 { 80 type: 'boolean', 81 name: 'showInRecents', 82 platforms: ['android'], 83 initial: false, 84 }, 85 { 86 type: 'boolean', 87 name: 'enableBarCollapsing', 88 initial: false, 89 }, 90 { 91 type: 'boolean', 92 name: 'readerMode', 93 platforms: ['ios'], 94 initial: false, 95 }, 96 { 97 type: 'boolean', 98 name: 'enableDefaultShareMenuItem', 99 platforms: ['android'], 100 initial: false, 101 }, 102 { 103 name: 'presentationStyle', 104 type: 'enum', 105 platforms: ['ios'], 106 values: [ 107 { 108 name: 'WebBrowserPresentationStyle.OVER_FULL_SCREEN', 109 value: WebBrowser.WebBrowserPresentationStyle.OVER_FULL_SCREEN, 110 }, 111 { 112 name: 'WebBrowserPresentationStyle.FULL_SCREEN', 113 value: WebBrowser.WebBrowserPresentationStyle.FULL_SCREEN, 114 }, 115 { 116 name: 'WebBrowserPresentationStyle.PAGE_SHEET', 117 value: WebBrowser.WebBrowserPresentationStyle.PAGE_SHEET, 118 }, 119 { 120 name: 'WebBrowserPresentationStyle.FORM_SHEET', 121 value: WebBrowser.WebBrowserPresentationStyle.FORM_SHEET, 122 }, 123 { 124 name: 'WebBrowserPresentationStyle.CURRENT_CONTEXT', 125 value: WebBrowser.WebBrowserPresentationStyle.CURRENT_CONTEXT, 126 }, 127 { 128 name: 'WebBrowserPresentationStyle.OVER_CURRENT_CONTEXT', 129 value: WebBrowser.WebBrowserPresentationStyle.OVER_CURRENT_CONTEXT, 130 }, 131 { 132 name: 'WebBrowserPresentationStyle.POPOVER', 133 value: WebBrowser.WebBrowserPresentationStyle.POPOVER, 134 }, 135 { 136 name: 'WebBrowserPresentationStyle.AUTOMATIC', 137 value: WebBrowser.WebBrowserPresentationStyle.AUTOMATIC, 138 }, 139 ], 140 }, 141 ], 142 }, 143 ], 144 actions: [ 145 { name: 'Open', action: WebBrowser.openBrowserAsync }, 146 { 147 name: 'Open and dismiss', 148 action: (url: string, openOptions: WebBrowser.WebBrowserOpenOptions) => { 149 const openBrowserPromise = WebBrowser.openBrowserAsync(url, openOptions); 150 WebBrowser.dismissBrowser(); 151 return openBrowserPromise; 152 }, 153 }, 154 { 155 name: 'Open twice', 156 action: (url: string, openOptions: WebBrowser.WebBrowserOpenOptions) => { 157 WebBrowser.openBrowserAsync(url, openOptions); 158 return WebBrowser.openBrowserAsync(url, openOptions); 159 }, 160 }, 161 { name: 'Dismiss (no-op)', action: async () => WebBrowser.dismissBrowser() }, 162 ], 163}; 164 165export default function OpenBrowserAsyncDemo() { 166 return <FunctionDemo namespace="WebBrowser" {...FUNCTIONS_DESCRIPTION} />; 167} 168