# react-native-placeholder-bcm

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

Latest version **1.1.0** (published 2017-12-18) · 0 weekly downloads

## Install

```sh
npm install react-native-placeholder-bcm
pnpm add react-native-placeholder-bcm
yarn add react-native-placeholder-bcm
bun add react-native-placeholder-bcm
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-12-18 |
| First published | 2017-12-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Marcelo Reyna |
| Maintainers | lepozepo |
| Keywords | react-native, ios, android, expo |

## Links

- npm: https://www.npmjs.com/package/react-native-placeholder-bcm
- Repository: https://github.com/lepozepo/react-native-placeholder-bcm
- Issues: https://github.com/lepozepo/react-native-placeholder-bcm/issues
- npm.io page: https://npm.io/package/react-native-placeholder-bcm

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2017-12-18

## README

[![Build Status](https://travis-ci.org/mfrachet/rn-placeholder.svg?branch=master)](https://travis-ci.org/mfrachet/rn-placeholder)
[![Coverage Status](https://coveralls.io/repos/github/mfrachet/rn-placeholder/badge.svg?branch=master)](https://coveralls.io/github/mfrachet/rn-placeholder?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)


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

*Fully compatible with [Expo](https://expo.io/) and [react-native-web](https://github.com/necolas/react-native-web), [see examples](./EXAMPLE.md)*

*New documentation available [mfrachet.github.io/rn-placeholder](https://mfrachet.github.io/rn-placeholder/)*

------
<p align="center">
<img height="270" src="https://img4.hostingpics.net/pics/221859android.gif" />
<img height="270" src="https://img4.hostingpics.net/pics/197702shineanimation.gif" />
<img height="270" src="https://img15.hostingpics.net/pics/449888rnweb.gif" />
</p>

------

# Content

- <a href="#usage">How to use it ?</a>
- [Components available](./API.md)
- [Creating a custom component](./API.md#custom)
- [Using default animations](./ANIMATIONS.md#default)
- [Using a custom animation](./ANIMATIONS.md#custom)
- [Examples from React Native, Expo or React Native Web](./EXAMPLE.md)

<h1 name="#usage">Usage</h1>

### Installation
```javascript
$ npm install rn-placeholder --save
```

### In your code

```javascript
import Placeholder from 'rn-placeholder';

/*...*/
render() {
    return (
      <View>
        <Placeholder.ImageContent
          size={60}
          animate="fade"
          lineNumber={4}
          lineSpacing={5}
          lastLineWidth="30%"
          onReady={this.state.isReady}
        >
          <Text>Placeholder has finished :D</Text>
        </Placeholder.ImageContent>
      </View>
    );
  }
/*...*/
```

When the value of `this.state.isReady` changes to something *existing*, the `<Text>` component will be rendered

---
_Source: https://npm.io/package/react-native-placeholder-bcm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._