Skeleton loading screens in React Native - Mini App: Build & Ship

Build: User Profile Loading

This screen shows a skeleton loading effect while user profile data is loading. It uses gray blocks to mimic the shape of the content that will appear.

Target UI

┌───────────────────────────────┐
│                               │
│   [  O  ]                    │
│                               │
│   ████████████████████████    │
│                               │
│   ██████████████████           │
│                               │
│   ████████████████████████    │
│                               │
│                               │
└───────────────────────────────┘

Show a circular gray block at top left representing profile picture placeholder

Show three horizontal gray bars below representing text placeholders

Use a light gray color for placeholders

Use React Native View components with styles to create skeleton shapes

Screen background should be white

No actual data or text shown, only placeholders

Starter Code

React Native

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

export default function UserProfileLoading() {
  return (
    <View style={styles.container}>
      {/* TODO: Add skeleton placeholders here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20
  }
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function UserProfileLoading() {
  return (
    <View style={styles.container}>
      <View style={styles.avatar} />
      <View style={styles.lineLarge} />
      <View style={styles.lineMedium} />
      <View style={styles.lineLarge} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#ccc',
    marginBottom: 20
  },
  lineLarge: {
    height: 20,
    backgroundColor: '#ccc',
    borderRadius: 4,
    marginBottom: 15,
    width: '90%'
  },
  lineMedium: {
    height: 20,
    backgroundColor: '#ccc',
    borderRadius: 4,
    marginBottom: 15,
    width: '60%'
  }
});

We create a simple loading screen with gray blocks to represent content placeholders. The circular avatar view mimics the profile picture. The rectangular lineLarge and lineMedium views mimic text lines of different widths. We use a light gray color #ccc for all placeholders. The container has white background and padding for spacing. This skeleton screen visually shows the user that content is loading in a friendly way.

Final Result

Completed Screen

┌───────────────────────────────┐
│                               │
│   [  O  ]                    │
│                               │
│   ████████████████████████    │
│                               │
│   ██████████████              │
│                               │
│   ████████████████████████    │
│                               │
│                               │
└───────────────────────────────┘

No user interaction - screen shows placeholders while data loads

Placeholders remain visible until real data replaces them

Stretch Goal

Add a pulsing animation to the skeleton placeholders to indicate loading

💡 Hint

Use React Native's Animated API or a library like react-native-reanimated to animate the opacity or background color of the placeholder Views in a loop

Practice

1. What is the main purpose of a skeleton loading screen in a React Native app?

easy

A. To show a placeholder UI while content is loading

B. To speed up the app's data fetching process

C. To replace the app's navigation system

D. To permanently hide content from users

Solution

1. Step 1: Understand skeleton screen purpose

   Skeleton screens are temporary placeholders that mimic the layout of content while data loads.

2. Step 2: Eliminate incorrect options

   Speeding data fetching, replacing navigation, or hiding content permanently are unrelated to skeleton screens.

3. Final Answer:

   To show a placeholder UI while content is loading -> Option A

4. Quick Check:

   Skeleton screens = placeholders during loading [OK]

Hint: Skeleton screens show placeholders, not speed or navigation [OK]

Common Mistakes:

• Thinking skeleton screens speed up data loading
• Confusing skeleton screens with navigation components
• Believing skeleton screens hide content permanently

2. Which of the following is the correct way to create a simple skeleton placeholder using React Native's View component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React Native style syntax

   Styles must be passed as an object with camelCase keys inside double curly braces.

2. Step 2: Identify correct style properties

   backgroundColor, height, and width are valid style keys; color and bgColor are incorrect.

3. Final Answer:

   <View style={{backgroundColor: '#ccc', height: 20, width: 100}} /> -> Option C

4. Quick Check:

   Correct style object syntax = [OK]

Hint: Use style={{backgroundColor: '#ccc', height: 20, width: 100}} [OK]

Common Mistakes:

• Using invalid style keys like 'color' or 'bgColor'
• Passing styles as strings instead of objects
• Missing curly braces around style object

3. Given this React Native code snippet for a skeleton loader, what will be displayed on the screen?

const Skeleton = () => {
  return (
    <View style={{backgroundColor: '#eee', padding: 10}}>
      <View style={{backgroundColor: '#ccc', height: 20, marginBottom: 10}} />
      <View style={{backgroundColor: '#ccc', height: 20, width: 150}} />
    </View>
  );
};

medium

A. Two gray bars stacked vertically with some spacing

B. A single gray bar with padding

C. Two colored circles side by side

D. An empty screen with no visible elements

Solution

1. Step 1: Analyze the View structure

   The outer View has light gray background and padding. Inside are two Views with gray backgrounds and heights of 20.

2. Step 2: Understand layout and spacing

   The first inner View has marginBottom 10, so the two bars stack vertically with space between them.

3. Final Answer:

   Two gray bars stacked vertically with some spacing -> Option A

4. Quick Check:

   Two stacked bars with margin = Two gray bars stacked vertically with some spacing [OK]

Hint: Look for stacked Views with margin for spacing [OK]

Common Mistakes:

• Assuming elements are side by side without flex direction
• Thinking circles appear without borderRadius
• Ignoring marginBottom spacing

4. Identify the error in this React Native skeleton loader code:

const Skeleton = () => {
  return (
    <View style={{backgroundColor: '#eee', padding: 10}}>
      <View style={{backgroundColor: '#ccc', height: 20, marginBottom: 10}}></View>
      <View style={{backgroundColor: '#ccc', height: 20, width: 150}} />
    </View>
  );
};

medium

A. The style object keys are invalid

B. The first inner View should be self-closing since it has no children

C. The outer View is missing a closing tag

D. The second inner View has incorrect width value

Solution

1. Step 1: Check JSX syntax for empty Views

   The first inner View has no children but uses opening and closing tags instead of self-closing.

2. Step 2: Confirm correct self-closing syntax

   In React Native, empty Views should be self-closed like <View ... /> to avoid warnings.

3. Final Answer:

   The first inner View should be self-closing since it has no children -> Option B

4. Quick Check:

   Empty View tags must self-close [OK]

Hint: Empty Views must use self-closing tags [OK]

Common Mistakes:

• Leaving empty Views with separate opening and closing tags
• Misreading style object keys as invalid
• Ignoring JSX tag closing rules

5. You want to create a skeleton loading screen that adapts to different content widths dynamically. Which approach best achieves this in React Native?

hard

A. Use images as placeholders instead of Views

B. Set fixed pixel widths for all skeleton bars

C. Render skeleton only after data loads

D. Use Animated.View with width set to a percentage and animate opacity

Solution

1. Step 1: Understand dynamic width needs

   Using percentage widths allows skeleton bars to adapt to different screen sizes and content widths.

2. Step 2: Use animation for better UX

   Animating opacity with Animated.View creates a shimmer effect, improving user experience during loading.

3. Step 3: Eliminate incorrect options

   Fixed widths don't adapt; images are static; rendering after data loads defeats skeleton purpose.

4. Final Answer:

   Use Animated.View with width set to a percentage and animate opacity -> Option D

5. Quick Check:

   Dynamic width + animation = Use Animated.View with width set to a percentage and animate opacity [OK]

Hint: Use Animated.View with percent width and opacity animation [OK]

Common Mistakes:

• Using fixed widths that don't adapt to screen size
• Using static images instead of Views for placeholders
• Showing skeleton after data is loaded