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.

—

Pending

Overview

Eval results

Files

Layout Components

Name: tessl/npm-react-native-web
Author: tessl

Fundamental layout and container components including View, ScrollView, SafeAreaView, Modal, and KeyboardAvoidingView. These provide the structural foundation for React Native Web applications with comprehensive styling, accessibility, and platform integration features.

View

The fundamental container component for building UI layouts. Renders as a div or span element with full React Native styling support, gesture handling, and accessibility features.

const View: React.ComponentType<ViewProps>;

Props:

style - Style object with full React Native styling support including flexbox, positioning, and transforms
pointerEvents - Controls touch event handling: 'auto' | 'none' | 'box-none' | 'box-only'
onLayout - Callback when component layout changes, receives layout measurements
accessible - Whether component is accessible to assistive technologies
accessibilityRole - Semantic role for screen readers (button, text, etc.)
accessibilityLabel - Accessibility label for screen readers
href - Makes View render as an anchor link for navigation
hrefAttrs - Link attributes: {download?: boolean, rel?: string, target?: string}
dir - Text direction: 'ltr' | 'rtl' | 'auto'
lang - Language code for internationalization
children - Child elements (cannot contain bare text strings)

Responder Events:

onStartShouldSetResponder - Should component become responder on touch start
onMoveShouldSetResponder - Should component become responder on touch move
onResponderGrant - Component became responder
onResponderMove - Touch move while responder
onResponderRelease - Touch ended while responder
onResponderTerminate - Responder was terminated

Platform Methods:

blur() - Remove focus from component
focus() - Focus component
measure(callback) - Get component dimensions and position
measureInWindow(callback) - Get component position relative to window
measureLayout(relativeNode, onSuccess, onFail) - Get position relative to another component

Usage:

import { View } from "react-native-web";

<View 
  style={{ flex: 1, backgroundColor: '#f0f0f0' }}
  onLayout={(event) => console.log(event.nativeEvent.layout)}
  accessibilityRole="main"
>
  <Text>Content goes here</Text>
</View>

// As a link
<View 
  href="/about"
  hrefAttrs={{ target: '_blank' }}
  style={{ padding: 20 }}
>
  <Text>Navigate to About</Text>
</View>

ScrollView

A scrollable container component with support for horizontal/vertical scrolling, pull-to-refresh, sticky headers, and comprehensive scroll event handling.

const ScrollView: React.ComponentType<ScrollViewProps>;

Props:

horizontal - Enable horizontal scrolling instead of vertical
showsHorizontalScrollIndicator - Show/hide horizontal scroll bar
showsVerticalScrollIndicator - Show/hide vertical scroll bar
scrollEnabled - Enable/disable scrolling
contentContainerStyle - Style applied to scroll content container
refreshControl - Pull-to-refresh component
stickyHeaderIndices - Array of child indices to stick to top when scrolling
pagingEnabled - Snap to page boundaries when scrolling
keyboardDismissMode - When to dismiss keyboard: 'none' | 'interactive' | 'on-drag'
centerContent - Center content when smaller than scroll view
scrollEventThrottle - Throttle scroll events (milliseconds)
onScroll - Scroll event handler
onScrollBeginDrag - User starts dragging
onScrollEndDrag - User stops dragging
onMomentumScrollBegin - Momentum scrolling starts
onMomentumScrollEnd - Momentum scrolling ends
onContentSizeChange - Content size changes: (width, height) => void

Methods:

scrollTo({x?, y?, animated?}) - Scroll to specific coordinates
scrollToEnd({animated?}) - Scroll to bottom (or right if horizontal)
flashScrollIndicators() - Briefly show scroll indicators

Usage:

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

function App() {
  const scrollRef = useRef();
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    // Refresh data
    setTimeout(() => setRefreshing(false), 2000);
  };

  return (
    <ScrollView
      ref={scrollRef}
      horizontal={false}
      showsVerticalScrollIndicator={true}
      contentContainerStyle={{ padding: 20 }}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
      stickyHeaderIndices={[0]}
      onScroll={(event) => {
        console.log(event.nativeEvent.contentOffset);
      }}
      scrollEventThrottle={16}
    >
      <Text style={{ position: 'sticky' }}>Header</Text>
      {/* Content */}
    </ScrollView>
  );
}

SafeAreaView

A container that automatically applies safe area insets to avoid content being obscured by system UI elements like notches, status bars, or home indicators.

const SafeAreaView: React.ComponentType<ViewProps>;

Props:

Inherits all ViewProps
Automatically applies paddingTop, paddingRight, paddingBottom, paddingLeft using CSS env() or constant() safe area functions

Usage:

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

<SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
  <View style={{ flex: 1, padding: 20 }}>
    <Text>Content will respect safe areas</Text>
  </View>
</SafeAreaView>

The component automatically detects browser support for constant() vs env() CSS functions and applies appropriate safe area insets.

Modal

A modal dialog component that renders content in a portal above other content with focus management, animation support, and accessibility features.

const Modal: React.ComponentType<ModalProps>;

Props:

visible - Whether modal is visible (default: true)
animationType - Animation type: 'none' | 'slide' | 'fade'
transparent - Whether modal background is transparent
onRequestClose - Callback when modal should be closed (required on Android)
onShow - Callback when modal becomes visible
onDismiss - Callback when modal is dismissed
presentationStyle - Presentation style: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'
hardwareAccelerated - Use hardware acceleration (Android only)
statusBarTranslucent - Status bar translucency (Android only)
supportedOrientations - Supported orientations array
onOrientationChange - Orientation change callback
children - Modal content

Usage:

import { Modal, View, Text, Button } from "react-native-web";

function App() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
      
      <Modal
        visible={modalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setModalVisible(false)}
        onShow={() => console.log('Modal shown')}
        onDismiss={() => console.log('Modal dismissed')}
      >
        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}>
          <View style={{ 
            flex: 1, 
            justifyContent: 'center', 
            alignItems: 'center',
            backgroundColor: 'white',
            margin: 20,
            borderRadius: 10 
          }}>
            <Text>Modal Content</Text>
            <Button title="Close" onPress={() => setModalVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

KeyboardAvoidingView

A container that automatically adjusts its position when the virtual keyboard appears, helping keep important content visible during text input.

const KeyboardAvoidingView: React.ComponentType<KeyboardAvoidingViewProps>;

Props:

behavior - Adjustment behavior: 'height' | 'padding' | 'position'
keyboardVerticalOffset - Distance between top of keyboard and component (number)
contentContainerStyle - Style for the content container
Inherits all ViewProps

Usage:

import { KeyboardAvoidingView, TextInput, View } from "react-native-web";

<KeyboardAvoidingView 
  behavior="padding"
  keyboardVerticalOffset={64}
  style={{ flex: 1 }}
>
  <View style={{ flex: 1, justifyContent: 'flex-end', padding: 20 }}>
    <TextInput 
      placeholder="Type here..."
      style={{ borderWidth: 1, padding: 10, borderRadius: 5 }}
    />
  </View>
</KeyboardAvoidingView>

Note: On web, keyboard avoidance behavior is limited compared to native platforms, as the virtual keyboard API is not fully standardized across browsers.

Types

interface ViewProps {
  style?: ViewStyle;
  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
  onLayout?: (event: LayoutEvent) => void;
  accessible?: boolean;
  accessibilityRole?: string;
  accessibilityLabel?: string;
  children?: React.ReactNode;
  href?: string;
  hrefAttrs?: {
    download?: boolean;
    rel?: string;
    target?: string;
  };
  dir?: 'ltr' | 'rtl';
  lang?: string;
  // Responder events
  onStartShouldSetResponder?: (event: ResponderEvent) => boolean;
  onMoveShouldSetResponder?: (event: ResponderEvent) => boolean;
  onResponderGrant?: (event: ResponderEvent) => void;
  onResponderMove?: (event: ResponderEvent) => void;
  onResponderRelease?: (event: ResponderEvent) => void;
  onResponderTerminate?: (event: ResponderEvent) => void;
  onResponderTerminationRequest?: (event: ResponderEvent) => boolean;
}

interface ScrollViewProps extends ViewProps {
  horizontal?: boolean;
  showsHorizontalScrollIndicator?: boolean;
  showsVerticalScrollIndicator?: boolean;
  scrollEnabled?: boolean;
  contentContainerStyle?: ViewStyle;
  refreshControl?: React.ReactElement;
  stickyHeaderIndices?: number[];
  pagingEnabled?: boolean;
  keyboardDismissMode?: 'none' | 'interactive' | 'on-drag';
  centerContent?: boolean;
  scrollEventThrottle?: number;
  onScroll?: (event: ScrollEvent) => void;
  onScrollBeginDrag?: (event: ScrollEvent) => void;
  onScrollEndDrag?: (event: ScrollEvent) => void;
  onMomentumScrollBegin?: (event: ScrollEvent) => void;
  onMomentumScrollEnd?: (event: ScrollEvent) => void;
  onContentSizeChange?: (width: number, height: number) => void;
}

interface ModalProps extends ViewProps {
  visible?: boolean;
  animationType?: 'none' | 'slide' | 'fade';
  transparent?: boolean;
  onRequestClose?: () => void;
  onShow?: () => void;
  onDismiss?: () => void;
  presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
  hardwareAccelerated?: boolean;
  statusBarTranslucent?: boolean;
  supportedOrientations?: Array<'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right'>;
  onOrientationChange?: (event: {orientation: 'portrait' | 'landscape'}) => void;
}

interface KeyboardAvoidingViewProps extends ViewProps {
  behavior?: 'height' | 'padding' | 'position';
  keyboardVerticalOffset?: number;
  contentContainerStyle?: ViewStyle;
}

Install with Tessl CLI