add SkeletonPlaceholder.Item and SkeletonPlaceholder.View

README.md

@@ -39,17 +39,21 @@ pod install
 Using yarn:
 
 ```bash
-yarn add [email protected].4
+yarn add [email protected].5
 ```
 
 Using npm:
 
 ```bash
-npm install [email protected].4 --save
+npm install [email protected].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 = () => {
     <SkeletonPlaceholder borderRadius={4}>
       <View style={{flexDirection: 'row', gap: 16, alignItems: 'center'}}>
         <View style={{width: 60, height: 60, borderRadius: 50}} />
-        <View style={{marginLeft: 20, gap: 6}}>
+        <View style={{gap: 6}}>
           <View style={{width: 120, height: 20}} />
           <View style={{width: 80, height: 20}} />
         </View>
@@ -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 (
+    <SkeletonPlaceholder borderRadius={4}>
+      <SkeletonPlaceholder.Item flexDirection="row" alignItems="center" gap={20}>
+        <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
+        <SkeletonPlaceholder.Item gap={6}>
+          <SkeletonPlaceholder.Item width={120} height={20} />
+          <SkeletonPlaceholder.Item width={80} height={20} />
+        </SkeletonPlaceholder.Item>
+      </SkeletonPlaceholder.Item>
+    </SkeletonPlaceholder>
+  );
+};
+```
+
 ### Properties
 
 #### SkeletonPlaceholder
@@ -85,11 +110,17 @@ const App = () => {
 
 <!-- |     enabled     |   Determines if Skeleton should show placeholders or its children    |           boolean           |   true    | -->
 
-<!-- #### SkeletonPlaceholder.Item
+#### SkeletonPlaceholder.Item
+
+| Prop |           Description            | Type | Default |
+| :--: | :------------------------------: | :--: | :-----: |
+| any  | Any view style props is accepted | any  |
+
+#### SkeletonPlaceholder.View
 
-| Prop |            Description            | Type | Default |
-| :--: | :-------------------------------: | :--: | :-----: |
-| any  | Any view style props was accepted | any  | -->
+| Prop |           Description            | Type | Default |
+| :--: | :------------------------------: | :--: | :-----: |
+| any  | Any view style props is accepted | any  |
 
 ### Contributing
 

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": {

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;