tomzaku / react-native-shimmer-placeholder

Placeholder/ Skeleton of React Native

React Native Shimmer Placeholder

Placeholder for both IOS and Android

Get Started

Installation

npm i react-native-shimmer-placeholder --save

or

yarn add react-native-shimmer-placeholder

Usage

Simple

For expo

import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
import { LinearGradient } from 'expo-linear-gradient';

const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient)

<ShimmerPlaceHolder />
<ShimmerPlaceHolder visible={isFetched}>
  <Text>
    Wow, awesome here.
  </Text>
</ShimmerPlaceHolder>

or

import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'
import { LinearGradient } from 'expo-linear-gradient';


<ShimmerPlaceHolder LinearGradient={Linear} />
<ShimmerPlaceHolder visible={isFetched} LinearGradient={Linear}>
  <Text>
    Wow, awesome here.
  </Text>
</ShimmerPlaceHolder>

For react-native-linear-gradient

import LinearGradient from 'react-native-linear-gradient';
import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'

const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient)

...

<ShimmerPlaceHolder />

or

import LinearGradient from 'react-native-linear-gradient';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'

...

<ShimmerPlaceHolder
  LinearGradient={LinearGradient}
/>

Connect more components

import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
import LinearGradient from 'react-native-linear-gradient';

const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient)
const FacebookContent = () => {

  // Handle animation
  const avatarRef = React.createRef()
  const firstLineRef = React.createRef()
  const secondLineRef = React.createRef()
  const thirdLineRef = React.createRef()

  React.useEffect(() => {
    const facebookAnimated = Animated.stagger(
      400,
      [
        avatarRef.current.getAnimated(),
        Animated.parallel([
          firstLineRef.current.getAnimated(),
          secondLineRef.current.getAnimated(),
          thirdLineRef.current.getAnimated()
        ])
      ]
    );
    Animated.loop(facebookAnimated).start();
  }, [])

  return (
    <View>
      <View style={{ flexDirection: "row" }}>
        <ShimmerPlaceholder
          ref={avatarRef}
          stopAutoRun
        />
        <View style={{ justifyContent: "space-between" }}>
          <ShimmerPlaceholder
            ref={firstLineRef}
            stopAutoRun
          />
          <ShimmerPlaceholder
            ref={secondLineRef}
            stopAutoRun
          />
          <ShimmerPlaceholder
            ref={thirdLineRef}
            stopAutoRun
          />
        </View>
      </View>
    </View>
  )
}

More Detail see this

Props

Prop	Description	Type	Default
LinearGradient	Linear Gradient components ('react-native-linear-gradient' or 'expo-linear-gradient')	Component	undefined
visible	Visible child components	boolean	false
style	Container Style	Style	{backgroundColor: '#ebebeb',overflow: 'hidden'}
shimmerStyle	Shimmer Style only	Style	{}
contentStyle	Content Style when visible	Style	{}
location	Locations of shimmer	number[]	[0.3, 0.5, 0.7]
width	Width of row	number	200
duration	Duration of shimmer over a row	number	1000
height	Height of row	number	15
shimmerWidthPercent	Percent of shimmer width	number	1.0
isReversed	Reverse direction of animation	boolean	false
stopAutoRun	Stop running shimmer animation at beginning	boolean	false
isInteraction	Defines whether or not the shimmer animation creates an interaction handle on the InteractionManager	boolean	true
shimmerColors	Colors of the shimmer.	string[]	['#ebebeb', '#c5c5c5', '#ebebeb']
containerProps	Props passed to the outermost View	ViewProps	undefined
shimmerContainerProps	Props passed to the View which contains the loading animation	ViewProps	undefined
childrenContainerProps	Props passed to the View which contains the children	ViewProps	undefined

Methods

Method	Description	Type
getAnimated	get Animated of Placeholder	Animated

Helpers

createShimmerPlaceholder

/**
 * To create ShimmerPlaceholder by Linear Gradient. Only useful when you use 3rd party,
 * For example: react-native-linear-gradient
 * @param {Linear Gradient Component} LinearGradient - 'expo-linear-gradient' by default
 *
 * @example
 *
 * import LinearGradient from 'react-native-linear-gradient';
 * import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder'
 *
 * const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient)
 *
 * ...
 *
 * <ShimmerPlaceHolder />
 */

Contribute

Welcome help me to build this awesome lib.

License

MIT

react-native-shimmer-placeholder's Issues

Shimmer crashes on expo SDK 41

Just importing and starting the component with breaks the app. It won't even render!

Using Expo SDK 41 with expo-linear-gradient.

Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code:

when giving Flatlist data large array and using multiple ShimmerPlaceHolder then this error occur.

If array length is small( Flatlist data) or less number of ShimmerPlaceHolder used then I doesn't get this warning

<FlatList showsVerticalScrollIndicator={false} // keyExtractor={item => item.id} contentContainerStyle={{paddingBottom: 30}} style={{paddingHorizontal: 16}} data={[...Array(10).keys()]} // Generate an array of 10 items ItemSeparatorComponent={() => <View style={{height: 14}} />} renderItem={({index}) => ( <Button key={index} style={s.list_container}> <ShimmerPlaceHolder style={{ width: 60, height: 60, marginRight: 16, borderRadius: width * 0.25, }} LinearGradient={LinearGradient} /> <View style={{flex: 1, rowGap: 16}}> <ShimmerPlaceHolder style={{width: '90%'}} LinearGradient={LinearGradient} /> <ShimmerPlaceHolder style={{width: '90%'}} LinearGradient={LinearGradient} /> </View> <View style={s.btn_container}> <ShimmerPlaceHolder LinearGradient={LinearGradient} style={s.btn_shimmer} /> <ShimmerPlaceHolder LinearGradient={LinearGradient} style={s.btn_shimmer} /> <ShimmerPlaceHolder LinearGradient={LinearGradient} style={s.btn_shimmer} /> </View> </Button> )} />

BackGroundColor

Backgroundcolor is not working

Please clarify licensee for this Code

@tomzaku this is amazing, please clarify licensee for this code, hopefully MIT.

Image Loading Twice

Hello, I am not sure if I am doing something wrong, but basically I noticed images are loading twice before being presented. So in my case I see a flash of white in between showing the placeholder and the actual image.

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isLoaded: false };
  }

  handleLoad(event) {
    console.log(event.nativeEvent.loaded === event.nativeEvent.total)
  }

  render() {
    const { isLoaded } = this.state;

    return (
      <View style={styles.container}>
      <ShimmerPlaceHolder
        width={200}
        height={200}
        style={{ width: 200, height: 200, borderRadius: 100 }}
        visible={isLoaded}
        backgroundColorBehindBorder={'white'}
      >
        <Image
          style={{ width: 200, height: 200, borderRadius: 100 }}
          source={{ uri: 'https://images.pexels.com/photos/2082087/pexels-photo-2082087.jpeg?cs=srgb&dl=apartment-bed-bedroom-2082087.jpg&fm=jpg' }}
          onLoad={() => { this.setState({ isLoaded: true }); }}
          onProgress={ this.handleLoad.bind(this) }
        />
      </ShimmerPlaceHolder>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

As you can see I added an onProgress on the image that only logs if the image is done loading. If you run the above code you can see false 266 times, then a true, then you see false again another 266 times and then another last true

Image does not load

When you wrap an image with ShimmerPlaceholder, image does not load so you cannot use image's onLoad prop. I don't know what is wrong.

borderRadius without effecting inner content

How do you go about having a placeholder with rounded edges, but do not wish to have rounded edges on the inner content once visible becomes true?

Expo 40 changes global variables

Your project is accessing the following APIs from a deprecated global rather than a module import: LinearGradient (expo-linear-gradient).

The global "__expo" and "Expo" objects will be removed in SDK 41. Learn more about how to fix this warning: https://expo.fyi/deprecated-globals

NSMutableDictionary cannot be converted to a YGValue

Gathering the error below on trying the getting start example

system:

os: macOS Big Sur

package.json
{
  "name": "app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@aws-sdk/client-eventbridge": "^3.17.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-navigation/bottom-tabs": "^6.0.0-next.3",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "@reduxjs/toolkit": "^1.5.1",
    "aws-amplify": "^3.4.0",
    "moment": "^2.29.1",
    "react": "17.0.1",
    "react-native": "0.64.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.0.1",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.0.0",
    "react-native-shimmer-placeholder": "^2.0.7",
    "react-native-toast-message": "^1.4.9",
    "react-native-vector-icons": "^8.1.0",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.20",
    "@types/react-native": "^0.64.0",
    "@types/react-native-vector-icons": "^6.4.6",
    "@types/react-test-renderer": "^16.9.2",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

app.tsx
const CategoryProductsHorizontalList: React.FC<DepartmentProductsHorizontalListProps> = ({department}: DepartmentProductsHorizontalListProps) => {

    // Handle animation
    const avatarRef = React.createRef()
    const firstLineRef = React.createRef()
    const secondLineRef = React.createRef()
    const thirdLineRef = React.createRef()

    React.useEffect(() => {
        const facebookAnimated = Animated.stagger(
            400,
            [
                avatarRef.current.getAnimated(),
                Animated.parallel([
                    firstLineRef.current.getAnimated(),
                    secondLineRef.current.getAnimated(),
                    thirdLineRef.current.getAnimated()
                ])
            ]
        );
        Animated.loop(facebookAnimated).start();
    }, [])

    return (
        <View>
            <View style={{ flexDirection: "row" }}>
                <ShimmerPlaceholder
                    ref={avatarRef}
                    stopAutoRun
                />
                <View style={{ justifyContent: "space-between" }}>
                    <ShimmerPlaceholder
                        ref={firstLineRef}
                        stopAutoRun
                    />
                    <ShimmerPlaceholder
                        ref={secondLineRef}
                        stopAutoRun
                    />
                    <ShimmerPlaceholder
                        ref={thirdLineRef}
                        stopAutoRun
                    />
                </View>
            </View>
        </View>
    )
}

question: this project is dead?

Unable to resolve module 'expo'

This code is throwing an error on require( 'expo' ).LinearGradient even if module_exist returns false (I don't have expo) .. I tried to fix this and do a PR but with no success ..

// https://gist.github.com/FGRibreau/3135914
function module_exist(name){
  try{require(name);} catch(err){if(err.code === 'MODULE_NOT_FOUND'){return false;}}
  return true;
};

const LinearGradient = module_exist( 'expo' ) ? require( 'expo' ).LinearGradient : require( 'react-native-linear-gradient' )

I will do a temporary fix for the moment !

Memory leak

Hi,

I noticed that when I run my app with this library the memory consumption increase over time until app crashes. This happens only when autoRun = true

Any idea ?

remove react-native-linear-gradient as dependency

this could cause this problem below

react-native-linear-gradient/react-native-linear-gradient#230

It's possible reset animation?

Hi I need reset animation with action, this it's possible? I try to change state visible but don't have success.

Thanks

Performance issue

I tried to add autoRun to Shimmer, but it drop so much js frame.

Two picture compare autoRun is true and false

autoRun = true

autoRun = false

Shimmer animation is not working properly when i refresh list

When i refresh flatlist the shimmer's animating is not playing properly. but its working first time . please let me know where i was wrong.

NSMutableDictionary cannot be converted to a YGValue

When i updated the package to its latest version starts encountering below error

JSON value '{x = 2; y = “0.5"; }' of type NSMutableDicitionary cannot be converetd to a YG Value

But looks like changing the start and end with startPoint and endPoint respectively in below code(in ShimmerPlaceholder.js) fixed the issue.

<LinearGradient
          colors={shimmerColors}
          style={{ flex: 1, width: width * shimmerWidthPercent }}
          start={{
            x: -1,
            y: 0.5,
          }}
          end={{
            x: 2,
            y: 0.5,
          }}
          locations={location}
        />

Update : After renaming the props it stopped animating.

Image is not hidden when visible={false}

Steps to reproduce:

1. react-native init shimmer
2. npm i react-native-linear-gradient --save
3. npm i react-native-shimmer-placeholder --save
4. pod install

Change App.js to this.

The bug: as seen in the attached video, the images are shown while the placeholder is shown.
Expected: the images will be shown only when visible={true}

Image shown video.zip

Shimmer container is rendered even with null / false children

I'm experiencing a situation where the shimmer is container View is rendered even when the children is null / false.
I expected the shimmer container view not to be rendered when children is null / false.
This causes the shimmer to reserve space according to its height and width even when there is nothing to render.

Example JSX:

<ShimmerPlaceholder visible={!loading}>
  {Boolean(data) && <Text>{data}</Text>}
</ShimmerPlaceholder>

In case where loading is false but data is falsy, this JSX render an empty View. I think it would be better to not render anything in this case. I think this could be changed by adding the following code to the BaseShimmerPlaceholder

if (visible && (children === null || children === false)) {
  return null
}

Is this an issue or a design decision that has been made? Is my proposed fix feasible or are there some issues with it?

LinearGradient colors and locations props should be arrays of the same length (Warning)

[iOS] Shimmer does not reset back to the start position

I'm seeing this odd issue where an autorun shimmer is not resetting to the start position after the first round.

The setup is pretty basic with the exception of linear-gradient being linked manually in Xcode:

<View>
  <ShimmerPlaceHolder
    style={{ width: 100 }}
    duration={1000}
    autoRun={true}/>
  <ShimmerPlaceHolder
    style={{ width: 100 }}
    duration={2000}
    autoRun={true}/>
</View>

and these are running against RN (0.48.1) and React Fiber (16.0.0-alpha.12) with react-native-linear-gradient version 2.3.0 and version 1.0.13 of this module running on iOS simulator (iPhone 7, iOS 10.3)

I would appreciate it if you can look into this to see if it is reproducible.

The dependency to react-native-linear-gradient should be in package.json

Prepare next version

• Add type for typescript
• Add component for parallel animation
• Add component for sequence animation
• Add more styles
• Convert to hooks

Change Color of the Component

Hi,

My app has a nice blue color (like a dark theme)

I want to change the color from white to another darker.

But, I'm trying to use the properties in style props, but it doesn't work.

Can you help me?

Code example

<View style={{ height: 500, justifyContent: 'space-between', alignItems: 'center' }}>
  {[...new Array(10)].map((item, key) => {
    return (
      <View key={key} style={{ margin: 10 }}>
        <ShimmerPlaceHolder style={{ margin: 5 }} autoRun width={40} height={10} />
        {/* just for example */}
        <ShimmerPlaceHolder style={{ backgroundColor: 'red', overflow: 'hidden', margin: 5, borderRadius: 17 }} autoRun width={380} height={40} />
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <ShimmerPlaceHolder style={{ margin: 5 }} autoRun width={40} height={10} />
          <ShimmerPlaceHolder style={{ margin: 5 }} autoRun width={40} height={10} />
        </View>
      </View>
    );
  })}
</View>

Placeholder animations block flatlist from rendering items

Hi!

In a project I'm working on there's some screens which are always mounted. Before the user has focused these screens, there's a shimmer being rendered. An other screen has a flatlist, and it only renders the initial number of items and then whitespace for the next items. I searched around and it was related to this issue: facebook/react-native#15734

As stated there, an Animation registers as an interaction on the InteractionManager, and the VirtualizedList uses InteractionManager.runAfterInteractions() to render the next items in the list when scrolling. This means, if there's a placeholder running in a loop somewhere, your list doesn't render other items when scrolling.

I have a proposed PR which adds a prop to the shimmer placeholder, isInteraction. Default value is true so nothing of the existing behaviour changes

Cannot borden placeholder when use border style

Documentation should be updated

Hi, I think the documentation should be updated.
LinearGradient should be imported as named import instead of Default import.

so this one should be changed:
import LinearGradient from 'expo-linear-gradient';
to:
import { LinearGradient } from 'expo-linear-gradient';

Typescript error.

node_modules/react-native-shimmer-placeholder/index.d.ts:19:5 - error TS1038: A 'declare' modifier cannot be used in an already ambient context.

19 declare class MyComponent extends React.Component<Props, any> {}
~~~~~~~

###############
react-native-shimmer-placeholder: 1.0.34
tsc version: 3.4.5

Remove declare seems fixed the issue.

Flickering with LayoutAnimation?

So I am using this library on a page. And a button on this page triggers a LayoutAnimation when tapped. The button's animation is fine, but when LayoutAnimation is triggered, all the components wrapped by this library flickers. Is there a reason why?

Make gradient component injectable

It would be useful to be able to provide the gradient component similar to how redux-persist asks you to pass in the storage API: https://github.com/rt2zz/redux-persist#v6-upgrade

Not so much an issue but expansion on this

I wanted this package to delay between animations - I ended up changing the getAnimated function if anybody else wants to use this for their projects!

I now can use this on buttons where i want a little more pop.

getAnimated = () => {
   const { delay, duration, isInteraction } = this.props;

// Create sequence using delay within to pause between animations
   return Animated.loop(
     Animated.sequence([
       Animated.delay(delay),
     Animated.timing(this.state.beginShimmerPosition, {
       toValue: 1,
       delay,
       duration,
       useNativeDriver: Platform.OS !== "web",
       isInteraction,
     })
   ])
   );
 };

App Crashes

We are using
React Version: 0.63
Wix React Navigation
But app always gets crashed when we use the plugin.

Below is the crash log generated

java.lang.IllegalStateException: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 407
detail: View tag:409
children(0): [
],
viewsToAdd(1): [
[0,407],
],

Code Wrote

import` ShimmerPlaceHolder from 'react-native-shimmer-placeholder'
<ShimmerPlaceHolder>
                <Text>Hiii</Text>
  </ShimmerPlaceHolder>

Complete Crash Log

 --------- beginning of crash
2020-10-16 18:24:41.048 16474-16474/com.truedriver E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.truedriver, PID: 16474
    java.lang.IllegalStateException: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 407
     detail: View tag:409
      children(0): [
     ],
      viewsToAdd(1): [
    [0,407],
     ],
    
        at com.facebook.react.bridge.ReactContext.handleException(ReactContext.java:390)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:31)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
        at android.view.Choreographer.doCallbacks(Choreographer.java:723)
        at android.view.Choreographer.doFrame(Choreographer.java:655)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
        at android.os.Handler.handleCallback(Handler.java:790)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:164)
        at android.app.ActivityThread.main(ActivityThread.java:6626)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:811)
     Caused by: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 407
     detail: View tag:409
      children(0): [
     ],
      viewsToAdd(1): [
    [0,407],
     ],

When shimmer container width is very long it takes about 10 seconds for component to mount

We have a track bar for playing audio much like this: https://help.apple.com/assets/61B370B8020DEA0A024710E6/61B370BA020DEA0A02471109/en_US/1b6dbda86aadb5ccfce6a15001317c1b.png

While the track was loading the waveform we wanted the whole track to shimmer. However because the track length is very long ( 5000px), loading the component seems to take very long. Why does the width of the shimmer container affect how long the component takes to be mounted? And is there a way to get around it? Thank you!

`alignSelf: 'stretch'` doesn't work

Example,

import React from 'react'
import { View } from 'react-native'
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'

const SomeComponent = () => (
  <View style={{ flex: 1 }}>
    <ShimmerPlaceHolder style={{ height: 60, alignSelf: 'stretch' }} />
  <View />
)

Expected outcome

• A shimmer placeholder is shown with height of 60 and width = width of screen

Actual outcome

• A shimmer placeholder is show with a height of 60 and width of HALF of screen

Expo?

Hey, Does this work with expo, as expo also gives linear gradient component without native linking

Try to adding transform for animated

jest test case failed

console.error
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PanelListShimmer`.
    at PanelListShimmer
    at renderEmptyComponent
    at View
    at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockComponent.js:28:18)
    at RCTScrollView
    at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockNativeComponent.js:17:18)
    at ScrollViewMock (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockScrollView.js:21:52)
    at VirtualizedListContextProvider (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/Libraries/Lists/VirtualizedListContext.js:92:3)
    at VirtualizedList (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/Libraries/Lists/VirtualizedList.js:680:29)
    at FlatList (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/Libraries/Lists/FlatList.js:407:36)
    at PanelList (/home/ics-016/Documents/ICS/revolt-summit/src/modules/home/views/PanelList.tsx:29:53)
    at View
    at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockComponent.js:28:18)
    at RCTScrollView
    at Component (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockNativeComponent.js:17:18)
    at ScrollViewMock (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-native/jest/mockScrollView.js:21:52)
    at LinearGradient
    at Home (/home/ics-016/Documents/ICS/revolt-summit/src/modules/home/views/Home.tsx:33:11)
    at Provider (/home/ics-016/Documents/ICS/revolt-summit/node_modules/react-redux/lib/components/Provider.js:19:3)

  16 |         return (
  17 |           <View key={index}>
> 18 |             <ShimmerPlaceHolder
     |             ^
  19 |               key={index}
  20 |               style={[
  21 |                 styles.container,

Make shimmer smoother

Hi there, The package is working great so thanks for all your hard work. However, I noticed that the "shimmer" was quite rough. Is there anyway to make this look smoother?

Thanks

Dan

borderRadius not working properly

The borderRadius style when applied doesn't set the correct border radius

App Crash

I have installed the plugin in my project having react version 0.63.

I was trying to working with this and writ following code. But app crashes each time.
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder'

Testing

Anything wrong i am doing? Please update.