Getting Started

Integrate skeletons into your react-native project quickly and easily using Skel UI in minutes.

Install package

Install Skel UI into your project via command line.

npm install @skel-ui/react-native

Add Skel Provider

Wrap your application with Skel UI provider.

import * as Skel from "@skel-ui/react-native";
 
export default function App() {
  return <Skel.Provider> ... </Skel.Provider>;
}

Implement Skel UI

Consider a PostCard component that shows a spinner while the data is being fetched.

import RN from "react-native";
 
export default function PostCard() {
  const { post, isLoading } = usePost();
 
  return isLoading ? (
    <Spinner />
  ) : (
    <RN.View style={styles.card}>
      <RN.Image src={post?.image} style={styles.cardImage} />
      <RN.Text sw="65%" style={styles.cardTitle}>
        {post?.title}
      </RN.Text>
      <RN.Text numberOfLines={3} style={styles.cardDescription}>
        {post?.description}
      </RN.Text>
    </RN.View>
  );
}
 
const styles = RN.StyleSheet.create({
  card: {
    width: 320,
    padding: 10,
    marginHorizontal: "auto",
    borderWidth: 1,
    borderColor: "#e2e8f0",
    borderRadius: 8,
  },
  cardImage: {
    borderRadius: 4,
    aspectRatio: 800 / 530,
  },
  cardTitle: {
    marginTop: 16,
    marginBottom: 8,
    fontSize: 24,
    lineHeight: 28,
    fontWeight: 800,
  },
  cardDescription: {
    fontSize: 14,
    lineHeight: 20,
  },
});

Let's replace the spinner loading with skeleton loading. To accomplish this, just follow two steps:

Replace the ternary operator with <Skel.Root>.
Substitute your react-native elements with Skel UI elements (e.g., RN.Text becomes Skel.Text).

import * as Skel from "@skel-ui/react-native";
import RN from "react-native";
 
export default function PostCard() {
  const { post, isLoading } = usePost();
 
  return (
    <Skel.Root isLoading={isLoading}>
      <RN.View style={styles.card}>
        <Skel.Image src={post?.image} style={styles.cardImage} />
        <Skel.Text sw="65%" style={styles.cardTitle}>
          {post?.title}
        </Skel.Text>
        <Skel.Text numberOfLines={3} style={styles.cardDescription}>
          {post?.description}
        </Skel.Text>
      </RN.View>
    </Skel.Root>
  );
}
 
const styles = RN.StyleSheet.create({
  card: {
    width: 320,
    padding: 10,
    marginHorizontal: "auto",
    borderWidth: 1,
    borderColor: "#e2e8f0",
    borderRadius: 8,
  },
  cardImage: {
    borderRadius: 4,
    aspectRatio: 800 / 530,
  },
  cardTitle: {
    marginTop: 16,
    marginBottom: 8,
    fontSize: 24,
    lineHeight: 28,
    fontWeight: 800,
  },
  cardDescription: {
    fontSize: 14,
    lineHeight: 20,
  },
});

You'll notice the loading: and loaded: variants in the Tailwind classes. Learn more about them on the next page.

Getting Started

Install package

Add Skel Provider

Implement Skel UI

‌

On this page