Package Exports

react-native-content-loading

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-content-loading) 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 Content Loading

Fork of https://www.npmjs.com/package/react-native-content-loader

Install

Install react-native-svg and d3-interpolate

npm install react-native-svg d3-interpolate --save

Link react-native-svg

react-native link react-native-svg

Install Content Loader

npm install react-native-content-loading

IMPORTANT: Remove “libRNSVG-tvOS.a” in xcode.

(How? Open .xcodeproj inside ios folder. Click on your project (root in the folder navigator on your left). Build Phases tab -> Link Binary with Libraries -> remove “libRNSVG-tvOS.a”)

Restart app running react-native run-ios

Usage

import ContentLoader from 'react-native-content-loading'
import {Circle, Rect} from 'react-native-svg'

Examples

Instagram style

<ContentLoader height={300} duration={1000}>
    <Circle cx="30" cy="30" r="30"/>
    <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
    <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
    <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</ContentLoader>

Facebook style

<ContentLoader primaryColor="#e8f7ff"
               secondaryColor="#4dadf7"
               duration={700}
               height={140}>
    <Rect x="0" y="0" rx="5" ry="5" width="70" height="70"/>
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13"/>
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10"/>
    <Rect x="0" y="80" rx="3" ry="3" width="350" height="10"/>
    <Rect x="0" y="100" rx="3" ry="3" width="200" height="10"/>
    <Rect x="0" y="120" rx="3" ry="3" width="360" height="10"/>
</ContentLoader>

Code style

<ContentLoader
            primaryColor="#fff0f6"
            secondaryColor="#f783ac"
            height={80}>
    <Rect x="0" y="0" rx="3" ry="3" width="70" height="10"/>
    <Rect x="80" y="0" rx="3" ry="3" width="100" height="10"/>
    <Rect x="190" y="0" rx="3" ry="3" width="10" height="10"/>
    <Rect x="15" y="20" rx="3" ry="3" width="130" height="10"/>
    <Rect x="155" y="20" rx="3" ry="3" width="130" height="10"/>
    <Rect x="15" y="40" rx="3" ry="3" width="90" height="10"/>
    <Rect x="115" y="40" rx="3" ry="3" width="60" height="10"/>
    <Rect x="185" y="40" rx="3" ry="3" width="60" height="10"/>
    <Rect x="0" y="60" rx="3" ry="3" width="30" height="10"/>
</ContentLoader>

Props

Prop	Type	Default	Description
primaryColor	String	'#eeeeee'	Primary color, also background color
secondaryColor	String	'#dddddd'	Secondary color
duration	Number	2000	Animation duration
width	Number	300	Width of SVG
height	Number	200	Height of SVG
x1	String	'0'	x of point star gradient, accept Number or Percentage
y1	String	'0'	y of point star gradient, accept Number or Percentage
x2	String	'100%'	x of point end gradient, accept Number or Percentage
y2	String	'0'	y of point end gradient, accept Number or Percentage

TODO

Test on Android

License

MIT