Skeleton Loading

The @flexnative/skeleton-loading package is a specialized UI component for React Native applications. Its primary purpose is to provide skeleton screens—placeholder versions of your user interface that appear while content is still loading.

Installation

You can installing Skeleton Loading packages using npm:

npm i @flexnative/skeleton-loading

API

import SkeletonLoader from '@flexnative/skeleton-loading';

Features

Based on its configuration, here are the key aspects of the package:

• User Experience (UX): It improves perceived performance by showing a visual representation of the layout (like gray boxes or lines where text and images will eventually be) instead of a blank screen or a simple spinner.
• SVG-Powered Animations: Unlike some skeleton loaders that rely on standard views, this package utilizes SVG animations (via react-native-svg). This often allows for more complex, performant, and fluid "shimmer" effects.
• Theme Integration: It is built to work seamlessly with the @flexnative/theme-context, meaning it can automatically adapt its colors and styles to match your application's light or dark themes.
• Performance: It is described as "performance-optimized," which is crucial for loading states to ensure that the placeholder itself doesn't lag the device while the app fetches data in the background.

Properties

info

IContentLoaderProps props extends SvgProps so any SvgProps properties are also applicable in IContentLoaderProps

Name	Type	Required	Default Value	Description
animate	boolean	false	true	Determines whether the skeleton loading components should be animated.
backgroundColor	ColorValue	false	undefined	The background color of the skeleton placeholder.
foregroundColor	ColorValue	false	undefined	The foreground (highlight) color used for the animation effect.
speed	number	false	1.2	The animation speed factor.
interval	number	false	0.25	The interval between animation cycles.
uniqueKey	string	false	random string	A unique identifier used for internal SVG elements (like Rect fill and clipPath) to avoid ID collisions.
beforeMask	React.ReactElement	false	undefined	A React element to be rendered as a mask on the loading indicator.

Playground

Live Editor

//Play with props to see live changes;

render(
  <SkeletonLoader width={'100%'} height={110} animate={true} backgroundColor='crimson' foregroundColor='#FFC436'>
    <Rect x="48" y="8" rx="3" ry="3" width="88" height="10" />
    <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" />
    <Rect x="0" y="56" rx="3" ry="3" width="100%" height="6" />
    <Rect x="0" y="72" rx="3" ry="3" width="100%" height="6" />
    <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" />
    <Circle cx="20" cy="20" r="20" />
  </SkeletonLoader>
);

Result

Loading...