Why React Native Alert.alert() Works Only on iOS and Android (Not the Web)

TLDR: Alert.alert() depends on platform-specific native modules—RCTAlertManager on iOS and AlertModule on Android—that are compiled into native binaries and unavailable in web environments, causing the API to fail silently or log warnings when used with React Native Web.

The Alert API is a fundamental part of React Native's cross-platform JavaScript interface, yet calling Alert.alert() in a browser environment produces no visible dialog. This limitation stems from the architecture of the facebook/react-native repository, which delegates alert rendering to native platform code rather than implementing it in portable JavaScript.

How Alert.alert() Bridges to Native Code

The React Native Alert module acts as a thin JavaScript wrapper that serializes alert parameters across the React Native bridge to platform-specific native modules.

The JavaScript Façade (Libraries/Alert/Alert.js)

According to the source code, the entry point at Libraries/Alert/Alert.js does not render UI itself. Instead, it forwards method calls to native modules via NativeModules.AlertManager on iOS or UIManager on Android. This design keeps the JavaScript bundle lightweight while relying on the host operating system's native alert primitives.

iOS Implementation via RCTAlertManager.m

On iOS, the native bridge receives the alert request and invokes RCTAlertManager, implemented in React/Modules/RCTAlertManager.m. This Objective-C module constructs a native UIAlertController, configures its buttons and callbacks, and presents it through the application's view controller hierarchy. Because this implementation relies on Apple's UIKit framework, it cannot execute outside the iOS runtime.

Android Implementation via AlertModule.java

On Android, the corresponding logic resides in ReactAndroid/src/main/java/com/facebook/react/modules/alert/AlertModule.java. This Java class builds an android.app.AlertDialog using the native Android SDK, attaches button listeners that communicate back across the bridge, and displays the dialog within the current activity. Like its iOS counterpart, this code requires the Android runtime and access to the Android framework classes.

Why Web Environments Cannot Render Native Alerts

When running a React Native application on the web through React Native Web, the JavaScript bundle executes in a browser where native iOS and Android modules do not exist. The web-compatible stub provided by react-native-web (found in src/modules/Alert.js) exports a no-op function that logs a console warning stating the API is unsupported. Unlike mobile platforms, the web environment lacks compiled native binaries to instantiate UIAlertController or AlertDialog instances.

Consequently, calling Alert.alert() on the web resolves to this stub, which returns immediately without displaying a modal or dialog box. The web platform provides its own window.alert primitive, but React Native's Alert API is not automatically mapped to it.

Practical Workarounds for Web Compatibility

To display alerts consistently across platforms, you can implement conditional logic that detects the web environment and falls back to browser-native alerts or custom UI components.

Conditional Fallback Using Platform.OS

The following pattern checks Platform.OS to determine whether to use React Native's Alert or the browser's window.alert:

import {Platform, Alert} from 'react-native';

if (Platform.OS === 'web') {
  // Use browser native alert for web
  window.alert('Delete item\n\nAre you sure you want to delete this?');
} else {
  // Use React Native Alert for iOS and Android
  Alert.alert(
    'Delete item',
    'Are you sure you want to delete this?',
    [
      {text: 'Cancel', style: 'cancel'},
      {text: 'Delete', onPress: () => console.log('Deleted')},
    ],
    {cancelable: true},
  );
}

Polyfilling Alert.alert() for Web

Alternatively, you can polyfill the Alert module at runtime to redirect calls to window.alert:

import {Alert, Platform} from 'react-native';

if (Platform.OS === 'web' && typeof Alert.alert !== 'function') {
  Alert.alert = (title, message) => {
    window.alert(`${title}\n\n${message}`);
  };
}

// Now Alert.alert() works uniformly across platforms
Alert.alert('Success', 'Operation completed');

Standard Mobile Usage

For reference, the standard implementation that works on iOS and Android looks like this:

import {Alert} from 'react-native';

Alert.alert(
  'Delete item',
  'Are you sure you want to delete this?',
  [
    {text: 'Cancel', style: 'cancel'},
    {text: 'Delete', onPress: () => console.log('Deleted')},
  ],
  {cancelable: true},
);

Summary

• Native Dependency: Alert.alert() requires platform-specific native modules (RCTAlertManager.m on iOS and AlertModule.java on Android) that are unavailable in browser environments.
• Web Limitation: React Native Web provides only a stub implementation that warns when called, leaving window.alert as the only native option on the web.
• Implementation Path: The JavaScript façade at Libraries/Alert/Alert.js forwards calls across the React Native bridge to these native modules, which construct UIAlertController and android.app.AlertDialog instances.
• Cross-Platform Solution: Use Platform.OS checks or polyfills to route alert calls to window.alert on web while maintaining the native Alert API for iOS and Android.

Frequently Asked Questions

Why does Alert.alert() log a warning on the web instead of showing a dialog?

React Native Web's Alert.js stub intentionally implements the function as a no-op that logs a console warning. Because the web environment cannot access compiled iOS or Android native modules, the library authors chose to warn developers rather than throw a runtime error, allowing the app to continue executing without crashing.

How do I conditionally use Alert in React Native for web and mobile?

Import Platform from react-native and check Platform.OS === 'web' before calling Alert.alert(). On web, invoke window.alert() or render a custom modal component, while on iOS and Android, use the standard Alert API. This pattern ensures compatibility without breaking the native mobile experience.

Is there a way to polyfill Alert.alert() for React Native Web?

Yes, you can overwrite Alert.alert at runtime when detecting the web platform. Assign a function that wraps window.alert or opens a custom dialog component, mapping the React Native alert signature (title, message, buttons, options) to web equivalents. This polyfill must execute before any components call Alert.alert().

What native classes handle Alert on iOS and Android?

On iOS, RCTAlertManager.m instantiates and presents a UIAlertController from the UIKit framework. On Android, AlertModule.java creates an android.app.AlertDialog using the standard Android SDK. Both require their respective native runtimes and cannot operate within a browser's JavaScript engine.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}