eelkeh / rn-placeholder

:dash: :dizzy: :sparkles: Display some placeholder stuff before rendering your text or media content in React Native

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

Usage

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.