Skeleton loading screens in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React Native component used to create a skeleton placeholder.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

ASkeletonPlaceholder

BImage

CText

DView

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import a non-existent SkeletonPlaceholder component from react-native.

Using Text or Image instead of View for the skeleton container.

The View component is the basic building block in React Native and is used to create skeleton placeholders by styling.

2fill in blank

medium

Complete the code to create a simple skeleton block with a gray background and rounded corners.

React Native

const SkeletonBlock = () => {
  return <View style={{ backgroundColor: '[1]', borderRadius: 8, height: 20, width: 100 }} />;
};

Drag options to blanks, or click blank then click option'

A#CCCCCC

B#FFFFFF

C#000000

D#FF0000

Attempts:

3 left

💡 Hint

Common Mistakes

Using white (#FFFFFF) which blends with the background.

Using black (#000000) which is too dark for skeletons.

The color #CCCCCC is a light gray, commonly used for skeleton loading blocks to indicate loading content.

3fill in blank

hard

Fix the error in the code to animate the skeleton block's opacity using React Native's Animated API.

React Native

const opacity = new Animated.Value(1);

Animated.loop(
  Animated.sequence([
    Animated.timing(opacity, { toValue: [1], duration: 500, useNativeDriver: true }),
    Animated.timing(opacity, { toValue: 1, duration: 500, useNativeDriver: true })
  ])
).start();

Drag options to blanks, or click blank then click option'

A2

B0

C-1

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using values greater than 1 or negative values for opacity.

Setting toValue to 1 which causes no fade effect.

The opacity value must be between 0 and 1. Setting toValue to 0 fades out the skeleton block.

4fill in blank

hard

Fill both blanks to create a skeleton screen with two blocks stacked vertically with spacing.

React Native

return (
  <View style={{ padding: 16 }}>
    <View style={{ height: 20, width: 150, backgroundColor: '[1]', borderRadius: 4 }} />
    <View style={{ height: 20, width: 100, backgroundColor: '[2]', borderRadius: 4, marginTop: 12 }} />
  </View>
);

Drag options to blanks, or click blank then click option'

A#E0E0E0

B#FFFFFF

C#B0B0B0

D#000000

Attempts:

3 left

💡 Hint

Common Mistakes

Using white which makes blocks invisible.

Using black which is too harsh for skeletons.

Using #E0E0E0 and #B0B0B0 creates two shades of gray for a subtle skeleton effect with spacing.

5fill in blank

hard

Fill all three blanks to create a skeleton screen with a circle avatar and two text lines below.

React Native

return (
  <View style={{ flexDirection: '[1]', alignItems: 'center', padding: 16 }}>
    <View style={{ height: 60, width: 60, borderRadius: [2], backgroundColor: '#CCC' }} />
    <View style={{ marginLeft: 16, flexDirection: '[3]' }}>
      <View style={{ height: 20, width: 120, backgroundColor: '#DDD', borderRadius: 4, marginBottom: 8 }} />
      <View style={{ height: 20, width: 80, backgroundColor: '#DDD', borderRadius: 4 }} />
    </View>
  </View>
);

Drag options to blanks, or click blank then click option'

Arow

B30

Ccolumn

D60

Attempts:

3 left

💡 Hint

Common Mistakes

Using flexDirection 'column' which stacks avatar and text vertically.

Setting borderRadius equal to height or width instead of half.

Setting flexDirection to row arranges avatar and text side by side. The avatar's borderRadius is half its size (30) to make it a circle. The text container uses column to stack lines vertically.