0
0
React Nativemobile~20 mins

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

Choose your learning style9 modes available
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