This project is looking for motivated maintainers, see this issue for more information.

Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web.

Snack application with copy to clipboard!
Usage with react-native-web
The N Props syndrome (post): explaining the transition between v2 and v3

Usage

Installation

$ yarn add rn-placeholder

In your code

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>
);

The v3 comes with an example app that provides different stories and example of the library:

Run the example apps

You can modify any call of yarn by npm install

To start the mobile app:

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

To start the web app:

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

The web app is also available in this github pages: https://mfrachet.github.io/rn-placeholder.

V3 features

Rewritten in Typescript
Less code, more fun 😎
API Suspense oriented
New animations

mfrachet / rn-placeholder

readme