diff --git a/README.md b/README.md index 5bcd696..6528ea3 100644 --- a/README.md +++ b/README.md @@ -39,17 +39,21 @@ pod install Using yarn: ```bash -yarn add react-native-skeleton-placeholder@6.0.0-beta.4 +yarn add react-native-skeleton-placeholder@6.0.0-beta.5 ``` Using npm: ```bash -npm install react-native-skeleton-placeholder@6.0.0-beta.4 --save +npm install react-native-skeleton-placeholder@6.0.0-beta.5 --save ``` ### Usage +There are two ways to use this package: + +1. Using **View** + ```javascript import React from 'react'; import {View} from 'react-native'; @@ -60,7 +64,7 @@ const App = () => { - + @@ -70,6 +74,27 @@ const App = () => { }; ``` +2. Using **SkeletonPlaceholder.Item** or **SkeletonPlaceholder.View** + +```javascript +import React from 'react'; +import SkeletonPlaceholder from 'react-native-skeleton-placeholder'; + +const App = () => { + return ( + + + + + + + + + + ); +}; +``` + ### Properties #### SkeletonPlaceholder @@ -85,11 +110,17 @@ const App = () => { - +| Prop | Description | Type | Default | +| :--: | :------------------------------: | :--: | :-----: | +| any | Any view style props is accepted | any | ### Contributing diff --git a/package.json b/package.json index 41a09ae..ed78eb0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-skeleton-placeholder", - "version": "6.0.0-beta.4", + "version": "6.0.0-beta.5", "description": "SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.", "main": "lib/skeleton-placeholder.js", "scripts": { diff --git a/src/skeleton-placeholder.tsx b/src/skeleton-placeholder.tsx index c6d811a..704832f 100644 --- a/src/skeleton-placeholder.tsx +++ b/src/skeleton-placeholder.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import {LayoutRectangle} from 'react-native'; +import {LayoutRectangle, View, ViewStyle} from 'react-native'; import Animated, { useAnimatedProps, useSharedValue, @@ -146,3 +146,13 @@ const SkeletonPlaceholder = ({ }; export default SkeletonPlaceholder; + +type SkeletonPlaceholderItemProps = { + children?: React.ReactNode; +} & ViewStyle; +// @ts-ignore +SkeletonPlaceholder.Item = ({children, onLayout, ...style}: SkeletonPlaceholderItemProps) => + // on layout is important for the measure component + React.createElement(View, {style, onLayout}, children); + +SkeletonPlaceholder.View = SkeletonPlaceholder.Item;