tessl/npm-expo-web-browser

Provides access to the system's web browser and supports handling redirects for React Native and Expo applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Browser Operations

Name: tessl/npm-expo-web-browser
Author: tessl

Core browser functionality for opening web pages and managing browser sessions in React Native and Expo applications.

Capabilities

Open Browser

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 }
});

Dismiss Browser

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' }

Configuration Types

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>;