Adding a Shimmer Effect in React Native

In my previous article, I discussed implementing a pull-to-refresh feature in a React Native app using Reanimated and Lottie. Now, let's take it a step further and enhance the UI by integrating a shimmer effect while the data is loading.

---

---

Why Use a Shimmer Effect?

A shimmer effect, also known as a skeleton loader, improves user experience by displaying a placeholder while the actual content is being fetched. It provides a smooth transition between loading and displaying real data, making the app feel more responsive.

---

Integrating react-native-skeleton-placeholder

We will use the react-native-skeleton-placeholder package to create a shimmer effect. First, install the package using:

npm install react-native-skeleton-placeholder

---

Implementing the Skeleton Loader

Below is the function that renders the skeleton loader while the data is being fetched:

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

const renderSkeletonView = () => {
  return (
    <View style={styles.skeletonContainer}>
      {[1, 2, 3, 4, 5, 6].map((_, index) => (
        <SkeletonPlaceholder key={index} backgroundColor="#333">
          <SkeletonPlaceholder.Item
            flexDirection="column"
            alignItems="center"
            style={{ marginBottom: 20 }}>
            <SkeletonPlaceholder.Item
              width={160}
              height={240}
              borderRadius={8}
            />
            <SkeletonPlaceholder.Item
              width={120}
              height={20}
              marginTop={15}
            />
            <SkeletonPlaceholder.Item
              width={90}
              height={15}
              marginTop={10}
            />
          </SkeletonPlaceholder.Item>
        </SkeletonPlaceholder>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  skeletonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
  },
});

---

Integrating Skeleton Loader into FlatList

Now, let’s integrate this skeleton loader into our main component. When isLoaderActive is true, the shimmer effect will be displayed. Otherwise, the data list will be shown.

import Animated from 'react-native-reanimated';

const [isLoaderActive, setIsLoaderActive] = useState(false);

  const onRefresh = useCallback(done => {
    setIsLoaderActive(true);
    setTimeout(() => {
      setIsLoaderActive(false);
      isReadyToRefresh.value = false;
      done();
    }, 3000);
  }, []);

{isLoaderActive ? (
  renderSkeletonView()
) : (
  <Animated.FlatList
    data={data}
    scrollEventThrottle={16}
    bounces={false}
    renderItem={renderItem}
    key={2}
    numColumns={2}
    keyExtractor={(_, index) => index.toString()}
    ItemSeparatorComponent={() => <View style={{ height: 20 }} />}
  />
)}

---

Final Thoughts

Adding a shimmer effect significantly improves the user experience by making the UI feel more interactive and polished. This simple yet effective implementation enhances perceived performance and keeps users engaged while the data loads.

Feel free to experiment with different skeleton structures to match your app's UI design. Happy coding!