? ScrollView in React Native

? Quick Overview

ScrollView is a core React Native component that allows users to scroll through content that does not fit on the screen. It supports vertical and horizontal scrolling and is best suited for small to medium-sized content.

? Key Concepts

• Displays scrollable content vertically or horizontally
• Renders all child components at once
• Supports touch gestures and smooth scrolling
• Not recommended for very large lists

? Syntax / Theory

ScrollView wraps multiple child components and enables scrolling behavior. It can be customized using props like horizontal, showsVerticalScrollIndicator, and contentContainerStyle.

// Import ScrollView and required components
import React from "react";
import { ScrollView, Text, View } from "react-native";

const App = () => {
  return (
    <ScrollView>
      <Text>Item 1</Text>
      <Text>Item 2</Text>
      <Text>Item 3</Text>
      <Text>Item 4</Text>
    </ScrollView>
  );
};

export default App;

? Interactive Example

Below is the code for a horizontal ScrollView. Underneath, use the Simulator to switch between Vertical and Horizontal modes to see how the layout changes on a phone screen.

// Horizontal ScrollView with styled boxes
import React from "react";
import { ScrollView, View, Text, StyleSheet } from "react-native";

export default function App() {
  return (
    <ScrollView horizontal>
      <View style={styles.box}><Text>A</Text></View>
      <View style={styles.box}><Text>B</Text></View>
      <View style={styles.box}><Text>C</Text></View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100, 
    height: 100, 
    margin: 10,
    backgroundColor: "#2563eb",
    alignItems: "center", 
    justifyContent: "center"
  }
});

? Use Cases

• Forms with limited input fields
• Profile or settings screens
• Horizontal image sliders
• Small static content sections