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 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" />
export default function BOSLoader() {
  const MaskedElement = getMaskedElement();
  return (
    <View style={styles.container}>
      <ContentLoader MaskedElement={MaskedElement} />


SVG Based Skeleton Loader - React Native Masked Loader

Download Details:

Author: salmansalary

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:

Add Comment