or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility.mdanimation.mdcore-utilities.mdform-controls.mdhooks.mdindex.mdinteractive-components.mdlayout-components.mdlist-components.mdmedia-components.mdplatform-apis.mdstylesheet.mdsystem-integration.mdtext-input.md
tile.json

tessl/npm-react-native-web

React Native for Web is a comprehensive compatibility library that enables React Native components and APIs to run seamlessly on web browsers using React DOM.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-web@0.21.x

To install, run

npx @tessl/cli install tessl/npm-react-native-web@0.21.0

index.mddocs/

React Native Web

React Native for Web is a comprehensive compatibility library that enables React Native components and APIs to run seamlessly on web browsers using React DOM. It provides a complete mapping of React Native's component system, styling capabilities, and platform APIs to web-equivalent implementations, allowing developers to write cross-platform applications using a single React Native codebase that works across mobile and web platforms.

Package Information

  • Package Name: react-native-web
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install react-native-web

Core Imports

import { View, Text, StyleSheet, AppRegistry } from "react-native-web";

For specific components:

import { Pressable, Image, ScrollView } from "react-native-web";

CommonJS:

const { View, Text, StyleSheet } = require("react-native-web");

Basic Usage

import React from "react";
import { View, Text, StyleSheet, AppRegistry } from "react-native-web";

const App = () => (
  <View style={styles.container}>
    <Text style={styles.title}>Hello React Native Web!</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#333",
  },
});

AppRegistry.registerComponent("App", () => App);
AppRegistry.runApplication("App", {
  rootTag: document.getElementById("root"),
});

Architecture

React Native Web is built around several core concepts:

  • Component System: Complete React Native component library optimized for web rendering
  • StyleSheet: Atomic CSS compilation system with automatic optimization and RTL support
  • Platform APIs: Web implementations of React Native's platform-specific APIs
  • Responder System: Touch and gesture handling system that works across devices
  • Platform Methods: DOM measurement and focus utilities available on all components
  • Accessibility: Full ARIA support and screen reader compatibility
  • Performance: Virtualization, atomic CSS, and efficient rendering optimizations

Capabilities

Core Utilities

Essential utilities for rendering, element creation, and DOM integration. These provide the foundation for React Native Web's compatibility layer.

function render(element: React.Element, container: DOMContainer, callback?: Function): void;
function findNodeHandle(componentOrHandle: any): number | null;
function processColor(color: ColorValue): string | null;
function unstable_createElement(type: string, props?: Object, ...children: any[]): React.Element;
function unmountComponentAtNode(container: DOMContainer): boolean;

Core Utilities

Layout Components

Fundamental layout and container components including View, ScrollView, SafeAreaView, and Modal. These provide the structural foundation for React Native Web applications.

const View: React.ComponentType<ViewProps>;
const ScrollView: React.ComponentType<ScrollViewProps>;
const SafeAreaView: React.ComponentType<SafeAreaViewProps>;
const Modal: React.ComponentType<ModalProps>;
const KeyboardAvoidingView: React.ComponentType<KeyboardAvoidingViewProps>;

Layout Components

Text and Input

Text display and input components with advanced typography, accessibility, and internationalization support.

const Text: React.ComponentType<TextProps>;
const TextInput: React.ComponentType<TextInputProps>;

Text and Input

Interactive Components

User interaction components including buttons, touchables, and pressable elements with comprehensive gesture and accessibility support.

const Button: React.ComponentType<ButtonProps>;
const Pressable: React.ComponentType<PressableProps>;
const TouchableOpacity: React.ComponentType<TouchableOpacityProps>;
const TouchableHighlight: React.ComponentType<TouchableHighlightProps>;
const TouchableWithoutFeedback: React.ComponentType<TouchableWithoutFeedbackProps>;

Interactive Components

Media and Graphics

Image display and media components with support for multiple source formats, caching, and accessibility.

const Image: React.ComponentType<ImageProps>;
const ImageBackground: React.ComponentType<ImageBackgroundProps>;

Media Components

Form Controls

Form input components including switches, checkboxes, pickers, and progress indicators.

const Switch: React.ComponentType<SwitchProps>;
const CheckBox: React.ComponentType<CheckBoxProps>;
const Picker: React.ComponentType<PickerProps>;
const ProgressBar: React.ComponentType<ProgressBarProps>;
const ActivityIndicator: React.ComponentType<ActivityIndicatorProps>;

Form Controls

List Components

High-performance list and virtualization components for handling large datasets efficiently.

const FlatList: React.ComponentType<FlatListProps>;
const SectionList: React.ComponentType<SectionListProps>;
const VirtualizedList: React.ComponentType<VirtualizedListProps>;
const RefreshControl: React.ComponentType<RefreshControlProps>;

List Components

Platform APIs

React Native's platform APIs adapted for web environments, including device information, status bar control, system services, and web integrations.

const Platform: {
  OS: 'web';
  Version: string;
  isTesting: boolean;
  select: <T>(specifics: {web?: T, default?: T}) => T;
};

const StatusBar: React.ComponentType<StatusBarProps> & {
  setBackgroundColor: (color: string, animated?: boolean) => void;
  setBarStyle: (style: 'default' | 'light-content' | 'dark-content', animated?: boolean) => void;
  setHidden: (hidden: boolean, animation?: 'none' | 'fade' | 'slide') => void;
};

const Dimensions: {
  get: (dim: 'window' | 'screen') => {width: number, height: number, scale: number, fontScale: number};
  addEventListener: (type: 'change', listener: Function) => void;
  removeEventListener: (type: 'change', listener: Function) => void;
};

Platform APIs

StyleSheet and Styling

Advanced styling system with atomic CSS compilation, RTL support, and performance optimizations.

const StyleSheet: {
  create: <T>(styles: T) => T;
  compose: (style1: any, style2: any) => any;
  flatten: (style: any) => Object;
  absoluteFillObject: {position: 'absolute', left: 0, right: 0, top: 0, bottom: 0};
  hairlineWidth: number;
};

StyleSheet

Animation

Comprehensive animation system with timing functions, easing curves, animated values, and component integration.

const Animated: {
  View: React.ComponentType<AnimatedViewProps>;
  Text: React.ComponentType<AnimatedTextProps>;
  Image: React.ComponentType<AnimatedImageProps>;
  ScrollView: React.ComponentType<AnimatedScrollViewProps>;
  timing: (value: AnimatedValue, config: TimingAnimationConfig) => CompositeAnimation;
  spring: (value: AnimatedValue, config: SpringAnimationConfig) => CompositeAnimation;
  decay: (value: AnimatedValue, config: DecayAnimationConfig) => CompositeAnimation;
  Value: typeof AnimatedValue;
  ValueXY: typeof AnimatedValueXY;
};

const Easing: {
  linear: (t: number) => number;
  ease: (t: number) => number;
  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
  bounce: (t: number) => number;
  elastic: (bounciness?: number) => (t: number) => number;
  in: (easing: (t: number) => number) => (t: number) => number;
  out: (easing: (t: number) => number) => (t: number) => number;
  inOut: (easing: (t: number) => number) => (t: number) => number;
};

Animation

System Integration

APIs for integrating with browser and system features including application lifecycle, theme detection, clipboard, linking, alerts, and sharing.

const AppRegistry: {
  registerComponent: (appKey: string, componentProvider: () => React.ComponentType) => string;
  runApplication: (appKey: string, appParameters: AppParameters) => void;
  getAppKeys: () => string[];
};

const Appearance: {
  getColorScheme: () => 'light' | 'dark';
  addChangeListener: (listener: (preferences: AppearancePreferences) => void) => {remove: () => void};
};

const Alert: {
  alert: (title: string, message?: string, buttons?: AlertButton[], options?: AlertOptions) => void;
};

const Clipboard: {
  getString: () => Promise<string>;
  setString: (content: string) => void;
  hasString: () => Promise<boolean>;
};

const Linking: {
  openURL: (url: string) => Promise<void>;
  canOpenURL: (url: string) => Promise<boolean>;
  getInitialURL: () => Promise<string | null>;
};

System Integration

Accessibility

Comprehensive accessibility features and screen reader support for inclusive applications.

const AccessibilityInfo: {
  announceForAccessibility: (announcement: string) => void;
  isScreenReaderEnabled: () => Promise<boolean>;
  isBoldTextEnabled: () => Promise<boolean>;
  isGrayscaleEnabled: () => Promise<boolean>;
  isInvertColorsEnabled: () => Promise<boolean>;
  isReduceMotionEnabled: () => Promise<boolean>;
  isReduceTransparencyEnabled: () => Promise<boolean>;
  setAccessibilityFocus: (reactTag: number) => void;
};

Accessibility

Hooks

React hooks for common React Native Web functionality including dimensions, color scheme, and locale context.

function useWindowDimensions(): {width: number, height: number, scale: number, fontScale: number};
function useColorScheme(): 'light' | 'dark' | null;
function useLocaleContext(): {direction: 'ltr' | 'rtl', locale: string};

Hooks

Types

type ColorValue = string | null;
type DimensionValue = number | string | null;

interface EdgeInsetsValue {
  top: number;
  left: number;
  right: number;
  bottom: number;
}

interface LayoutValue {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface LayoutEvent {
  nativeEvent: {
    layout: LayoutValue;
    target: any;
  };
  timeStamp: number;
}

interface PointValue {
  x: number;
  y: number;
}

interface PlatformMethods {
  blur(): void;
  focus(): void;
  measure(callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void): void;
  measureInWindow(callback: (x: number, y: number, width: number, height: number) => void): void;
  measureLayout(
    relativeToNativeNode: any,
    onSuccess: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void,
    onFail: () => void
  ): void;
}