Skip to content

mfrachet/rn-placeholder

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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