JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 91
  • Score
    100M100P100Q59531F
  • License MIT

React Native Package to set a placeholder while your components are loading

Package Exports

  • react-native-placeholder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-placeholder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-facebook-like-placeholder

You can not always remove the waiting time to get an information but you can make it feels shorter.

This react-native module allows you to set a placeholder to render something while fetching the main component/element (example: when a remote image loads, when you are performing a GET request to your Database, etc.).
This placeholder design is based on the one on Facebook and is partly customisable.

Illustration

###The Component : Placeholder

The Component takes a few props :

  • Width : The width of the view, used to calculate the size of the placeholder (default: ScreenWidth * .9)
  • Height : The height of the view, used to calculate the size of the placeholder (default: ScreenHeight * .133)
  • placeholderDesign : An array of array, which determines the width, the height and the margin of the Lines (default: [[.5, .1, .05, .07], [.3, .1, .05, .07], [.4, .1, .05, .07]])
  • Done : A state, set to false at first, which will change to true at the end of the loading

The placeholder has two main "parts", the Cube (non editable for now) and the Lines (editables). With no specifics data, a basic component is set.
The Done props has to be a state from the parents component that will switch to true at the end of the loading (for instance with the onLoadEnd method of the component).