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

Text and Input

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

Text display and input components with advanced typography, accessibility, and internationalization support. These components provide comprehensive text handling capabilities for React Native Web applications.

Text

A component for displaying text with advanced typography features, accessibility support, and user interaction capabilities.

const Text: React.ComponentType<TextProps>;

Props:

style - Text styling including typography, colors, and layout properties
numberOfLines - Maximum number of lines to display (1 = single line with ellipsis, >1 = multi-line with ellipsis)
onPress - Callback when text is pressed (makes text interactive)
selectable - Whether text can be selected by user (true/false)
accessible - Whether component is accessible to screen readers
accessibilityLabel - Screen reader label
accessibilityRole - Semantic role: 'button' | 'header' | 'heading' | 'label' | 'link' | 'listitem' | 'none' | 'text'
href - Makes text render as a link (anchor element)
hrefAttrs - Link attributes: {download?: boolean, rel?: string, target?: string}
dir - Text direction: 'auto' | 'ltr' | 'rtl'
lang - Language code for proper text rendering and accessibility
children - Text content (string or nested Text components)

Styling Props:

color - Text color
fontFamily - Font family name
fontSize - Font size (number or string with units)
fontWeight - Font weight: 'normal' | 'bold' | '100' to '900'
fontStyle - Font style: 'normal' | 'italic'
letterSpacing - Letter spacing
lineHeight - Line height
textAlign - Text alignment: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end'
textDecorationLine - Text decoration: 'none' | 'underline' | 'line-through' | 'underline line-through'
textTransform - Text transform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
userSelect - Text selection: 'none' | 'text' | 'auto'

Usage:

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

// Basic text
<Text style={{ fontSize: 16, color: '#333' }}>
  Hello World
</Text>

// Interactive text
<Text 
  onPress={() => alert('Pressed!')}
  style={{ color: 'blue', textDecorationLine: 'underline' }}
>
  Click me
</Text>

// Single line with ellipsis
<Text numberOfLines={1} style={{ width: 200 }}>
  This is a very long text that will be truncated with ellipsis
</Text>

// Multi-line with ellipsis
<Text numberOfLines={3} style={{ width: 200 }}>
  This is a longer text that will be displayed on multiple lines 
  but truncated after 3 lines with ellipsis
</Text>

// Link text
<Text 
  href="https://example.com"
  hrefAttrs={{ target: '_blank', rel: 'noopener' }}
  style={{ color: 'blue' }}
>
  External Link
</Text>

// Nested text with different styles
<Text style={{ fontSize: 16 }}>
  Welcome to{' '}
  <Text style={{ fontWeight: 'bold', color: 'blue' }}>
    React Native Web
  </Text>
</Text>

// Accessible text
<Text 
  accessibilityRole="heading"
  accessibilityLabel="Page title"
  style={{ fontSize: 24, fontWeight: 'bold' }}
>
  Dashboard
</Text>

TextInput

A text input component for collecting user input with comprehensive keyboard handling, validation, and accessibility features.

const TextInput: React.ComponentType<TextInputProps>;

Props:

value - Current text value (controlled component)
defaultValue - Initial text value (uncontrolled component)
placeholder - Placeholder text when input is empty
placeholderTextColor - Color of placeholder text
multiline - Enable multi-line input (renders as textarea)
numberOfLines - Number of lines for multiline input (deprecated, use rows)
rows - Number of rows for textarea
maxLength - Maximum number of characters allowed
editable - Whether input is editable (deprecated, use readOnly)
readOnly - Whether input is read-only
secureTextEntry - Hide text for password input
autoFocus - Automatically focus input when mounted
clearTextOnFocus - Clear text when input receives focus
selectTextOnFocus - Select all text when input receives focus
blurOnSubmit - Blur input when submit is pressed (default: true for single-line, false for multi-line)

Keyboard and Input Props:

keyboardType - Virtual keyboard type (deprecated, use inputMode)
inputMode - Input mode: 'text' | 'numeric' | 'decimal' | 'email' | 'tel' | 'url' | 'search' | 'none'
enterKeyHint - Enter key appearance: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'
returnKeyType - Return key type (deprecated, use enterKeyHint)
autoCapitalize - Auto-capitalization: 'none' | 'sentences' | 'words' | 'characters'
autoComplete - Browser autocomplete behavior
autoCorrect - Enable auto-correction
spellCheck - Enable spell checking
caretHidden - Hide text cursor

Selection and Events:

selection - Text selection: {start: number, end?: number}
selectionColor - Color of text selection
onChangeText - Text change callback: (text: string) => void
onChange - Raw change event callback
onFocus - Focus event callback
onBlur - Blur event callback
onSubmitEditing - Submit/enter key callback
onKeyPress - Key press callback
onSelectionChange - Selection change callback
onContentSizeChange - Content size change callback (multiline only)

Methods:

focus() - Focus the input
blur() - Blur the input
clear() - Clear the input text
isFocused() - Check if input is focused

Usage:

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

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const passwordRef = useRef();

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="Enter email"
        inputMode="email"
        autoCapitalize="none"
        autoComplete="email"
        enterKeyHint="next"
        onSubmitEditing={() => passwordRef.current?.focus()}
        style={{
          borderWidth: 1,
          borderColor: '#ccc',
          padding: 10,
          borderRadius: 5,
          marginBottom: 10
        }}
      />
      
      <TextInput
        ref={passwordRef}
        value={password}
        onChangeText={setPassword}
        placeholder="Enter password"
        secureTextEntry={true}
        autoComplete="current-password"
        enterKeyHint="done"
        onSubmitEditing={() => console.log('Login')}
        style={{
          borderWidth: 1,
          borderColor: '#ccc',
          padding: 10,
          borderRadius: 5
        }}
      />
    </View>
  );
}

// Multi-line input
<TextInput
  multiline={true}
  rows={4}
  placeholder="Enter your message..."
  onChangeText={(text) => console.log(text)}
  style={{
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    textAlignVertical: 'top'
  }}
/>

// Controlled selection
function TextEditor() {
  const [text, setText] = useState('Hello World');
  const [selection, setSelection] = useState({start: 0, end: 5});
  
  return (
    <TextInput
      value={text}
      onChangeText={setText}
      selection={selection}
      onSelectionChange={(event) => {
        setSelection(event.nativeEvent.selection);
      }}
      style={{ borderWidth: 1, padding: 10 }}
    />
  );
}

// Number input
<TextInput
  inputMode="numeric"
  placeholder="Enter amount"
  keyboardType="number-pad" // fallback for older browsers
  onChangeText={(text) => {
    // Only allow numbers
    const numericText = text.replace(/[^0-9]/g, '');
    setAmount(numericText);
  }}
/>

// Search input
<TextInput
  inputMode="search"
  placeholder="Search..."
  enterKeyHint="search"
  onSubmitEditing={(event) => {
    performSearch(event.nativeEvent.text);
  }}
  style={{ 
    borderRadius: 20,
    backgroundColor: '#f0f0f0',
    padding: 10
  }}
/>

Types

interface TextStyle extends ViewStyle {
  color?: ColorValue;
  fontFamily?: string;
  fontSize?: number | string;
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  fontStyle?: 'normal' | 'italic';
  letterSpacing?: number | string;
  lineHeight?: number | string;
  textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
  userSelect?: 'none' | 'text' | 'auto';
  // ... other text style properties
}

interface TextProps extends ViewProps {
  style?: TextStyle;
  numberOfLines?: number;
  onPress?: (event: PressEvent) => void;
  selectable?: boolean;
  accessibilityRole?: 'button' | 'header' | 'heading' | 'label' | 'link' | 'listitem' | 'none' | 'text';
  dir?: 'auto' | 'ltr' | 'rtl';
  children?: React.ReactNode;
}

interface TextInputStyle extends TextStyle {
  caretColor?: ColorValue;
  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
}

interface TextInputProps extends ViewProps {
  style?: TextInputStyle;
  value?: string;
  defaultValue?: string;
  placeholder?: string;
  placeholderTextColor?: ColorValue;
  multiline?: boolean;
  rows?: number;
  maxLength?: number;
  readOnly?: boolean;
  secureTextEntry?: boolean;
  autoFocus?: boolean;
  clearTextOnFocus?: boolean;
  selectTextOnFocus?: boolean;
  blurOnSubmit?: boolean;
  
  // Input mode and keyboard
  inputMode?: 'text' | 'numeric' | 'decimal' | 'email' | 'tel' | 'url' | 'search' | 'none';
  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  autoComplete?: string;
  autoCorrect?: boolean;
  spellCheck?: boolean;
  caretHidden?: boolean;
  
  // Selection
  selection?: {start: number; end?: number};
  selectionColor?: ColorValue;
  
  // Events
  onChangeText?: (text: string) => void;
  onChange?: (event: ChangeEvent) => void;
  onFocus?: (event: FocusEvent) => void;
  onBlur?: (event: BlurEvent) => void;
  onSubmitEditing?: (event: SubmitEvent) => void;
  onKeyPress?: (event: KeyPressEvent) => void;
  onSelectionChange?: (event: SelectionChangeEvent) => void;
  onContentSizeChange?: (event: ContentSizeChangeEvent) => void;
  
  // Deprecated
  editable?: boolean; // use readOnly instead
  keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad' | 'number-pad' | 'search' | 'url' | 'web-search'; // use inputMode instead
  numberOfLines?: number; // use rows instead
  returnKeyType?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; // use enterKeyHint instead
}

Install with Tessl CLI