What is skeleton, why to use?

A skeleton is a placeholder layout that appears while the actual content of an app or webpage is loading. It provides users with a visual indication that content is being loaded, improving the perceived performance and user experience.Skeleton makes React Native apps feel faster, more polished, and user-centric.

From a UI perspective, Skeleton screens:

1. Maintain Layout: Keep the UI structure consistent while content loads.
2. Speed Perception: Make the app appear faster by showing placeholders.
3. Engage Users: Keep users visually engaged with a preview of upcoming content.
4. Guide Focus: Direct attention to where content will appear.
5. Reduce Cognitive Load: Present content in a structured way, easing the user’s processing.

To implement a skeleton loading animation in React Native, you can use several libraries, each with its own features and usage. Here is the example using react-native-skeleton-placeholder

Step 1: Install the Required Package

npm install @react-native-masked-view/masked-view react-native-linear-gradient --save

npm install react-native-skeleton-placeholder

Step 2 : Basic Usage Example

import React from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const DATA = Array(10).fill({});

const ItemSkeleton = () => (
  <SkeletonPlaceholder>
    <View style={styles.item}>
      <View style={styles.avatar} />
      <View style={styles.textContainer}>
        <View style={styles.title} />
        <View style={styles.subtitle} />
      </View>
    </View>
  </SkeletonPlaceholder>
);

const App = () => {
  const renderItem = () => <ItemSkeleton />;

  return (
    <FlatList
      data={DATA}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 20,
  },
  textContainer: {
    flex: 1,
  },
  title: {
    width: '60%',
    height: 20,
    borderRadius: 4,
    marginBottom: 6,
  },
  subtitle: {
    width: '40%',
    height: 20,
    borderRadius: 4,
  },
});

export default App;

Explanation:

• SkeletonPlaceholder: This is the main component that wraps around the content you want to display as a placeholder.
• ItemSkeleton: This function represents a single skeleton item. It consists of an avatar and two lines of text to mimic a typical list item.
• FlatList: The FlatList component is used to display a list of skeleton items, simulating the loading of multiple list items.

Step 3: Customize the Placeholder

You can customize the placeholder by changing the shapes, sizes, colors, and animations. For example, you can change the colors to match your app’s theme or add a gradient effect.

<SkeletonPlaceholder backgroundColor="#e1e9ee" highlightColor="#f2f8fc">
  {/* Placeholder content */}
</SkeletonPlaceholder>

Step 4: Replace Skeleton with Actual Content

Once your data has loaded, you can replace the skeleton placeholders with the actual content. Typically, you’d use conditional rendering to display either the skeleton or the real data depending on the loading state.

const App = () => {
  const [isLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    // Simulate a network request
    setTimeout(() => setIsLoading(false), 2000);
  }, []);

  const renderItem = ({ item }) => {
    if (isLoading) {
      return <ItemSkeleton />;
    }

    return (
      <View style={styles.item}>
        <View style={styles.avatarContainer}>
          <Text>{item.initials}</Text>
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.subtitle}>{item.subtitle}</Text>
        </View>
      </View>
    );
  };

  return (
    <FlatList
      data={isLoading ? DATA : realData}
      renderItem={renderItem}
      keyExtractor={(item, index) => index.toString()}
    />
  );
};

Output

Conclusion

Using react-native-skeleton-placeholder allows you to create visually appealing loading states in your React Native app, enhancing the user experience by making data loading times less noticeable. Customize it to fit your app’s design and use it wherever you have loading data.

Happy Coding!!