SVG Based Skeleton Loader – React Native Masked Loader

A React Native component to create smooth content and skeleton loader in mobile app.

Based on react-native-masked-view and react-native-svg.

Install & Import:

# Yarn
$ yarn add react-native-masked-loader react-native-masked-view react-native-svg

# NPM
$ npm i react-native-masked-loader react-native-masked-view react-native-svg --save

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Rect } from 'react-native-svg';
import ContentLoader from 'react-native-masked-loader';

Basic Usage:

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fafafa',
    padding: '35px 24px 0 24px',
    height: 300,
  }
});
function getMaskedElement() {
  return (
    <Svg height={250} width="100%" fill={'black'}>
      <Rect x="0" y="0" rx="8" ry="8" width="50%" height="16" />
      <Rect x="0" y="30" rx="9" ry="9" width="100%" height="128" />
      <Rect x="0" y="172" rx="4" ry="4" width="100%" height="8" />
      <Rect x="0" y="188" rx="4" ry="4" width="100%" height="8" />
      <Rect x="0" y="204" rx="4" ry="4" width="100%" height="8" />
    </Svg>
  );
}
export default function BOSLoader() {
  const MaskedElement = getMaskedElement();
  return (
    <View style={styles.container}>
      <ContentLoader MaskedElement={MaskedElement} />
    </View>
  );
}

Preview:

Download Details:

Author: salmansalary

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/salmansalary/react-native-masked-loader

License: MIT