expo-skeleton-component
v1.0.2
Published
<h2 align="left">Skeleton for react native and web with the latest react-native-reanimated v3</h2>
Downloads
34
Maintainers
Readme
React native reanimated skeleton, a simple yet fully customizable component made to achieve loading animation in a Skeleton-style. Works for iOS, Android and web.
Installation
npm install expo-skeleton-component
Usage
- Import react-native-reanimated-skeleton:
import Skeleton from "expo-skeleton-component";
- Once you create the Skeleton, you have two options:
- Child Layout : The component will figure out the layout of its bones with the dimensions of its direct children.
<Skeleton isLoading={true} containerStyle={styles.container}>
<Text style={styles.normalText}>Your content</Text>
<Text style={styles.bigText}>Other content</Text>
</Skeleton>
- Custom Layout : You provide a prop
layout
to the component specifying the size of the bones (see the Examples section below). Below is an example with a custom layout. A key prop for each child is optional but highly recommended.
export default function Placeholder() {
return (
<Skeleton
containerStyle={{ flex: 1, width: 300 }}
isLoading={false}
layout={[
{ key: "someId", width: 220, height: 20, marginBottom: 6 },
{ key: "someOtherId", width: 180, height: 20, marginBottom: 6 },
]}
>
<Text style={styles.normalText}>Your content</Text>
<Text style={styles.bigText}>Other content</Text>
</Skeleton>
);
}
- Then simply sync the prop
isLoading
to your state to show/hide the Skeleton when the assets/data are available to the user.
export default function Placeholder () {
const [loading, setLoading] = useState(true);
return (
<Skeleton
containerStyle={{flex: 1, width: 300}}
isLoading={isLoading}>
{...otherProps}
/>
)
}
Props
| Name | Type | Default | Description | | ------------------ | ---------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | isLoading | bool | required | Shows the Skeleton bones when true | | layout | array of objects | [] | A custom layout for the Skeleton bones | | duration | number | 1200 ms | Duration of one cycle of animation | | containerStyle | object | flex: 1 | The style applied to the View containing the bones | | easing | Easing | bezier(0.5, 0, 0.25, 1) | Easing of the bones animation | | animationType | string | "shiver" | The animation to be used for animating the bones (see demos below) | | animationDirection | string | "horizontalRight" | Used only for shiver animation, describes the direction and end-point (ex: horizontalRight goes on the x-axis from left to right) | | boneColor | string | "#E1E9EE" | Color of the bones | | highlightColor | string | "#F2F8FC" | Color of the highlight of the bones |