react-native-load-shimmer

react-native-load-shimmer

Add a simple shimmer effect to any UI loading state. No native dependencies!

Installation

yarn add react-native-load-shimmer

Properties

Prop	Description	Required
children	React native elements that you want to apply a shimmer to	Y
isShimmering	Boolean - Dictates whether shimmer effect is occurring	Y
containerStyle	Style to apply to wrapper on shimmer component	N
shimmerConfig	Config object for shimmer effect	Y

Shimmer Config Options

Key	Description	Required	Default
skewX	Slant applied to shimmer	N	"-30deg"
gradientWidth	Width of each gradient	N	20
startX	Starting position for shimmer effect	N	Variable
duration	Duration in ms of 1 loop of shimmer effect	N	1500
useNativeDriver	Uses the native driver when true.	N	True
shimmerColor	Color of shimmer effect. Should match background of screen.	Y
toValue	Ending position of shimmer effect	N	Variable
opacityArr	Array of opacity values to create shimmer	N	[.05, .15, .25, .3, .35, .3, .25, .15, .05]

Usage

/**
 * @flow strict-local
 */

import React from 'react';
import Shimmer from 'react-native-simple-shimmer';

export default function LoadingWithShimmer({children}) {
  const shimmerConfig = {
    startingX: -200,
    useNativeDriver: true,
    shimmerColor: '#FFF',
    toValue: Dimensions.get('window').width + 100,
  };

  return (
      <SafeAreaView>
        <ScrollView
          style={styles.scrollView}>
          <Shimmer shimmerConfig={shimmerConfig} containerStyle={containerStyle} isShimmering={true}>
            {children}
          </Shimmer>
        </ScrollView>
      </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'white',
  },
});

License

MIT License. react-native-load-shimmer is under MIT license. © Kevin DeArmond 2020 - present