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!
Top comments (0)