Component
Skeleton
Shimmer placeholders that keep layouts stable while data loads.
Preview
How to use
Compose the three primitives to mirror your real layout.
ProfileLoading.tsx
import { Skeleton, SkeletonText, SkeletonCard } from "react-native-foonto";
import { View } from "react-native";
export function ProfileLoading() {
return (
<View style={{ gap: 20, padding: 16 }}>
{/* Avatar + name row */}
<View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
<Skeleton circle height={48} />
<Skeleton width={160} height={16} radius={6} />
</View>
{/* A paragraph of text */}
<SkeletonText lines={3} spacing={10} lastLineWidth="55%" />
{/* A full media card */}
<SkeletonCard mediaHeight={180} animation="wave" />
</View>
);
}Props
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | `${number}%` | '100%' | Width in px or a percent string. |
height | number | 16 | Height in px (diameter when circle). |
radius | number | — | Corner radius. Ignored when circle is true. |
circle | boolean | false | Render as a circle (avatar). |
colors | [string, string] | — | Two-stop colors: [base, highlight]. |
duration | number | — | Animation cycle duration in ms. |
animation | 'shimmer' | 'wave' | 'pulse' | 'none' | 'shimmer' | Which shimmer style to use. |
style | FoontoStyle | — | Style for the placeholder. |
SkeletonText(also accepts animation, colors, duration, style)
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Number of lines. |
lineHeight | number | 12 | Height of each line. |
spacing | number | 10 | Vertical gap between lines. |
lastLineWidth | number | `${number}%` | '60%' | Width of the final (short) line. |
SkeletonCard(also accepts animation, colors, duration, style)
| Prop | Type | Default | Description |
|---|---|---|---|
mediaHeight | number | 160 | Height of the media block at the top of the card. |
AI prompt
Install the library, then paste this into your AI coding agent to wire it up.
AI prompt
Add loading skeletons to my React Native app using the `react-native-foonto` library. 1. Make sure `react-native-foonto`, `react-native-reanimated`, and `expo-linear-gradient` are installed. 2. Identify the screen(s) that fetch data and currently show a blank state or spinner while loading. 3. Import `Skeleton`, `SkeletonText`, and `SkeletonCard` from `react-native-foonto`. 4. Build a loading component that mirrors the real layout: use `Skeleton circle` for avatars, `Skeleton` blocks for short fields, `SkeletonText` for paragraphs, and `SkeletonCard` for media cards. 5. Render the skeleton while `isLoading` is true, then swap in the real content. Keep the skeleton's dimensions close to the real content so nothing jumps. 6. Use `animation="shimmer"` (or `"wave"`) and keep a single consistent `duration` across the screen. 7. Do not animate skeleton opacity on the JS thread — the library handles the shimmer on the UI thread.