Core browser functionality for opening web pages and managing browser sessions in React Native and Expo applications.
Opens a URL in the system browser with platform-specific implementations. On iOS, uses SFSafariViewController which provides a modal Safari view that doesn't share cookies with the system Safari. On Android, uses Chrome Custom Tabs for a native-like browsing experience.
/**
* Opens the url with Safari in a modal on iOS using SFSafariViewController,
* and Chrome in a new custom tab on Android.
* @param url - The url to open in the web browser
* @param browserParams - A dictionary of key-value pairs for browser configuration
* @returns Promise that resolves differently based on platform:
* - Android: resolves with { type: 'opened' } if browser opens successfully
* - iOS: resolves with { type: 'cancel' } if user closes browser, { type: 'dismiss' } if dismissed programmatically
*/
function openBrowserAsync(
url: string,
browserParams?: WebBrowserOpenOptions
): Promise<WebBrowserResult>;Usage Examples:
import * as WebBrowser from 'expo-web-browser';
// Simple usage
const result = await WebBrowser.openBrowserAsync('https://example.com');
console.log(result); // { type: 'opened' } on Android, { type: 'cancel' } on iOS when closed
// With custom options
const result = await WebBrowser.openBrowserAsync('https://example.com', {
toolbarColor: '#6200EE',
controlsColor: '#FFFFFF',
showTitle: true,
presentationStyle: WebBrowser.WebBrowserPresentationStyle.PAGE_SHEET,
});
// Web-specific options
await WebBrowser.openBrowserAsync('https://example.com', {
windowName: 'MyWebPage',
windowFeatures: { width: 800, height: 600 }
});Dismisses the currently presented web browser. Only available on iOS platform.
/**
* Dismisses the presented web browser
* @returns Promise that resolves with { type: 'dismiss' } on successful dismissal
* @throws Error if dismiss functionality is not available
* @platform ios
*/
function dismissBrowser(): Promise<{ type: WebBrowserResultType.DISMISS }>;Usage Example:
import * as WebBrowser from 'expo-web-browser';
// Open browser
const browserPromise = WebBrowser.openBrowserAsync('https://example.com');
// Dismiss after 5 seconds
setTimeout(async () => {
try {
const dismissResult = await WebBrowser.dismissBrowser();
console.log('Browser dismissed:', dismissResult);
} catch (error) {
console.log('Dismiss not available on this platform');
}
}, 5000);
const result = await browserPromise;
console.log('Browser result:', result); // { type: 'dismiss' }interface WebBrowserOpenOptions {
/** Color of the toolbar. Supports React Native color formats */
toolbarColor?: string;
/** Package name of browser for Custom Tabs (Android only) */
browserPackage?: string;
/** Whether toolbar should hide when user scrolls (Android) */
enableBarCollapsing?: boolean;
/** Color of secondary toolbar (Android only) */
secondaryToolbarColor?: string;
/** Whether to show website title on toolbar (Android only) */
showTitle?: boolean;
/** Whether to add default share menu item (Android only) */
enableDefaultShareMenuItem?: boolean;
/** Whether to show in Android recents/multitasking view (Android only) */
showInRecents?: boolean;
/** Whether browser opens in new task or same task (Android only) */
createTask?: boolean;
/** Tint color for controls in SFSafariViewController (iOS only) */
controlsColor?: string;
/** Style of dismiss button: 'done', 'close', or 'cancel' (iOS only) */
dismissButtonStyle?: 'done' | 'close' | 'cancel';
/** Whether Safari should enter Reader mode if available (iOS only) */
readerMode?: boolean;
/** Presentation style of browser window (iOS only) */
presentationStyle?: WebBrowserPresentationStyle;
/** Name to assign to popup window (web only) */
windowName?: string;
/** Features to use with window.open() (web only) */
windowFeatures?: string | WebBrowserWindowFeatures;
}
type WebBrowserWindowFeatures = Record<string, number | boolean | string>;