replace masked view library to the community one

chramos · Oct 4, 2022 · c1c79ce · c1c79ce · kamui545 · Oct 4, 2022
1 parent 830a701
commit c1c79ce
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -7,26 +7,26 @@ Android and iOS
 
 ### Installation
 
-> Note: This package requires **@react-native-masked-view/masked-view** and **react-native-linear-gradient**
+> Note: This package requires **@react-native-community/masked-view** and **react-native-linear-gradient**
 
 ###### Step #1
 
 Using yarn:
 
 ```bash
-yarn add @react-native-masked-view/masked-view react-native-linear-gradient
+yarn add @react-native-community/masked-view react-native-linear-gradient
 ```
 
 Using npm:
 
 ```bash
-npm install @react-native-masked-view/masked-view react-native-linear-gradient --save
+npm install @react-native-community/masked-view react-native-linear-gradient --save
 ```
 
 If you are running a **react-native** version below 0.60:
 
 ```bash
-react-native link @react-native-masked-view/masked-view react-native-linear-gradient
+react-native link @react-native-community/masked-view react-native-linear-gradient
 ```
 
 Otherwise:
@@ -59,9 +59,9 @@ There are two ways to use this package:
 with **SkeletonPlacehoder.Item** 🆕
 
 ```javascript
-import React from "react";
-import { View } from "react-native";
-import SkeletonPlaceholder from "react-native-skeleton-placeholder";
+import React from 'react';
+import {View} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
 const App = () => {
   return (
@@ -70,11 +70,7 @@ const App = () => {
         <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
         <SkeletonPlaceholder.Item marginLeft={20}>
           <SkeletonPlaceholder.Item width={120} height={20} />
-          <SkeletonPlaceholder.Item
-            marginTop={6}
-            width={80}
-            height={20}
-          />
+          <SkeletonPlaceholder.Item marginTop={6} width={80} height={20} />
         </SkeletonPlaceholder.Item>
       </SkeletonPlaceholder.Item>
     </SkeletonPlaceholder>
@@ -85,20 +81,18 @@ const App = () => {
 or with **View**, **Text** or **Image**
 
 ```javascript
-import React from "react";
-import { View } from "react-native";
-import SkeletonPlaceholder from "react-native-skeleton-placeholder";
+import React from 'react';
+import {View} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 
 const App = () => {
   return (
     <SkeletonPlaceholder borderRadius={4}>
-      <View style={{ flexDirection: "row", alignItems: "center" }}>
-        <View style={{ width: 60, height: 60, borderRadius: 50 }} />
-        <View style={{ marginLeft: 20 }}>
-          <Image style={{ width: 120, height: 20 }} src={requre('./src/assets/image.png')} />
-          <Text style={{ marginTop: 6, fontSize: 14, lineHeight: 18 }}>
-            Hello world
-          </Text>
+      <View style={{flexDirection: 'row', alignItems: 'center'}}>
+        <View style={{width: 60, height: 60, borderRadius: 50}} />
+        <View style={{marginLeft: 20}}>
+          <Image style={{width: 120, height: 20}} src={requre('./src/assets/image.png')} />
+          <Text style={{marginTop: 6, fontSize: 14, lineHeight: 18}}>Hello world</Text>
         </View>
       </View>
     </SkeletonPlaceholder>
@@ -110,14 +104,14 @@ const App = () => {
 
 #### SkeletonPlaceholder
 
-|      Prop       |                             Description                              |     Type      |  Default  |
-| :-------------: | :------------------------------------------------------------------: | :-----------: | :-------: |
-| backgroundColor |                 Determines the color of placeholder                  |  ColorValue   | _#E1E9EE_ |
-| highlightColor  |            Determines the highlight color of placeholder             | string (hex)  | _#F2F8FC_ |
-|      speed      | Determines the animation speed in milliseconds. 0 disables animation |    number     |   _800_   |
-|    direction    |                  Determines the animation direction                  | "right" \| "left" |   "right"   |
-|     enabled     |   Determines if Skeleton should show placeholders or its children    |    boolean    |   true    |
-|  borderRadius   |           Determines default border radius for placeholders          |    number     | undefined |
+|      Prop       |                             Description                              |       Type        |  Default  |
+| :-------------: | :------------------------------------------------------------------: | :---------------: | :-------: |
+| backgroundColor |                 Determines the color of placeholder                  |    ColorValue     | _#E1E9EE_ |
+| highlightColor  |            Determines the highlight color of placeholder             |   string (hex)    | _#F2F8FC_ |
+|      speed      | Determines the animation speed in milliseconds. 0 disables animation |      number       |   _800_   |
+|    direction    |                  Determines the animation direction                  | "right" \| "left" |  "right"  |
+|     enabled     |   Determines if Skeleton should show placeholders or its children    |      boolean      |   true    |
+|  borderRadius   |          Determines default border radius for placeholders           |      number       | undefined |
 
 #### SkeletonPlaceholder.Item
 

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "license": "ISC",
   "devDependencies": {
     "@react-native-community/eslint-config": "3.0.3",
-    "@react-native-masked-view/masked-view": "^0.2.3",
+    "@react-native-community/masked-view": "^0.1.11",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9.17",
     "@types/react-native": "^0.63.17",
@@ -37,9 +37,9 @@
     "typescript": "^4.0.2"
   },
   "peerDependencies": {
-    "@react-native-masked-view/masked-view": "^0.2.3",
+    "@react-native-community/masked-view": "^0.1.11",
     "react": ">=0.14.8",
     "react-native": ">=0.50.1",
     "react-native-linear-gradient": "^2.5.6"
   }
-}
+}
diff --git a/src/SkeletonPlaceholder.tsx b/src/SkeletonPlaceholder.tsx
@@ -1,4 +1,4 @@
-import MaskedView from '@react-native-masked-view/masked-view';
+import MaskedView from '@react-native-community/masked-view';
 import React, {FC, Fragment, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Animated,

diff --git a/yarn.lock b/yarn.lock
@@ -306,10 +306,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.2.0.tgz#7d6d789ae8edf73dc9bed1246cd48277edea8066"
   integrity sha512-o6aam+0Ug1xGK3ABYmBm0B1YuEKfM/5kaoZO0eHbZwSpw9UzDX4G5y4Nx/K20FHqUmJHkZmLvOUFYwN4N+HqKA==
 
-"@react-native-masked-view/masked-view@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.2.3.tgz#5f7a39be4787c89d5b35ac80de2ea5d0a0bb64d7"
-  integrity sha512-t8VcdaFbyXscNs26h/NCsPqVjawWHhIMzGBR9oCIx6kbDa7JW3Q67lNLGkzDudSVnw3Qv09JZrkLXXOGjOABpg==
+"@react-native-community/masked-view@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.11.tgz#2f4c6e10bee0786abff4604e39a37ded6f3980ce"
+  integrity sha512-rQfMIGSR/1r/SyN87+VD8xHHzDYeHaJq6elOSCAD+0iLagXkSI2pfA0LmSXP21uw5i3em7GkkRjfJ8wpqWXZNw==
 
 "@types/json-schema@^7.0.9":
   version "7.0.11"