CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-content-loader

SVG-powered React component for creating placeholder loading animations with support for both web and React Native platforms.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

react-native.mddocs/

React Native

React Content Loader provides full React Native support with the same API as the web version, using React Native's Animated API for smooth performance and react-native-svg for rendering.

Installation

React Native requires the additional react-native-svg dependency:

npm install react-content-loader react-native-svg

For React Native 0.60+, react-native-svg will be auto-linked. For older versions, follow the react-native-svg installation guide.

Core Imports

import ContentLoader, { 
  Facebook, 
  Instagram, 
  Code, 
  List, 
  BulletList,
  Circle, 
  Rect, 
  Path 
} from 'react-content-loader/native';

Capabilities

ContentLoader Component

Main component with identical API to web version but optimized for React Native performance.

interface IContentLoaderProps extends SvgProps {
  /** Enable/disable animation */
  animate?: boolean;
  /** Background color of the animation */
  backgroundColor?: string;
  /** Foreground color of the animation */
  foregroundColor?: string;
  /** Right-to-left content support */
  rtl?: boolean;
  /** Animation speed in seconds */
  speed?: number;
  /** Interval between animation runs as fraction of speed */
  interval?: number;
  /** Unique identifier for consistency */
  uniqueKey?: string;
  /** Custom shapes rendered before content mask */
  beforeMask?: JSX.Element;
}

declare const ContentLoader: React.FC<IContentLoaderProps>;

Usage Example:

import ContentLoader from 'react-content-loader/native';

const MyNativeLoader = () => (
  <ContentLoader 
    width={300}
    height={200}
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    speed={1.2}
  />
);

SVG Shape Components

React Native exports specific SVG shape components for building custom loaders.

/**
 * SVG Circle component from react-native-svg
 * Used for creating circular placeholder elements
 */
declare const Circle: React.ComponentType<{
  cx?: string | number;
  cy?: string | number;
  r?: string | number;
  fill?: string;
  [key: string]: any;
}>;

/**
 * SVG Rectangle component from react-native-svg
 * Used for creating rectangular placeholder elements
 */
declare const Rect: React.ComponentType<{
  x?: string | number;
  y?: string | number;
  width?: string | number;
  height?: string | number;
  rx?: string | number;
  ry?: string | number;
  fill?: string;
  [key: string]: any;
}>;

/**
 * SVG Path component from react-native-svg
 * Used for creating complex path-based placeholder elements
 */
declare const Path: React.ComponentType<{
  d?: string;
  fill?: string;
  [key: string]: any;
}>;

Custom Loader Creation

For React Native, use the exported shape components instead of HTML SVG elements:

import ContentLoader, { Circle, Rect } from 'react-content-loader/native';

const MyCustomNativeLoader = () => (
  <ContentLoader viewBox="0 0 380 70" width={380} height={70}>
    <Circle cx="30" cy="30" r="30" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
);

Animation System

React Native version uses Animated API for optimal performance:

// The animation system automatically:
// - Uses useNativeDriver: true for optimal performance
// - Converts speed from seconds to milliseconds
// - Handles component lifecycle (mount/unmount)
// - Manages animation loops with proper cleanup

const AnimatedLoader = () => (
  <ContentLoader 
    speed={1.5}      // Animation duration in seconds
    interval={0.25}  // Delay between animations as fraction of speed
    animate={true}   // Enable/disable animation
  >
    <Circle cx="50" cy="50" r="25" />
  </ContentLoader>
);

RTL Support

Right-to-left support uses React Native's transform property:

const RTLLoader = () => (
  <ContentLoader 
    rtl={true}
    width={300}
    height={100}
  >
    <Rect x="0" y="0" width="200" height="20" />
    <Rect x="0" y="30" width="150" height="20" />
  </ContentLoader>
);

Platform Differences

Props Not Available in React Native

These web-specific props are not available in React Native:

  • animateBegin - Use React Native animation timing instead
  • backgroundOpacity / foregroundOpacity - Use color alpha values
  • baseUrl - Not applicable in React Native
  • gradientRatio / gradientDirection - Native animation system handles gradients
  • title - Use accessibility props instead
  • style - Use React Native style prop on parent container

React Native Specific Features

// Use SvgProps for additional React Native SVG features
import { SvgProps } from 'react-native-svg';

const AdvancedLoader = () => (
  <ContentLoader 
    width={300}
    height={200}
    preserveAspectRatio="xMidYMid meet"  // SvgProps feature
    opacity={0.8}                        // SvgProps feature
  >
    <Rect x="0" y="0" width="100%" height="100%" />
  </ContentLoader>
);

Preset Components in React Native

All preset components work identically in React Native:

import { Facebook, Instagram, Code } from 'react-content-loader/native';

const MyNativePresets = () => (
  <>
    <Facebook backgroundColor="#f0f0f0" />
    <Instagram speed={2} />
    <Code foregroundColor="#333" />
  </>
);

Performance Considerations

Optimal Usage Patterns

// Good: Reuse components, avoid inline styles
const StyledLoader = () => (
  <ContentLoader 
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    speed={1.2}
  >
    <Rect x="0" y="0" width="100%" height="20" />
  </ContentLoader>
);

// Good: Use native driver animation (automatic)
const FastLoader = () => (
  <ContentLoader animate={true} speed={1.0}>
    <Circle cx="50" cy="50" r="25" />
  </ContentLoader>
);

Memory Management

The component automatically handles:

  • Animation cleanup on unmount
  • Native driver optimization
  • Proper lifecycle management
// Animation automatically stops when component unmounts
const ConditionalLoader = ({ loading }) => (
  loading ? <ContentLoader><Circle cx="50" cy="50" r="25" /></ContentLoader> : null
);

Install with Tessl CLI

npx tessl i tessl/npm-react-content-loader

docs

index.md

presets.md

react-native.md

tile.json