Skip to content

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

License

Notifications You must be signed in to change notification settings

mfrachet/rn-placeholder

Repository files navigation

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

Build Status License: MIT

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


Image of the placeholder in action

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