Skeleton loading screens in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this skeleton loader display?

Consider this React Native component that uses a simple skeleton loader. What will the user see while the data is loading?

React Native

import React from 'react';
import { View, StyleSheet } from 'react-native';

export default function SkeletonLoader() {
  return (
    <View style={styles.container}>
      <View style={styles.skeletonBox} />
      <View style={styles.skeletonLine} />
      <View style={styles.skeletonLine} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 20 },
  skeletonBox: { width: 100, height: 100, backgroundColor: '#ccc', borderRadius: 8, marginBottom: 10 },
  skeletonLine: { height: 20, backgroundColor: '#ddd', borderRadius: 4, marginBottom: 6 }
});

A A white box with two colored buttons below it.

B An image loaded with text below it.

C A gray square box with two gray horizontal bars below it, simulating loading content.

D A blank screen with no visible elements.

💡 Hint

Look at the backgroundColor and shapes used in the styles.

The component renders a gray square and two gray horizontal bars with rounded corners. These shapes mimic the layout of content placeholders while real data loads.

❓ lifecycle

intermediate

When should you hide the skeleton screen?

In a React Native app, when is the best time to stop showing the skeleton loading screen and display the actual content?

A After the data has finished loading and is ready to display.

B Only after a fixed timeout of 5 seconds, ignoring data state.

C As soon as the component mounts, regardless of data loading state.

D When the user taps the screen.

💡 Hint

Think about when the real content is ready to replace the placeholder.

The skeleton screen should be visible only while data is loading. Once data is ready, the skeleton should be hidden and real content shown.

📝 Syntax

advanced

Which code correctly animates a skeleton loader's opacity?

Which option correctly uses React Native's Animated API to create a pulsing opacity effect for a skeleton loader?

React Native

import React, { useEffect, useRef } from 'react';
import { Animated, View, StyleSheet } from 'react-native';

export default function PulsingSkeleton() {
  const opacity = useRef(new Animated.Value(1)).current;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(opacity, { toValue: 0.3, duration: 700, useNativeDriver: true }),
        Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true })
      ])
    ).start();
  }, [opacity]);

  return <Animated.View style={[styles.skeleton, { opacity }]} />;
}

const styles = StyleSheet.create({
  skeleton: { width: 100, height: 20, backgroundColor: '#ccc', borderRadius: 4 }
});

A Uses Animated.loop with Animated.sequence of two Animated.timing calls changing opacity between 1 and 0.3.

B Uses setInterval to change opacity state every 700ms without Animated API.

C Uses Animated.timing once without loop or sequence, so opacity changes only once.

D Uses Animated.spring to animate opacity from 1 to 0.3 repeatedly.

💡 Hint

Look for the use of Animated.loop and Animated.sequence for continuous animation.

Option A correctly uses Animated.loop with a sequence of timing animations to pulse opacity continuously between 1 and 0.3.

❓ navigation

advanced

How to keep skeleton screen visible during navigation?

In a React Native app using React Navigation, you want to show a skeleton loader on a screen while fetching data. Which approach ensures the skeleton screen remains visible during navigation transitions until data loads?

A Show skeleton in the screen component and fetch data in useEffect; skeleton hides after data loads.

B Use a modal overlay with skeleton that blocks navigation until data loads.

C Navigate to a blank screen first, then navigate again to the data screen after loading completes.

D Fetch data in a parent navigator component and pass data as props; screen shows skeleton until props arrive.

💡 Hint

Think about where data is fetched and how props control rendering.

Fetching data in a parent navigator and passing it down allows the screen to show skeleton until data arrives, keeping skeleton visible during navigation transitions.

🧠 Conceptual

expert

Why prefer skeleton loaders over spinners in mobile apps?

Which reason best explains why skeleton loading screens are often better than simple spinners for mobile app user experience?

A Spinners use less battery and are easier to implement.

B Skeleton loaders show approximate layout, reducing perceived wait time and layout shifts.

C Skeleton loaders require no styling and are faster to code.

D Spinners provide more detailed information about loading progress.

💡 Hint

Consider how users perceive waiting and content stability.

Skeleton loaders mimic the shape of content, so users feel the app is responsive and see where content will appear, reducing frustration and layout jumps.