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

Form Controls

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

Form input components including switches, checkboxes, pickers, progress indicators, and activity indicators with comprehensive styling, accessibility, and user interaction support.

Switch

A toggle switch component that provides binary on/off functionality with smooth animations and customizable colors.

const Switch: React.ComponentType<SwitchProps>;

Props:

value - Whether the switch is on (default: false)
onValueChange - Callback when switch state changes: (value: boolean) => void
disabled - Whether switch is disabled
thumbColor - Color of the thumb when off
activeThumbColor - Color of the thumb when on
trackColor - Track color (string or object with true/false states)
activeTrackColor - Track color when on (deprecated, use trackColor)
accessibilityLabel - Screen reader label
style - Component styling

Track Color Options:

// Simple color
trackColor="#ccc"

// Different colors for on/off states
trackColor={{
  false: '#767577', // Color when switch is off
  true: '#81b0ff'   // Color when switch is on
}}

Usage:

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

function Settings() {
  const [isEnabled, setIsEnabled] = useState(false);
  const [notifications, setNotifications] = useState(true);

  return (
    <View style={{ padding: 20 }}>
      {/* Basic switch */}
      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
        <Text style={{ flex: 1 }}>Enable feature</Text>
        <Switch
          value={isEnabled}
          onValueChange={setIsEnabled}
        />
      </View>

      {/* Custom colors */}
      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
        <Text style={{ flex: 1 }}>Push notifications</Text>
        <Switch
          value={notifications}
          onValueChange={setNotifications}
          thumbColor={notifications ? '#4CAF50' : '#f4f3f4'}
          trackColor={{ false: '#767577', true: '#81b0ff' }}
        />
      </View>

      {/* Disabled switch */}
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Text style={{ flex: 1, color: '#999' }}>Premium feature</Text>
        <Switch
          value={false}
          disabled={true}
          thumbColor="#ccc"
          trackColor="#ddd"
        />
      </View>
    </View>
  );
}

// Custom sized switch
<Switch
  value={isOn}
  onValueChange={setIsOn}
  style={{ height: 30, width: 60 }}
  thumbColor="#fff"
  activeThumbColor="#007AFF"
  trackColor={{ false: '#ccc', true: '#007AFF' }}
/>

CheckBox

A checkbox component for multiple selection with customizable styling and accessibility support.

const CheckBox: React.ComponentType<CheckBoxProps>;

Props:

value - Whether checkbox is checked
onValueChange - Callback when checkbox state changes: (value: boolean) => void
onChange - Raw change event handler
disabled - Whether checkbox is disabled
readOnly - Whether checkbox is read-only
color - Checkbox color when checked
accessibilityLabel - Screen reader label
style - Component styling

Usage:

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

function TodoList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Learn React Native Web', completed: false },
    { id: 2, text: 'Build an app', completed: true },
    { id: 3, text: 'Deploy to production', completed: false }
  ]);

  const toggleTask = (id) => {
    setTasks(tasks.map(task => 
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  return (
    <View style={{ padding: 20 }}>
      {tasks.map(task => (
        <View key={task.id} style={{ 
          flexDirection: 'row', 
          alignItems: 'center', 
          marginBottom: 10 
        }}>
          <CheckBox
            value={task.completed}
            onValueChange={() => toggleTask(task.id)}
            color="#007AFF"
          />
          <Text style={{ 
            marginLeft: 10, 
            textDecorationLine: task.completed ? 'line-through' : 'none',
            color: task.completed ? '#999' : '#000'
          }}>
            {task.text}
          </Text>
        </View>
      ))}

      {/* Disabled checkbox */}
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 20 }}>
        <CheckBox
          value={true}
          disabled={true}
          color="#ccc"
        />
        <Text style={{ marginLeft: 10, color: '#999' }}>
          Read-only completed task
        </Text>
      </View>

      {/* Custom styled checkbox */}
      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 }}>
        <CheckBox
          value={false}
          onValueChange={() => {}}
          color="#4CAF50"
          style={{ 
            transform: 'scale(1.2)',
            margin: 2
          }}
        />
        <Text style={{ marginLeft: 15 }}>Large checkbox</Text>
      </View>
    </View>
  );
}

Picker

A dropdown picker component for selecting from a list of options, rendering as a native select element.

const Picker: React.ComponentType<PickerProps>;
const Picker.Item: React.ComponentType<PickerItemProps>;

Picker Props:

selectedValue - Currently selected value
onValueChange - Selection change callback: (value: string | number, index: number) => void
enabled - Whether picker is enabled (default: true)
children - Picker.Item components
style - Picker styling
testID - Test identifier

Picker.Item Props:

label - Display text for the option
value - Value when this item is selected
color - Text color for this item
testID - Test identifier

Usage:

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

function UserForm() {
  const [selectedCountry, setSelectedCountry] = useState('usa');
  const [selectedLanguage, setSelectedLanguage] = useState('en');

  const countries = [
    { label: 'United States', value: 'usa' },
    { label: 'Canada', value: 'canada' },
    { label: 'United Kingdom', value: 'uk' },
    { label: 'Australia', value: 'australia' }
  ];

  const languages = [
    { label: 'English', value: 'en' },
    { label: 'Spanish', value: 'es' },
    { label: 'French', value: 'fr' },
    { label: 'German', value: 'de' }
  ];

  return (
    <View style={{ padding: 20 }}>
      {/* Basic picker */}
      <View style={{ marginBottom: 20 }}>
        <Text style={{ marginBottom: 5, fontSize: 16 }}>Country</Text>
        <Picker
          selectedValue={selectedCountry}
          onValueChange={(value, index) => {
            setSelectedCountry(value);
            console.log(`Selected: ${countries[index].label}`);
          }}
          style={{
            height: 50,
            borderWidth: 1,
            borderColor: '#ccc',
            borderRadius: 5,
            paddingHorizontal: 10
          }}
        >
          {countries.map(country => (
            <Picker.Item
              key={country.value}
              label={country.label}
              value={country.value}
            />
          ))}
        </Picker>
      </View>

      {/* Picker with custom item colors */}
      <View style={{ marginBottom: 20 }}>
        <Text style={{ marginBottom: 5, fontSize: 16 }}>Language</Text>
        <Picker
          selectedValue={selectedLanguage}
          onValueChange={setSelectedLanguage}
          style={{
            height: 50,
            borderWidth: 1,
            borderColor: '#007AFF',
            borderRadius: 5,
            backgroundColor: '#f8f9fa'
          }}
        >
          <Picker.Item label="Select a language..." value="" color="#999" />
          {languages.map(lang => (
            <Picker.Item
              key={lang.value}
              label={lang.label}
              value={lang.value}
              color="#333"
            />
          ))}
        </Picker>
      </View>

      {/* Disabled picker */}
      <View>
        <Text style={{ marginBottom: 5, fontSize: 16, color: '#999' }}>
          Premium Options
        </Text>
        <Picker
          selectedValue="locked"
          enabled={false}
          style={{
            height: 50,
            borderWidth: 1,
            borderColor: '#ddd',
            borderRadius: 5,
            backgroundColor: '#f5f5f5'
          }}
        >
          <Picker.Item label="Upgrade to access" value="locked" color="#999" />
        </Picker>
      </View>
    </View>
  );
}

ActivityIndicator

A spinning activity indicator for showing loading states with customizable size and color.

const ActivityIndicator: React.ComponentType<ActivityIndicatorProps>;

Props:

animating - Whether indicator is animating (default: true)
color - Indicator color (default: '#1976D2')
size - Size preset ('small' | 'large') or custom number
hidesWhenStopped - Hide when not animating (default: true)
style - Component styling

Size Options:

'small' - 20x20 pixels
'large' - 36x36 pixels
number - Custom size in pixels

Usage:

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

function LoadingExample() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      setData('Data loaded successfully!');
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ padding: 20, alignItems: 'center' }}>
      {/* Basic loading indicator */}
      <ActivityIndicator animating={loading} size="large" />

      {/* Loading with text */}
      {loading && (
        <View style={{ alignItems: 'center', marginVertical: 20 }}>
          <ActivityIndicator size="small" color="#007AFF" />
          <Text style={{ marginTop: 10, color: '#666' }}>Loading...</Text>
        </View>
      )}

      {/* Custom sized indicator */}
      <ActivityIndicator
        animating={true}
        size={50}
        color="#4CAF50"
        style={{ margin: 20 }}
      />

      {/* Inline with content */}
      <View style={{ 
        flexDirection: 'row', 
        alignItems: 'center', 
        marginVertical: 20 
      }}>
        <Text>Processing</Text>
        <ActivityIndicator 
          size="small" 
          color="#FF9800" 
          style={{ marginLeft: 10 }}
        />
      </View>

      <Button title="Fetch Data" onPress={fetchData} />
      
      {data && (
        <Text style={{ marginTop: 20, fontSize: 16, color: '#4CAF50' }}>
          {data}
        </Text>
      )}
    </View>
  );
}

// Loading overlay
function LoadingOverlay({ visible }) {
  if (!visible) return null;

  return (
    <View style={{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.5)',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000
    }}>
      <View style={{
        backgroundColor: 'white',
        padding: 20,
        borderRadius: 10,
        alignItems: 'center'
      }}>
        <ActivityIndicator size="large" color="#007AFF" />
        <Text style={{ marginTop: 10, fontSize: 16 }}>Please wait...</Text>
      </View>
    </View>
  );
}

ProgressBar

A progress bar component for showing completion status with determinate and indeterminate modes.

const ProgressBar: React.ComponentType<ProgressBarProps>;

Props:

progress - Progress value between 0 and 1 (default: 0)
indeterminate - Show indeterminate animation (default: false)
color - Progress bar color (default: '#1976D2')
trackColor - Background track color (default: 'transparent')
style - Component styling

Usage:

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

function ProgressExample() {
  const [progress, setProgress] = useState(0);
  const [uploading, setUploading] = useState(false);

  const simulateProgress = () => {
    setProgress(0);
    setUploading(true);

    const timer = setInterval(() => {
      setProgress(prev => {
        const next = prev + 0.1;
        if (next >= 1) {
          clearInterval(timer);
          setUploading(false);
          return 1;
        }
        return next;
      });
    }, 200);
  };

  return (
    <View style={{ padding: 20 }}>
      {/* Basic progress bar */}
      <View style={{ marginBottom: 20 }}>
        <Text style={{ marginBottom: 10 }}>Download Progress</Text>
        <ProgressBar
          progress={0.7}
          color="#4CAF50"
          trackColor="#e0e0e0"
          style={{ height: 8, borderRadius: 4 }}
        />
        <Text style={{ marginTop: 5, fontSize: 12, color: '#666' }}>
          70% Complete
        </Text>
      </View>

      {/* Dynamic progress */}
      <View style={{ marginBottom: 20 }}>
        <Text style={{ marginBottom: 10 }}>Upload Progress</Text>
        <ProgressBar
          progress={progress}
          color="#007AFF"
          trackColor="#f0f0f0"
          style={{ height: 6, borderRadius: 3 }}
        />
        <Text style={{ marginTop: 5, fontSize: 12, color: '#666' }}>
          {Math.round(progress * 100)}% Complete
        </Text>
        <Button
          title={uploading ? "Uploading..." : "Start Upload"}
          onPress={simulateProgress}
          disabled={uploading}
        />
      </View>

      {/* Indeterminate progress */}
      <View style={{ marginBottom: 20 }}>
        <Text style={{ marginBottom: 10 }}>Processing...</Text>
        <ProgressBar
          indeterminate={true}
          color="#FF9800"
          trackColor="#fff3e0"
          style={{ height: 4, borderRadius: 2 }}
        />
      </View>

      {/* Custom styled progress bars */}
      <View style={{ marginBottom: 10 }}>
        <Text style={{ marginBottom: 10 }}>Custom Styles</Text>
        
        {/* Thick progress bar */}
        <ProgressBar
          progress={0.3}
          color="#E91E63"
          trackColor="#fce4ec"
          style={{ height: 12, borderRadius: 6, marginBottom: 10 }}
        />
        
        {/* Thin progress bar */}
        <ProgressBar
          progress={0.8}
          color="#9C27B0"
          trackColor="#f3e5f5"
          style={{ height: 2, borderRadius: 1 }}
        />
      </View>
    </View>
  );
}

// Progress with multiple steps
function StepProgress({ currentStep, totalSteps }) {
  const progress = currentStep / totalSteps;
  
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ marginBottom: 10, fontSize: 16 }}>
        Step {currentStep} of {totalSteps}
      </Text>
      <ProgressBar
        progress={progress}
        color="#007AFF"
        trackColor="#e5e5ea"
        style={{ 
          height: 8, 
          borderRadius: 4,
          backgroundColor: '#e5e5ea' 
        }}
      />
    </View>
  );
}

Types

interface SwitchProps extends ViewProps {
  value?: boolean;
  onValueChange?: (value: boolean) => void;
  disabled?: boolean;
  thumbColor?: ColorValue;
  activeThumbColor?: ColorValue;
  trackColor?: ColorValue | { false: ColorValue; true: ColorValue };
  activeTrackColor?: ColorValue; // deprecated
  accessibilityLabel?: string;
  style?: ViewStyle;
}

interface CheckBoxProps extends ViewProps {
  value?: boolean;
  onValueChange?: (value: boolean) => void;
  onChange?: (event: ChangeEvent) => void;
  disabled?: boolean;
  readOnly?: boolean;
  color?: ColorValue;
  accessibilityLabel?: string;
  style?: ViewStyle;
}

interface PickerProps extends ViewProps {
  selectedValue?: string | number;
  onValueChange?: (value: string | number, index: number) => void;
  enabled?: boolean;
  children?: React.ReactNode;
  style?: ViewStyle;
  testID?: string;
}

interface PickerItemProps {
  label: string;
  value?: string | number;
  color?: ColorValue;
  testID?: string;
}

interface ActivityIndicatorProps extends ViewProps {
  animating?: boolean;
  color?: string;
  size?: 'small' | 'large' | number;
  hidesWhenStopped?: boolean;
  style?: ViewStyle;
}

interface ProgressBarProps extends ViewProps {
  progress?: number; // 0 to 1
  indeterminate?: boolean;
  color?: ColorValue;
  trackColor?: ColorValue;
  style?: ViewStyle;
}

Install with Tessl CLI