ScrollView component in React Native - Mini App: Build & Ship

Build: Simple ScrollView Screen

A screen that shows a vertical list of colored boxes inside a scrollable area.

Target UI

---------------------
| ScrollView Screen  |
|-------------------|
| [Red Box]         |
| [Green Box]       |
| [Blue Box]        |
| [Yellow Box]      |
| [Purple Box]      |
| [Orange Box]      |
|                   |
| (Scroll to see more)
---------------------

Use a ScrollView to allow vertical scrolling

Display at least 6 colored boxes stacked vertically

Each box should have a fixed height and fill most of the screen width

Boxes should have distinct background colors

Add some spacing between boxes

Starter Code

React Native

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

export default function ScrollViewScreen() {
  return (
    <ScrollView style={styles.container}>
      {/* TODO: Add colored boxes here */}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  // TODO: Add styles for boxes
});

Task 1

Task 2

Task 3

Solution

React Native

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

export default function ScrollViewScreen() {
  return (
    <ScrollView style={styles.container}>
      <View style={[styles.box, { backgroundColor: '#e74c3c' }]} />
      <View style={[styles.box, { backgroundColor: '#27ae60' }]} />
      <View style={[styles.box, { backgroundColor: '#2980b9' }]} />
      <View style={[styles.box, { backgroundColor: '#f1c40f' }]} />
      <View style={[styles.box, { backgroundColor: '#8e44ad' }]} />
      <View style={[styles.box, { backgroundColor: '#e67e22' }]} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  box: {
    height: 150,
    marginBottom: 16,
    borderRadius: 8
  }
});

We used a ScrollView to allow vertical scrolling when the content is taller than the screen. Inside it, we added six View components, each styled as a colored box with a fixed height and margin below to separate them visually. Different background colors make each box distinct. The container has padding so boxes don't touch screen edges. This simple layout shows how ScrollView lets users scroll through content that doesn't fit on one screen.

Final Result

Completed Screen

---------------------
| ScrollView Screen  |
|-------------------|
| [Red Box]         |
|                   |
| [Green Box]       |
|                   |
| [Blue Box]        |
|                   |
| [Yellow Box]      |
|                   |
| [Purple Box]      |
|                   |
| [Orange Box]      |
|                   |
| (Scroll to see more)
---------------------

User can swipe up and down to scroll through the colored boxes

Boxes remain visible as user scrolls vertically

Stretch Goal

Add horizontal scrolling with colored boxes arranged side by side

💡 Hint

Set the ScrollView's horizontal prop to true and arrange boxes in a row