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

Last update: Jul 26, 2022

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.com/rn-placeholder.

V3 features

GitHub

https://github.com/mfrachet/rn-placeholder
Comments
  • 1. Allow for passing in arbitrary styles

    Would there be any interest for a PR that added the feature to be able to pass in arbitrary styles to placeholders? We've found the built-in props for a few of our use cases to be limiting, especially for fine-tuning the positioning of placeholder elements. We'd hate to wrap the placeholders in additional views, so we're left with having to build custom placeholders. However, if these components allowed for passing in arbitrary styles for more control, we'd be able to solve for our use case.

    I'm happy to open a PR if there's interest.

    <Box style={...} />
    <ImageContent style={...} paragraphStyle={...} mediaStyle={...} />
    <Line style={...} />
    <Media style={...} />
    <MultiWords style={...} wordStyle={...} />
    <Paragraph lineStyle={...} style={...} />
    
    Reviewed by conrad-vanl at 2018-01-07 05:56
  • 2. TypeScript type definition

    I couldn't find TypeScript declaration file of this library.

    If you don't mind I'd make a PR to add the file directly to this repository, which is convenient for TypeScript users. Or I can put the file to DefinitelyTyped repository.

    Reviewed by yo7 at 2018-10-22 01:20
  • 3. Support placeholders with arbitrary width, height and borderRadius

    Thank you for the amazingly useful library 😊

    I'd like to suggest adding a very generic component that can be given an arbitrary width, height, borderRadius and color. I think that will be generic enough for 99% of the use cases. The current presets only work for square images and the border radius is not customisable.

    This came out of me needing a series of rectangular placeholders with a specific border radius. Even though this can be achieved by building your own Custom Component, I was wondering if perhaps that is basic enough functionality to be included out of the box.

    Reviewed by kadikraman at 2017-12-15 18:31
  • 4. Finding a better way to manage animations

    Today animations rely on a trick: a box is put over all of the placeholder components and is animated:

    This can cause problem when the user switches the background color or the element colors:

    Does anybody have an idea how we can fix this? 😊

    Reviewed by mfrachet at 2019-05-02 13:08
  • 5. Not working if wrapped under flexDirection: row

    Not working if wrapped under flexDirection: row. The content is blank if wrapped with flexDirection. Please provide solution to have multiple placeholder in a single row.

    Reviewed by ManigandanRaamanathan at 2020-02-05 12:23
  • 6. Babel for es2015 enviornments

    Hello,

    Love this library! I am using it in an environment where dependencies must be es2015 though and need it run through babel. Jest was already running things through babel.

    This is a very normal thing for Javascript libraries. Especially those that can be leveraged on web and native.

    yarn release will create the necessary files in a folder called 'lib' ... it's a prepublish hook so when you run yarn publish it should just work.

    Also upgraded Jest.

    Tested on web and native, also passes jest tests.

    Reviewed by rjerue at 2019-03-12 01:34
  • 7. Animated: "useNativeDriver" was not specified warning

    Just updated to React Native 0.62.2 and there's a warning using rn-placeholder library, version 3.0.0.

    Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

    Code:

    <Placeholder Animation={ShineOverlay}>
    (...)
    </Placeholder>
    

    Should we add this property to ShineOverlay component?

    Reviewed by nelsonprsousa at 2020-05-18 22:37
  • 8. RN Placeholder import is undefined RN 0.60.5

    When importing the package like import Placeholder from 'rn-placeholder' is comming as undefined, for a reason a don`t know why.

    RN Placeholder import error

    I just installed following the installations steps

    yarn add rn-placeholder and is not being able to import.

    "react": "16.8.6",
    "react-native": "0.60.5",
    "rn-placeholder": "^3.0.0"
    
    Reviewed by gabrielbuzziv at 2019-09-24 20:30
  • 9. Custom Animations - alpha v3

    Hi

    I'm testing the alpha version and it works really well.

    I have 2 PlaceholderLines with different width but I want the shine animation to start at the exact same time and end at the same time and cross the same distance. The issue is that I cannot use a ShineOverlay since a white block is rendered on top of both views and I use a blue background.

    I was thinking of creating a custom animation but I don't have access to the Provider. Any idea on how to create a custom animation?

    Thanks in advance!

    Reviewed by VanHoutte at 2019-07-25 14:22
  • 10. Cannot center Line in View?

    i want to create Line centered in my View element, this my code

    <View style={{ width: '50%', backgroundColor: 'red', justifyContent: 'center', alignItems: 'center' }}> <Placeholder.Line position='right' color="#efefef" width="30%" /> </View>

    Reviewed by nagacoder at 2018-10-26 07:59
  • 11. Passing an animation to Placeholder.Line make it disappear.

    When I pass an animation to the Placeholder.Line, it makes placeholder to disappear.

    <Placeholder.Line width="77%" animate="fade" onReady={this.props.loading} >
    
    Reviewed by samitha9125 at 2018-09-11 10:01
  • 12. build(deps): bump moment from 2.24.0 to 2.29.4 in /website

    Bumps moment from 2.24.0 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex

    2.29.3 Full changelog

    • Release Apr 17, 2022
      • #5995 [bugfix] Remove const usage
      • #5990 misc: fix advisory link

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/moment/moment/security/advisories/GHSA-8hfj-j24r-96c4

    2.29.1 See full changelog

    • Release Oct 6, 2020

    Updated deprecation message, bugfix in hi locale

    2.29.0 See full changelog

    • Release Sept 22, 2020

    New locales (es-mx, bn-bd). Minor bugfixes and locale improvements. More tests. Moment is in maintenance mode. Read more at this link: https://momentjs.com/docs/#/-project-status/

    2.28.0 See full changelog

    • Release Sept 13, 2020

    Fix bug where .format() modifies original instance, and locale updates

    2.27.0 See full changelog

    • Release June 18, 2020

    Added Turkmen locale, other locale improvements, slight TypeScript fixes

    2.26.0 See full changelog

    • Release May 19, 2020

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-07 12:40
  • 13. build(deps): bump gatsby-plugin-mdx from 1.0.36 to 2.14.1 in /website

    Bumps gatsby-plugin-mdx from 1.0.36 to 2.14.1.

    Release notes

    Sourced from gatsby-plugin-mdx's releases.

    New MongoDB source plugin!

    Exciting to see the first source plugin for a database added!

    Added

    Fixed

    New plugin adding support for css-in-js library JSS!

    Added

    Fixed

    1.3.0 — improve cachability of JS bundles + new CSV transformer!

    Added

    ... (truncated)

    Changelog

    Sourced from gatsby-plugin-mdx's changelog.

    2.14.1 (2022-06-02)

    Bug Fixes

    2.13.0 (2021-09-01)

    🧾 Release notes

    Chores

    2.12.0 (2021-08-18)

    🧾 Release notes

    Chores

    2.11.0 (2021-08-04)

    🧾 Release notes

    Bug Fixes

    • generate mdx once when multiple mdx fields requested #32462 (0f8d747)

    2.10.1 (2021-07-26)

    Bug Fixes

    2.10.0 (2021-07-20)

    🧾 Release notes

    Chores

    2.9.0 (2021-07-07)

    🧾 Release notes

    Features

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-03 22:50
  • 14. flex doesn't works ?

    Hi,

    i try to make 3 or more rectangle inline, i.e. flex row style. but this code doesn't works

        <Placeholder style={{flex:1, flexDirection: 'row'}}
                  Animation={Shine}>
                  <PlaceholderLine height={150} style={{ backgroundColor: "red" }}/>
                  <PlaceholderLine height={150} style={{ backgroundColor: "red" }}/>
                  <PlaceholderLine height={150} style={{ backgroundColor: "red" }}/>
    
       </Placeholder>
    

    How i can display loaders like in horizontal flatlist ?

    Thanks

    Reviewed by fatoldsun00 at 2021-11-15 21:32
  • 15. Looking for maintainers

    Hello, people using this library 👋🏻

    First, thank you all for having supported the project for such a long period 😊 .

    As you may have seen, this project has not moved for a long time and this is because I don't have the time nor the energy (and that I shifted away from React Native to focus back on the web platform) to review pull requests or to provide a fix for critical issues (looking at you #99, opened in 2019 😅 )

    Thus, I'm looking for a community, or some maintainers that would be interested in improving the thing, reviewing code, and making sure this grows in parallel with React Native itself.

    I can move this project from my user account to a dedicated community if needed, I don't have strong feelings about that.

    People having experience in creating scalable React components with experience working in the OSS ecosystem would be very valuable to this project, I think.

    Anyways, if you are interested and feel motivated to awake this project, feel free to answer right below or to send me a DM on Twitter, DMs are opened on https://twitter.com/mfrachet 😊

    Have a great one and thanks for using this tool 🙏🏻

    Reviewed by mfrachet at 2021-08-20 08:08
  • 16. Add useNativeDriver to shine animations

    Make Shine and ShineOverlay animations run on the native thread. Related to this issue: https://github.com/mfrachet/rn-placeholder/issues/99

    Only remaining animation on the JS side is Progressive. I think this is still possible but I would want to start a discussion regarding this. For using translateX as the animated prop you need the width of how much to translate.

    My attempts at converting Progressive were making the animation look different from the initial one because the Progressive View was the same width on all children (Left, Right or Other Media) therefore translating with 50% would look different on lines of different length and it was not possible to find the width of the PlaceHolderLine or Media to translate only by that, as the Animation Consumer was put inside the View and not on the outside.

    Example IMG_1835

    In the picture above, I translated the AnimatedView with -20%, as you can see, in the Left and Right media, this shows a progress of 50% because the View is translated by 20% of its own width.

    A possible solution would be to define the AnimationConsumer inside the PlaceholderLine and PlaceholderMedia so that you can pass through that context an onLayout function that can get the width of the parent.

    I considered that to be a bit too much of a reimplementation, but that would solve the problem. If you give the alright for that, I would provide a different PR with this.

    Until then, here is Shine and ShineOverlay 😄

    Reviewed by ovistoica at 2020-09-13 11:06
Placeholder/ Skeleton of React Native
Placeholder/ Skeleton of React Native

React Native Shimmer Placeholder Placeholder for both IOS and Android Get Started Installation npm i react-native-shimmer-placeholder --save or yarn a

Jul 28, 2022
Placeholder/Loading for React Native
Placeholder/Loading for React Native

React Native Fade Loading Placeholder/Loading for React Native Installation npm install --save react-native-fade-loading or yarn add react-native-fade

Feb 8, 2022
Parse text and make them into multiple React Native Text elements
Parse text and make them into multiple React Native Text elements

React Native Parsed Text This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predef

Jul 29, 2022
A pure javascript masked text and input text component for React-Native.
A pure javascript masked text and input text component for React-Native.

react-native-masked-text This is a simple masked text (normal text and input text) component for React-Native. Alert Hey guys! Unfortunatelly I'm not

Jul 26, 2022
✈️ 🚀 React native progress-bar, give your progress-bar some brand style
✈️ 🚀 React native progress-bar, give your progress-bar some brand style

React Native Air Progress Bar Pretty customizable and animated progress-bar component for React Native. We often need to customize our mobile applicat

Apr 10, 2021
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

Aug 4, 2022
💬 Follow some activities (new user, payment, ...) from your app via Slack and this webhook lib
💬  Follow some activities (new user, payment, ...) from your app via Slack and this webhook lib

react-native-slack-webhook Slack webhook for React-Native Installation $ npm i react-native-slack-webhook --save or $ yarn add react-native-slack-webh

Jul 30, 2022
🖼️ A library to show colorful blurry placeholders while your content loads.
🖼️ A library to show colorful blurry placeholders while your content loads.

Blurhash ??️ Give your users the loading experience they want. Install via npm: npm i react-native-blurhash npx pod-install BlurHash is a compact repr

Aug 1, 2022
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.
This module brings

react-native-display This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app per

Jul 29, 2022
react-native-match-media ★23 - window.matchMedia mock for React Native

react-native-match-media window.matchMedia polyfill for React Native Has a peer dependency of walmartreact/react-native-orientation-listener, so make

Feb 24, 2021
:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

React Native Image Picker A React Native module that allows you to select a photo/video from the device library or camera. Note: If you are still usin

Jul 31, 2022
A light weight and customisable content loader for react native apps, will work both on expo and init projects.
A light weight  and customisable content loader for react native apps, will work both on expo and init projects.

Provide a placeholder at the place which need waiting for loading, Easy to implement and fun to use, this package is highly customizable, Please go th

Jul 27, 2022
React Native component to censor content
React Native component to censor content

react-native-censored react-native-censored is a tool for quickly censoring potentially objectionable content in your app so it conforms to the guidel

Feb 8, 2022
Local and remote media gallery with captions, selections and grid view support for react native.
Local and remote media gallery with captions, selections and grid view support for react native.

React Native Photo Browser Information A full screen image gallery with captions, selections and grid view support for react-native. Layout and API de

May 31, 2022
Card Media component for React Native
Card Media component for React Native

react-native-card-media Card Media component for React Native. Also supports multiple image layout. single & double three & four five Installation npm

Aug 9, 2021
React-magic-scroll - A react library for adding some effect you want when scroll

react-magic-scroll A react library for adding some effect you want when scroll.

May 13, 2022
This is a React-Native package to display every 254 Country flags with the ISO 3166-1 alpha-2 Standard!

react-native-country-flag This is a React-Native package to display every 254 Country flags with the ISO 3166-1 alpha-2 Standard! Install npm install

Jul 28, 2022
💃🏻 Display Animated WebP images in React Native the hacky way, support for Android & iOS both
💃🏻 Display Animated WebP images in React Native the hacky way, support for Android & iOS both

???? react-native-animated-webp Display and control Animated WebP images in React Native the hacky way ?? Installation ?? PeerDependencies first This

Jul 1, 2022
Collapsible-react-component - Collapses and expands content with an animation for react

Collapsible react component Collapses and expands content with an animation. Ins

Apr 18, 2022