New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@hamidfzm/react-native-skeleton-loader

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hamidfzm/react-native-skeleton-loader

Simple skeleton loaders for React Native

  • 0.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7
decreased by-66.67%
Maintainers
1
Weekly downloads
 
Created
Source

React Native Skeleton Loader

This is a simple library for implementing skeleton loading in React Native (Expo-compatible). There are a handful of libraries for this, but I made this out of necessity as I was unable to find a library that allowed dynamically sized skeletons based on the content instead of specifying a static size.

Installation

npm

npm install --save @hamidfzm/react-native-skeleton-loader

yarn

yarn add @hamidfzm/react-native-skeleton-loader

Usage

Include the component

import Skeleton from "@hamidfzm/react-native-skeleton-loader";

Wrap some text

text-example

<Skeleton loading={loading}>
	<Text>Example Text</Text>
</Skeleton>
<Skeleton loading={isLoading} lines={6}>
	<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
</Skeleton>
  • Text elements can be wrapped without anything more than a loading prop.
  • Multi-line text can be enabled by specifying a lines value of more than 1.
    • lines count will split up the total height across all lines

Wrap something a little more complicated

enter image description here

// see example folder
<View style={styles.card} key={index}>
  <View style={styles.cardHeader}>
    <Skeleton loading={isLoading} type={"circle"} widthVariance={0}>
      <View style={styles.avatar}>
        <Text style={styles.avatarText}>AK</Text>
      </View>
    </Skeleton>
    <View style={{ marginRight: 16 }} />
    <View>
      <Skeleton loading={isLoading} width={150}>
        <Text>Shrimp and Chorizo Paella</Text>
      </Skeleton>
      <Skeleton loading={isLoading} width={100}>
        <Text>September 14, 2016</Text>
      </Skeleton>
    </View>
  </View>
  <Skeleton loading={isLoading} type={"rect"} widthVariance={0}>
    <View style={styles.cardImage}>
      <Image source={paellaImage} style={{ flex: 1 }} />
    </View>
  </Skeleton>
  <View style={styles.cardContent}>
    <Skeleton loading={isLoading} lines={3}>
      <Text>
        This impressive paella is a perfect party dish and a fun meal
        to cook together with your guests. Add 1 cup of frozen peas
        along with the mussels, if you like.
      </Text>
    </Skeleton>
  </View>
</View>
  • The type property can display either text, circle, or rect
  • For a static shape, you most likely want widthVariance to be be set to 0 (default is 20) so the width doesn't change.

Props

PropDefaultTypeDescription
loadingrequiredboolean Should the skeleton display loading.
typetextstring Determines the type of skeleton to display.
["text", "circle", "rect"]
color#9ec0c4hex colorColor of loader.
widthnullnumberStatic width of loader component. null value will default to size of child.
widthVariance20numberRandom variance in loader width as a percentage.
heightnullnumberStatic height of loader component. null value will default to size of child.
heightVariance20numberRandom variance in loader height as a percentage.
pulseSpeed1000numberPulse speed in milliseconds.
lines1numberNumber of lines to split height into.

Keywords

FAQs

Package last updated on 03 May 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc