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 ( {[1, 2, 3, 4, 5, 6].map((_, index) => ( ))} ); }; 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() ) : ( index.toString()} ItemSeparatorComponent={() => } /> )} 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!

Mar 15, 2025 - 13:21

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 (
    
      {[1, 2, 3, 4, 5, 6].map((_, index) => (
        
          
            
            
            
          
        
      ))}
    
  );
};

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()
) : (
   index.toString()}
    ItemSeparatorComponent={() => }
  />
)}

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!