chramos / react-native-skeleton-placeholder Goto Github PK

Hello everyone. First of all thank you for this library. I would like to share with you a little problem I have experienced. I wanted to share this with you, as there may be people like me who come across this problem.

I used to use 'react-navigation' library in an application I was developing. Later, I came across the react-native-skeleton-placeholder library to put a placeholder while in standby for dynamic data, and I continued to develop my application using the ios side. However, when I wanted to test the android side of the application in the future, I encountered an error like 'Task: app: mergeDexDebug FAILED'. It took me quite a bit of time to figure this out. I finally discovered that the problem caused a problem on the android side when we installed '@ react-native-masked-view / masked-view' to use this library with the library '@ react-native-community / masked-view' to use react-navigation.

So if you use react-navigation in your application, I recommend that you do not use this library. While there is no problem on the iOS side, the application will give an error on the android side. If you add this information to the main 'README.md' file of the application, it will be very helpful to developers who have this problem like me. Otherwise, they will spend a lot of time exploring this problem.

I wish you a good day.

Is there any way to use with styled components
e.g.

Recently react native community packages began to change their names and masked view is one of them:

https://github.com/react-native-masked-view/masked-view

It's now to be installed as:

@react-native-masked-view/masked-view

but in the dependencies and peer dependencies properties in this libraries package.json, it's listed under the old name:

@react-native-community/masked-view

Could we update this? I would open a PR but I'm not to familiar with dependency management and not sure if simply adding the new name in addition to the old is enough or if it's more complicated than that..

In this function
const translateX = React.useMemo(() => animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [SCREEN_WIDTH, -SCREEN_WIDTH],
}), [animatedValue]);

can you guys add an option for switching the direction of the animation ?

--->>> outputRange: [-SCREEN_WIDTH, SCREEN_WIDTH],

thanks!
Jen.

Hello everyone!

I've a component with few skeleton items:

import React from 'react';
import { View } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
import { responsiveWidth } from 'react-native-responsive-dimensions';

const CategoryItemSkeleton = () => {
  return (
    <View paddingVertical={15} marginBottom={15}>
      <SkeletonPlaceholder>
        <SkeletonPlaceholder.Item flexDirection="row" paddingHorizontal={20}>
          <SkeletonPlaceholder.Item width={65} height={60} borderRadius={5} />
          <SkeletonPlaceholder.Item flexDirection="column" marginLeft={30} justifyContent="center">
            <SkeletonPlaceholder.Item width={responsiveWidth(67)} height={25} marginBottom={10} />
            <SkeletonPlaceholder.Item width={responsiveWidth(67)} height={15} />
          </SkeletonPlaceholder.Item>
        </SkeletonPlaceholder.Item>
      </SkeletonPlaceholder>
    </View>
  );
};

export default CategoryItemSkeleton;

I have used this component by mapping over an array for a list of placeholders:

    <View style={styles.container}>
      {categoryLoading ? (
        placeholderItems.map((item, index) => <CategoryItemSkeleton key={index} />)
      ) : (
        <FlatList data={categoryItems} renderItem={renderCategoryItem} keyExtractor={item =>  	`CAT${item.catId}`} />
      )}
    </View>

There seems to be a small delay before the animation starts and animation for mapped items rendered at the same time somehow starts in different point of time as shown below:

Is this a default behavior if so, is there any prop available to disable or minimize the delay and the irregularity in animation timing as a whole?

My app is not building because using this means we have two masked-views installed.
Is there any reason for that?

This library causes the whole app to crash on navigation pop() method when using the Native Stack Navigator from React Navigation:

I believe this is caused by the skeleton trying to update its state even after the parent component has been unmounted. To fix this, I believe a this.isMounted style check needs to be done within the component itself before updating its own state.

I'm mostly used to class-based React since this project has gotten so big and complex; I know that in class-based React, this would be accomplished by setting this.isMounted = true in componentDidMount() and this.isMounted = false in componentWillUnmount(), and wrapping any this.setState() calls like if (this.isMounted) {this.setState()}.

I wouldn't be the most comfortable implementing this with hooks like this library uses, perhaps someone can provide some insight on how this can be done with hooks and integrated into the library?

Custom container style prop is needed.

Hello,

Latest changes have been pushed long time ago and there is still no NPM release of this library. Recent commit brings important change of used masked-view library. Right now we have project based on react-navigation and we can't use your library because @react-native-masked-view/masked-view collides with @react-native-community/masked-view.

Please help. How use for horizontal list with item (width: 150, height:150)?

Hi, with the current version of this package my app in production shows an extreme lag where there is a skeleton loader. I believe instead of the Animated Api of React Native, if we use Reanimated2, we can achieve a much better performance. I haven't tried this though. In my free time I'm thinking of giving this a shot.

Do you have plan to support react-native-web? or Is it my configuration issue? I got below issue. Could you please check this if it's my configuration issue?

ERROR in ./node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js 73:24
Module parse failed: Unexpected token (73:24)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|             if (child.props.children) {
|                 console.log(react_native_1)
>                 return (<react_native_1.View >

Hello, v4.0.0 is working fine (With no errors but lots of delay) with this:

"@react-native-community/masked-view": "^0.1.11",

But v5.0.0 requires @react-native-masked-view/masked-view.

Problem:

These two libraries are not working together. App is just not opening with console output below. (Stuck at splash screen).

BugReporting extraData: {"AppRegistry.runApplication1": "Running \"AppName\" with {\"rootTag\":1,\"initialProps\":{}}"}

If I uninstall @react-native-community/masked-view, tons of libraries depend on this library so its kinda not possible.

Do you have any suggestion ? Like how to make v5 work with community masked view?

If you use a component inside any component with useEffect, the animation does not work.

function ExampleComponent() {
useEffect(() => {}, []) // any effect

return (
SkeletonPlaceholder
...
SkeletonPlaceholder
)
}

"react": "16.9.0",
"react-native": "0.61.5",
"react-native-linear-gradient": "2.5.6",
"react-native-skeleton-placeholder": "2.0.1"

Does this project support typescript? I'm using TS in my project and feel happy to integrate this library

When running this on an Expo managed project I get a BVLinearGradient was not found in the UIManager error. Is it possible to work around this? It looks like the issue has to do with react-native-linear-gradient. Is it possible to swap this dependency for expo-linear-gradient? Has anyone got this working in expo?

If we have content overflowing the device height, SkeletonPlaceholder should allow scrolling on the android like it is in IOS

I'm having some really poor performance using react-native-skeleton-placeholder, I'm not sure if it's me who is doing something wrong, or even my mobile phone, but I made a sample project, if you can give it a look. (https://github.com/tcorreiaubi/placeholderPerformance)

With the current code I'm having between 7-15fps which is really low since I would expect something around 60.
Thanks in advance for the amazing work you did with the package, really simple of using.

I do not understand why the skeleton takes a long time to show the animation on Android (it works fine on IOS).
Someone else happens ?

"@react-native-community/masked-view": "^0.1.11",

why changed back to that one on the latest version?

thx

How to stop skeltonplaceholder after loading complete. I have used isLoading={false} but its not working. I am using this library in my App. So please revert asap.

Thanks.

Hello, thanks for your effort!
Clean barebone code. Any plans to replace componentWillUnmount method?
Best.

First of all I want to thank you for this amazing library which is really easy to use.
We are having trouble when we layout placeholders horizontally, if we place placeholders in flexDirection: row based View, there we got some problem regarding rendering of placeholders it is kind of overlapping .
Thanks in advance.

If I call this.props.navigation.setParams({.......}); The animation does not work.

componentDidMount() {
    ......
    // Show the skeleton-placeholder
    ......
    this.props.navigation.setParams({changeFilter: 'all'});
    .....
}

"react": "16.9.0",
"react-native": "0.61.5",
"react-navigation": "^4.1.0".
"react-native-linear-gradient": "2.5.6",
"react-native-skeleton-placeholder": "2.0.1"

Thanks

I have a bunch of components that each render SkeletonPlaceholders until they receive the data they need to become actually useful.

Whenever my app is displaying multiple different SkeletonPlaceholders it becomes extremely laggy. Am I using the library wrongly or what's happening?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
index ffc2522..2814e9a 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const masked_view_1 = __importDefault(require("@react-native-community/masked-view"));
+const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"))
 const SCREEN_WIDTH = react_native_1.Dimensions.get("window").width;
 function SkeletonPlaceholder({ children, backgroundColor = "#E1E9EE", speed = 800, highlightColor = "#F2F8FC", }) {
     const [layout, setLayout] = React.useState();

This issue body was partially generated by patch-package.

When I put flex in childrens styles, the animation doesn't start

Hello!
I created a component to make a random with of skeletons:

interface RowProps extends ViewStyle {
    min: number
    max: number
    type: "%"|""
}

const Row = (props: RowProps) => {
    const { min, max, type, ...passProps } = props;

    const width = useMemo<string>(
        () => `${getRandomArbitrary(min, max)}${type}`,
        [min, max]
    );

    return <SkeletonPlaceholder.Item {...passProps} width={width} />
}

Row.defaultProps = {
    type: "%"
}

But if i add it into SkeletonPlaceholder it's don't show:

<>
    <Text>Placeholders will be here:</Text>
    <SkeletonPlaceholder>
        <Row min={50} max={80} type={""} height={10} borderRadius={2} />
        <Row min={50} max={80} type={""} height={8} borderRadius={2} />
    </SkeletonPlaceholder>
</>

How can i resove this?

Trying to integrate a minimal usage of this library into my app but it isn't working

import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

...

<>
  <SkeletonPlaceholder>
    <View>
      <Text>{name}</Text>
     </View>
  </SkeletonPlaceholder>
</>

Installed linear gradient, ran pod install, package.json:

"react-native": "0.62.2",
"react-native-linear-gradient": "^2.5.6",
"react-native-skeleton-placeholder": "^2.0.7",

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

@react-native-community/masked-view has been deprecated, it is necessary to use @react-native-masked-view/masked-view instead. If the deprecated library is used, it causes conflicts with other libraries that use the one that does have support, it happened to me in my current project in which it would not let me use react-native-skeleton-placeholder due to this same problem.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
index 314a93a..9fdd651 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const masked_view_1 = __importDefault(require("@react-native-community/masked-view"));
+const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));

This issue body was partially generated by patch-package.

It would be great to be able to toggle animation via a property.

The use case is that for a network error I'd like to keep displaying the placeholder and a retry button, but without the animation.

Something like:

<SkeletonPlaceholder animate={!hasError}>
  ...
</SkeletonPlaceholder>

Error: While trying to resolve module react-native-skeleton-placeholder from file /Card/SkeletonCard.js, the package /node_modules/react-native-skeleton-placeholder/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js. Indeed, none of these files exist:

• /node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
• /node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  at DependencyGraph.resolveDependency (/node_modules/metro/src/node-haste/DependencyGraph.js:376:17)

We recently upgraded to 3.0.2 from 2.0.11 and it seems something is definitely changed in not so good way,
So first check the video with the old version:

https://user-images.githubusercontent.com/61829970/107612046-5f3bff00-6c6b-11eb-9346-19c780614129.mov
Now check the new one, Code is the exact the same only change we have made is to update the version in package.json
https://user-images.githubusercontent.com/61829970/107612090-7a0e7380-6c6b-11eb-93a1-0d4ddf2f7e05.mp4

Please let us know if anything needs to be changed within the code to overcome this?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

My issue was that there is an outdated dependency @react-native-community/masked-view that is conflicting with the entire communiy's usage of MaskedView. Please change to use the new namespace : @react-native-masked-view/masked-view

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
index 314a93a..9fdd651 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
@@ -33,7 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const masked_view_1 = __importDefault(require("@react-native-community/masked-view"));
+const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));

This issue body was partially generated by patch-package.

I've been trying to implement se Package in my Expo project for a few days. Without success. I keep getting the same error

`
"dependencies": {

"react-native-paper": "4.9.2",

"@expo/vector-icons": "^12.0.0",

"expo-constants": "~12.1.3",

"react-native-skeleton-placeholder": "*",

"@react-native-masked-view/masked-view": "0.2.5",

"react-native-linear-gradient": "2.5.6" 

}
`

Hello everyone!

I'm assembling a Skeleton, but the page in question, is all based on the user's screen .. I take the device's height and width, and the heights and margins are all assembled in percentage. However, when trying to pass a "height =" 5% "to SkeletonPlaceholder.item, it is simply not displayed. Any way to pass percentages as an attribute?

I have a component called Loader.tsx

import React from "react";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";

type LoaderProps = {
  children: JSX.Element | JSX.Element[];
};

export default function Loader(props: LoaderProps) {
  const { children } = props;

  return (
    <SkeletonPlaceholder highlightColor="#333333" backgroundColor="#121212">
      {children}
    </SkeletonPlaceholder>
  );
}

Now I create a component contains Skeleton items

const VideoCardLoader = () => {
  return (
      <SkeletonPlaceholder.Item
        width={CardWidth}
        marginRight={CardPaddingRight}
        marginBottom={CardPaddingBottom}
      >
        <SkeletonPlaceholder.Item
          width={CardWidth}
          height={ImageHeight * ImageRatio}
          marginBottom={5}
        />
        <SkeletonPlaceholder.Item
          height={TitleFontSize}
          width={CardWidth * 0.7}
          marginBottom={5}
        />
        <SkeletonPlaceholder.Item
          height={StudiosFontSize}
          width={CardWidth * 0.4}
        />
      </SkeletonPlaceholder.Item>
  );
};

Now when I try to use it in HomeScreen, I would write

export default function HomeScreen() {
  const { data, isLoading, isError } = useHomePage();

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Loader>
          <VideoCardLoader />
        </Loader>
      </View>
    );
  }

 return <Text>Loaded....</Text>
}

Sadly this way didn't works as I expected. This should works but somehow it didn't...

Edit: After minutes of trying, I found out this way works as I expected. But the syntax looks not that good.

import React from 'react';
import { SafeAreaView, Dimensions } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const { width: windowWidth } = Dimensions.get('window');

const Loader = ({ loader: Loader }) => (
  <SkeletonPlaceholder>{Loader}</SkeletonPlaceholder>
);

const AvatarLoader = (
  <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
    <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
    <SkeletonPlaceholder.Item marginLeft={20}>
      <SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />
      <SkeletonPlaceholder.Item
        marginTop={6}
        width={80}
        height={20}
        borderRadius={4}
      />
    </SkeletonPlaceholder.Item>
  </SkeletonPlaceholder.Item>
);

const PostLoader = (
  <>
    {AvatarLoader}
    <SkeletonPlaceholder.Item width={windowWidth} height={300} marginTop={10} />
  </>
);

const App = () => {
  return (
    <SafeAreaView>
      <Loader loader={PostLoader} />
    </SafeAreaView>
  );
};

export default App;

I'm currently using react-native-paper, which has colors provided by the theme. The default theme uses rgba() colors instead of hex.

When an rgba() color is used, it returns an "Unsupported color format" error:

This only happens with highlightColor and not backgroundColor, something like this fails:

<SkeletonPlaceholder
  backgroundColor={colors.secondary}
  highlightColor={colors.secondaryContainer}
  borderRadius={4}
>

Firstly, thanks for this beautiful library,

But I am having a massive delay like 4-5 seconds before the page with skeleton loads.

RN 0.61.5
Library 4.0
MaskedView@latest

Any suggestion ?

When I mentioned speed = {400} in
<SkeletonPlaceholder speed = {400} backgroundColor = '#1e1e1e' highlightColor='#6060600'>
animation stopped working, even after re installing in my physical device its not working

my code

`if (loading) {
return (
<View style = {{height:'100%', backgroundColor:'black'}}>

<View style = {{height:150, width:'94%', marginHorizontal:'3%', marginTop: 10, borderRadius: 10}} />
<View style = {{height:150, width:'94%', marginHorizontal:'3%', marginTop: 10, borderRadius: 10}} />
<View style = {{height:150, width:'94%', marginHorizontal:'3%', marginTop: 10, borderRadius: 10}} />
<View style = {{height:150, width:'94%', marginHorizontal:'3%', marginTop: 10, borderRadius: 10}} />

  );
}`

please help me
@chramos

The border color is always black onLoading if I set the borderWidth > 0. Is there anyway to change the placeholder color if there's a borderWith in the Skeleton.Item?

undefined is not an object (evaluating 'child.type.displayName')
An error occured when i tried to use instead of using <SkeletonPlaceholder.Item> i solved this issue by adding ? every time child is required and doesn't exist in SkeletonPlaceHolder.js.
let style;
if (child?.type?.displayName === "SkeletonPlaceholderItem") { const _a = child.props, { children } = _a, styles = __rest(_a, ["children"]); style = styles; } else { style = child?.props?.style; } if (child?.props?.children) { return (<react_native_1.View key={index} style={style}> {getChildren(child.props.children)} </react_native_1.View>); }

import MaskedView from './js/MaskedView';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)

Got the following error on version 4.0.0

Unable to resolve module @react-native-community/masked-view from ... /lib/SkeletonPlaceholder.js: @react-native-community/masked-view could not be found within project

Version: 4.0.0

It prints a lot of warning messages as subject so that difficult to debug.

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
index 3c35038..41f7a8f 100644
--- a/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
+++ b/node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js
@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
+const masked_view_1 = __importDefault(require("@react-native-community/masked-view"));
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
 const SCREEN_WIDTH = react_native_1.Dimensions.get("window").width;
 function SkeletonPlaceholder({ children, backgroundColor = "#E1E9EE", speed = 800, highlightColor = "#F2F8FC", direction = "right", }) {

This issue body was partially generated by patch-package.

I'm using your library, and I want to implement something similar to the example that you put on the phone with the animation, the background above and the profile photo in the middle, with that white border. How do you do that? Can someone help me?