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

Media Components

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

Image display and media components with support for multiple source formats, caching, accessibility, and advanced image processing capabilities.

Image

A powerful image component that handles loading, caching, error states, and accessibility. Supports multiple image formats, resize modes, and advanced styling options.

const Image: React.ComponentType<ImageProps>;

Props:

source - Image source: number (require), string (URL), or SourceObject
defaultSource - Default image shown while loading or on error
resizeMode - How image should be resized: 'cover' | 'contain' | 'stretch' | 'center' | 'repeat' | 'none'
style - Image styling including dimensions and effects
blurRadius - Blur effect radius in pixels
tintColor - Color to tint the image
draggable - Whether image can be dragged (default: false)
accessibilityLabel - Screen reader description
onLoad - Callback when image loads successfully
onLoadStart - Callback when loading begins
onLoadEnd - Callback when loading ends (success or error)
onError - Callback when image fails to load
onProgress - Callback for download progress updates
onLayout - Layout change callback

Static Methods:

Image.getSize(uri, successCallback, errorCallback) - Get image dimensions
Image.prefetch(uri) - Preload image into cache
Image.queryCache(uris) - Check cache status for URIs

Source Types:

// Asset from bundle
source={require('./image.png')}

// Remote URL
source="https://example.com/image.jpg"

// Source object with options
source={{
  uri: 'https://example.com/image.jpg',
  headers: { Authorization: 'Bearer token' },
  cache: 'force-cache',
  scale: 2.0,
  width: 300,
  height: 200
}}

// Multiple sources for responsive images
source={[
  { uri: 'https://example.com/small.jpg', scale: 1 },
  { uri: 'https://example.com/large.jpg', scale: 2 }
]}

Resize Modes:

cover - Scale image to fill container while maintaining aspect ratio (default)
contain - Scale image to fit inside container while maintaining aspect ratio
stretch - Stretch image to fill container exactly
center - Center image without scaling
repeat - Tile image to fill container
none - Don't scale or move image from top-left corner

Usage:

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

// Basic image
<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

// Image with loading states
<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  defaultSource={{ uri: 'https://example.com/placeholder.jpg' }}
  style={{ width: 300, height: 200 }}
  onLoadStart={() => setLoading(true)}
  onLoad={() => {
    setLoading(false);
    console.log('Image loaded');
  }}
  onError={(error) => {
    setLoading(false);
    console.error('Image failed to load:', error);
  }}
/>

// Image with effects
<Image
  source={{ uri: 'https://example.com/photo.jpg' }}
  style={{ 
    width: 250, 
    height: 250,
    borderRadius: 125
  }}
  blurRadius={2}
  tintColor="rgba(255, 0, 0, 0.3)"
/>

// Responsive image with multiple sources
<Image
  source={[
    { 
      uri: 'https://example.com/small.jpg',
      width: 400,
      height: 300
    },
    { 
      uri: 'https://example.com/large.jpg',
      width: 800,
      height: 600
    }
  ]}
  style={{ width: '100%', height: 200 }}
  resizeMode="cover"
/>

// Asset from bundle
<Image
  source={require('../assets/logo.png')}
  style={{ width: 100, height: 50 }}
/>

// Image with custom headers
<Image
  source={{
    uri: 'https://api.example.com/protected-image.jpg',
    headers: {
      'Authorization': 'Bearer ' + token,
      'User-Agent': 'MyApp/1.0'
    },
    cache: 'force-cache'
  }}
  style={{ width: 200, height: 150 }}
/>

// Accessible image
<Image
  source={{ uri: 'https://example.com/chart.png' }}
  accessibilityLabel="Sales chart showing 25% increase in Q3"
  style={{ width: 300, height: 200 }}
/>

Static Method Usage:

// Get image dimensions
Image.getSize(
  'https://example.com/image.jpg',
  (width, height) => {
    console.log(`Image dimensions: ${width}x${height}`);
  },
  (error) => {
    console.error('Failed to get image size:', error);
  }
);

// Prefetch images for better UX
await Image.prefetch('https://example.com/next-image.jpg');

// Check cache status
const cacheStatus = await Image.queryCache([
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg'
]);
console.log(cacheStatus); // { 'image1.jpg': 'disk/memory', ... }

ImageBackground

A container component that displays an image as a background while allowing child content to be rendered on top of it.

const ImageBackground: React.ComponentType<ImageBackgroundProps>;

Props:

Inherits all ImageProps
children - Content to render over the background image
imageStyle - Style applied specifically to the background image
imageRef - Ref to access the underlying Image component
style - Style applied to the container View

Usage:

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

// Basic background image
<ImageBackground
  source={{ uri: 'https://example.com/background.jpg' }}
  style={{ width: 300, height: 200, justifyContent: 'center' }}
>
  <Text style={{ color: 'white', fontSize: 18, textAlign: 'center' }}>
    Content over image
  </Text>
</ImageBackground>

// Background with custom image styling
<ImageBackground
  source={{ uri: 'https://example.com/pattern.jpg' }}
  style={{
    flex: 1,
    padding: 20
  }}
  imageStyle={{
    opacity: 0.3,
    resizeMode: 'repeat'
  }}
  resizeMode="repeat"
>
  <View style={{ backgroundColor: 'rgba(255,255,255,0.8)', padding: 15 }}>
    <Text>This content appears over a semi-transparent repeating background</Text>
  </View>
</ImageBackground>

// Hero section with background
<ImageBackground
  source={{ uri: 'https://example.com/hero.jpg' }}
  style={{
    width: '100%',
    height: 400,
    justifyContent: 'center',
    alignItems: 'center'
  }}
  imageStyle={{
    opacity: 0.7
  }}
>
  <View style={{
    backgroundColor: 'rgba(0,0,0,0.5)',
    padding: 20,
    borderRadius: 10
  }}>
    <Text style={{
      color: 'white',
      fontSize: 24,
      fontWeight: 'bold',
      textAlign: 'center'
    }}>
      Welcome to Our App
    </Text>
    <Text style={{
      color: 'white',
      fontSize: 16,
      textAlign: 'center',
      marginTop: 10
    }}>
      Discover amazing features
    </Text>
  </View>
</ImageBackground>

// Card with background image
<ImageBackground
  source={require('../assets/card-bg.jpg')}
  style={{
    width: 250,
    height: 150,
    borderRadius: 10,
    overflow: 'hidden'
  }}
  imageStyle={{
    borderRadius: 10
  }}
>
  <View style={{
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.3)',
    justifyContent: 'flex-end',
    padding: 15
  }}>
    <Text style={{ color: 'white', fontWeight: 'bold' }}>
      Card Title
    </Text>
    <Text style={{ color: 'white', fontSize: 12 }}>
      Card description text
    </Text>
  </View>
</ImageBackground>

// Accessing the image ref
function CustomImageBackground() {
  const imageRef = useRef();
  
  const handleImageLoad = () => {
    // Access image methods if needed
    console.log('Background image loaded');
  };
  
  return (
    <ImageBackground
      source={{ uri: 'https://example.com/bg.jpg' }}
      imageRef={imageRef}
      onLoad={handleImageLoad}
      style={{ flex: 1 }}
    >
      {/* Content */}
    </ImageBackground>
  );
}

Types

type ResizeMode = 'center' | 'contain' | 'cover' | 'none' | 'repeat' | 'stretch';

interface SourceObject {
  uri: string;
  headers?: Record<string, string>;
  body?: string;
  method?: string;
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
  scale?: number;
  width?: number;
  height?: number;
}

type Source = number | string | SourceObject | SourceObject[];

interface ImageStyle extends ViewStyle {
  resizeMode?: ResizeMode; // deprecated, use resizeMode prop
  tintColor?: ColorValue; // deprecated, use tintColor prop
}

interface ImageProps extends ViewProps {
  source?: Source;
  defaultSource?: Source;
  resizeMode?: ResizeMode;
  style?: ImageStyle;
  blurRadius?: number;
  tintColor?: ColorValue;
  draggable?: boolean;
  accessibilityLabel?: string;
  onLoad?: (event: LoadEvent) => void;
  onLoadStart?: () => void;
  onLoadEnd?: () => void;
  onError?: (event: ErrorEvent) => void;
  onProgress?: (event: ProgressEvent) => void;
  onLayout?: (event: LayoutEvent) => void;
}

interface ImageBackgroundProps extends ImageProps {
  children?: React.ReactNode;
  imageStyle?: ImageStyle;
  imageRef?: React.Ref<Image>;
  style?: ViewStyle; // Container style
}

// Static methods interface
interface ImageStatics {
  getSize: (
    uri: string,
    success: (width: number, height: number) => void,
    failure: (error: any) => void
  ) => void;
  prefetch: (uri: string) => Promise<void>;
  queryCache: (uris: string[]) => Promise<Record<string, 'disk/memory'>>;
}

// Events
interface LoadEvent {
  nativeEvent: {
    source: {
      width: number;
      height: number;
      uri: string;
    };
  };
}

interface ErrorEvent {
  nativeEvent: {
    error: string;
  };
}

interface ProgressEvent {
  nativeEvent: {
    loaded: number;
    total: number;
  };
}

Install with Tessl CLI