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