DOCSEARCHbyAlgolia
Submit Docs

rn-placeholder

repository·master·Indexed 24 days ago

https://github.com/mfrachet/rn-placeholder

A React Native library for displaying placeholder and skeleton content before text or media is rendered. Compatible with Expo and react-native-web, version 3.0.3 is rewritten in TypeScript with a Suspense-oriented API. It provides core components like Placeholder, PlaceholderLine, and PlaceholderMedia, along with various animation effects including Fade, Shine, ShineOverlay, Loader, and Progressive.

Tokens
4.7K
Snippets
16
Records
36
Agent score
78%

What's inside rn-placeholder

  2. Handle placeholder visibility without onReady

    master

    The onReady and whenReadyRender props have been removed to simplify the library and focus on component logic rather than display logic. To control when a placeholder is shown, use standard React conditional rendering or Suspense (if available in your environment).

    // Instead of <Placeholder onReady={isDisplayed} />

const isDisplayed = true;

function App() {
  return isDisplayed && <Placeholder />;
}

  3. Build a custom animation

    master

    You can create custom animations by providing a component (or a provider of values) to the Animation prop of the Placeholder component.

    Custom animations should follow the pattern of the existing implementations (like Progressive). The component you provide will receive props from the Placeholder and is responsible for rendering the animated state.

  4. Run the mobile example app

    master

    To run the mobile example application locally, clone the repository, install dependencies, and start the example directory using yarn.

    $ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example && yarn && yarn start

  5. Use built-in animations with Placeholder

    master

    The Placeholder component accepts an Animation prop which determines how the placeholder elements behave. You can import several built-in animation components from rn-placeholder and pass them directly to the Animation prop.

    Available built-in animations:

    • Fade: Makes the placeholder become clearer on a specified interval.
    • ShineOverlay: Applies a tiny overlay from left to right. Note: This works best on white backgrounds with gray lines and has limitations with style customization.
    • Shine: Animates specific parts of the placeholder to overcome ShineOverlay limitations, though timing may vary based on component widths.
    • Loader: Uses the platform's standard loader (e.g., ActivityIndicator on React Native).
    • Progressive: A design-system inspired animation style.
    import {
  Placeholder,
  PlaceholderLine,
  Fade,
  ShineOverlay,
  Shine,
  Loader,
  Progressive,
} from "rn-placeholder";

function App() {
  return (
    <Placeholder Animation={Fade}>
      <PlaceholderLine width={70} />
    </Placeholder>
  );
}

  8. Migrate from previous versions to v3+

    master
    If you are upgrading from versions prior to v3, note that several props have been deprecated or changed to improve composability and flexibility. Specifically, the animate string prop has been replaced by the Animation prop, the firstLineWidth and lastLineWidth props have been replaced by individual PlaceholderLine components, and the onReady / whenReadyRender props have been removed in favor of standard React conditional rendering or Suspense.

  9. Use rn-placeholder components in your code

    master

    You can combine various components and animations from rn-placeholder to create custom loading states. The library is compatible with Expo and react-native-web.

    Key components include:

    • Placeholder: The container component that manages the layout and animation.
    • PlaceholderLine: Renders a placeholder line with a configurable width.
    • PlaceholderMedia: A placeholder for media content (images/videos).
    • Fade: An animation type used via the Animation prop on the Placeholder component.
    function App() {
  return (
    <Placeholder
      Animation={Fade}
      Left={PlaceholderMedia}
      Right={PlaceholderMedia}
    >
      <PlaceholderLine width={80} />
      <PlaceholderLine />
      <PlaceholderLine width={30} />
    </Placeholder>
  )
}

  10. Run the web example app

    master

    To run the web example application locally, clone the repository, install dependencies, and start the example-web directory using yarn.

    $ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example-web && yarn && yarn start

  11. Use rn-placeholder in your code

    master

    Import the core components and animations from rn-placeholder to create skeleton loading states. You can use Placeholder as a container, PlaceholderLine for text-like shapes, and PlaceholderMedia for image/video shapes. The Animation prop on the Placeholder component accepts animation components like Fade to control how the placeholder transitions.

    import {
  Placeholder,
  PlaceholderMedia,
  PlaceholderLine,
  Fade
} from "rn-placeholder";

const App = () => (
  <Placeholder
    Animation={Fade}
    Left={PlaceholderMedia}
    Right={PlaceholderMedia}
  >
    <PlaceholderLine width={80} />
    <PlaceholderLine />
    <PlaceholderLine width={30} />
  </Placeholder>
);

  12. Tweak existing animations with custom props

    master

    To customize a built-in animation, pass a function to the Animation prop of the Placeholder component. This function receives props from the internal animation engine.

    Important: You must spread these incoming props onto your component (e.g., <Loader {...props} />) to avoid unexpected behavior and ensure the animation engine can control the component correctly.

    function App() {
  return (
    <Placeholder
    Animation={(props) => (
      <Loader {...props}
        size="large"
        color="#00ff00" />
      )}>
      <PlaceholderLine width={70} />
      <PlaceholderLine width={50} />
      <PlaceholderLine width={80} />
      <PlaceholderLine width={30} />
    </Placeholder>
    )
  )
}