Expo Shimmer Placeholder

Placeholder for both IOS and Android

Get Started

Fork of https://www.npmjs.com/package/react-native-shimmer-loading to only require expo-linear-gradient as react-native-linear-gradient was causing issues

Installation

npm i expo-shimmer-placeholder --save

or

yarn add expo-shimmer-placeholder

Usage

Simple

import { createShimmerPlaceHolder } from 'expo-shimmer-placeholder'
import { LinearGradient } from 'expo-linear-gradient'
const ShimmerPlaceHolder = createShimmerPlaceHolder(LinearGradient)


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

Connect more components

More Detail see this

Props

Prop	Description	Type	Default
LinearGradient	Linear Gradient components ('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

Contribute

Welcome help me to build this awesome lib.

License

MIT