Display some placeholder stuff before rendering your text or media content in React Native.

Fully compatible with Expo and react-native-web.

Content

This is the content of the v2. If you're still using a version < 2, you should use this documentation instead.

• How to use it ?
• Components available
• Using default animations
• Using a custom animation

Installation

$ yarn add rn-placeholder

In your code

This is a new API coming from v2. However, the v1 APIs are still available in components available

import Placeholder, { Line, Media } from "rn-placeholder";

const ComponentLoaded = () => <Text>I'm loaded!</Text>;

const MyComponent = () => {
  const [isReady, setReady] = useState(false);

  // your logic

  return (
    <Placeholder
      isReady={isReady}
      animation="fade"
      whenReadyRender={() => <ComponentLoaded />}
      renderLeft={() => <Media hasRadius />}
      renderRight={() => <Media />}
    >
      <Line width="70%" />
      <Line />
      <Line />
      <Line width="30%" />
    </Placeholder>
  );
};

When the value of isReady changes to something truthy, the ComponentLoaded will be rendered.