ScrollView component in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

ScrollView content visibility

What will be visible on the screen when this React Native ScrollView renders?

React Native

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

export default function App() {
  return (
    <ScrollView style={{height: 100}}>
      <View style={{height: 50, backgroundColor: 'red'}}><Text>Red Box</Text></View>
      <View style={{height: 50, backgroundColor: 'green'}}><Text>Green Box</Text></View>
      <View style={{height: 50, backgroundColor: 'blue'}}><Text>Blue Box</Text></View>
    </ScrollView>
  );
}

A Only the Red and Green boxes are visible; Blue box is hidden until scrolled.

B Only the Red box is visible; Green and Blue boxes are clipped and not scrollable.

C All three boxes (Red, Green, Blue) are visible at once without scrolling.

D The ScrollView will not render any boxes due to missing flex styles.

💡 Hint

The ScrollView height limits visible content; content larger than height can be scrolled.

The ScrollView has a fixed height of 100. Each box is 50 height, so only two boxes fit without scrolling. The third box is hidden until user scrolls.

❓ lifecycle

intermediate

ScrollView onScroll event behavior

Which option correctly describes what happens when the user scrolls the ScrollView below?

React Native

import React, { useState } from 'react';
import { ScrollView, Text } from 'react-native';

export default function App() {
  const [scrollY, setScrollY] = useState(0);

  return (
    <ScrollView onScroll={event => setScrollY(event.nativeEvent.contentOffset.y)} scrollEventThrottle={16} style={{height: 100}}>
      <Text style={{height: 300}}>Scroll me</Text>
      <Text>Scrolled Y: {scrollY.toFixed(0)}</Text>
    </ScrollView>
  );
}

A The scrollY state updates but shows horizontal scroll position instead of vertical.

B The scrollY state updates only once when scrolling starts, then stops updating.

C The scrollY state never updates because onScroll requires a different event prop.

D The scrollY state updates continuously as the user scrolls, showing the vertical scroll position.

💡 Hint

scrollEventThrottle controls how often onScroll fires during scrolling.

onScroll fires repeatedly during scrolling. The event's nativeEvent.contentOffset.y gives vertical scroll offset, which updates scrollY state.

❓ navigation

advanced

ScrollView nested inside another ScrollView

What happens when you nest a vertical ScrollView inside another vertical ScrollView as shown below?

React Native

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

export default function App() {
  return (
    <ScrollView style={{height: 200}}>
      <Text>Outer ScrollView Content</Text>
      <ScrollView style={{height: 100}}>
        <Text>Inner ScrollView Content</Text>
        <View style={{height: 300, backgroundColor: 'lightgray'}} />
      </ScrollView>
    </ScrollView>
  );
}

A Both ScrollViews scroll simultaneously causing erratic scrolling behavior.

B Scrolling inside the inner ScrollView works independently; outer ScrollView scrolls only when inner is at top or bottom.

C Scrolling inside the inner ScrollView is disabled; only outer ScrollView scrolls.

D The app crashes due to nested ScrollViews with vertical orientation.

💡 Hint

Nested ScrollViews handle scroll gestures with gesture responder system.

The inner ScrollView scrolls independently. When inner reaches top or bottom, outer ScrollView can scroll. This prevents gesture conflicts.

📝 Syntax

advanced

Correct ScrollView horizontal scrolling syntax

Which option correctly enables horizontal scrolling in a React Native ScrollView?

React Native

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

export default function App() {
  return (
    <ScrollView horizontal={true} style={{height: 100}}>
      <Text style={{width: 300}}>Swipe me horizontally</Text>
    </ScrollView>
  );
}

A horizontal={true}

B scrollDirection="horizontal"

C direction="horizontal"

D enableHorizontalScroll={true}

💡 Hint

Check the official ScrollView props for horizontal scrolling.

The ScrollView prop to enable horizontal scrolling is horizontal={true}. Other props do not exist or have no effect.

🔧 Debug

expert

Why does ScrollView content not scroll on Android?

Given this ScrollView code, why might the content not scroll on Android devices?

React Native

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

export default function App() {
  return (
    <ScrollView style={{flex: 1}}>
      <View style={{height: 300}}><Text>Box 1</Text></View>
      <View style={{height: 300}}><Text>Box 2</Text></View>
    </ScrollView>
  );
}

A Android does not support ScrollView with flex: 1 style.

B ScrollView requires the prop scrollEnabled={true} explicitly on Android.

C The parent container does not have a fixed height, so ScrollView expands and disables scrolling.

D The View components inside ScrollView must have flex: 1 to enable scrolling.

💡 Hint

ScrollView needs a bounded height to know when to scroll.

If ScrollView's parent or itself expands to full height without limit, it shows all content without scrolling. On Android, flex:1 alone may cause this if parent has no height limit.

Practice

1. What is the main purpose of the ScrollView component in React Native?

easy

A. To manage app navigation between screens

B. To allow users to scroll content that is larger than the screen

C. To display images only

D. To create buttons for user interaction

Solution

1. Step 1: Understand ScrollView's role

   The ScrollView component is designed to let users scroll through content that does not fit on the screen.

2. Step 2: Compare options

   Options A, B, and C describe other components or features, not ScrollView.

3. Final Answer:

   To allow users to scroll content that is larger than the screen -> Option B

4. Quick Check:

   ScrollView = scrolls content [OK]

Hint: ScrollView scrolls content bigger than screen [OK]

Common Mistakes:

• Confusing ScrollView with navigation components
• Thinking ScrollView only displays images
• Assuming ScrollView creates buttons

2. Which of the following is the correct way to make a ScrollView scroll horizontally?

easy

A. ...

B. ...

C. ...

D. ...

Solution

1. Step 1: Recall ScrollView horizontal prop

   ScrollView uses the horizontal boolean prop to enable horizontal scrolling.

2. Step 2: Check syntax correctness

   Only ... uses the correct prop name and value syntax. Others use invalid or non-existent props.

3. Final Answer:

   <ScrollView horizontal={true}>...</ScrollView> -> Option C

4. Quick Check:

   horizontal={true} enables horizontal scroll [OK]

Hint: Use horizontal={true} prop for horizontal scroll [OK]

Common Mistakes:

• Using wrong prop names like scrollDirection or direction
• Forgetting to set horizontal to true
• Using shorthand props incorrectly

3. What will be the visible behavior of this code snippet?

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

export default function App() {
  return (
    
      {[...Array(20)].map((_, i) => (
        Item {i + 1}
      ))}
    
  );
}

medium

A. A vertical list of 20 text items that can be scrolled up and down

B. A horizontal list of 20 text items that can be scrolled left and right

C. Only the first 5 items are visible, no scrolling possible

D. App will crash due to missing keys in list items

Solution

1. Step 1: Analyze ScrollView default behavior

   ScrollView scrolls vertically by default, so the list will scroll up and down.

2. Step 2: Check list rendering and keys

   The code uses keys correctly with key={i} and renders 20 Text items inside ScrollView.

3. Final Answer:

   A vertical list of 20 text items that can be scrolled up and down -> Option A

4. Quick Check:

   ScrollView default = vertical scroll [OK]

Hint: ScrollView scrolls vertically by default [OK]

Common Mistakes:

• Assuming horizontal scroll without horizontal prop
• Thinking keys are missing causing crash
• Believing only a few items show without scroll

4. Identify the error in this ScrollView usage:

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

export default function App() {
  return (
    
      Item 1
      Item 2
    
  );
}

medium

A. Missing key props on Text components

B. Text components cannot be children of ScrollView

C. ScrollView requires a style prop to work

D. The horizontal prop should be a boolean, not a string

Solution

1. Step 1: Check horizontal prop type

   The horizontal prop expects a boolean value, but "true" is a string here, which is incorrect.

2. Step 2: Verify other props and children

   Text components are valid children, style is optional, and keys are not required for static children.

3. Final Answer:

   The horizontal prop should be a boolean, not a string -> Option D

4. Quick Check:

   horizontal must be boolean, not string [OK]

Hint: Pass boolean true, not string "true" for horizontal [OK]

Common Mistakes:

• Using string "true" instead of boolean true
• Thinking keys are needed for static children
• Assuming style prop is mandatory

5. You want to display a list of 50 images horizontally scrollable inside a ScrollView. Which approach is best to ensure good performance and user experience?

hard

A. Use FlatList horizontal={true} to render images lazily

B. Use ScrollView without horizontal prop and render images vertically

C. Use ScrollView horizontal={true} with all 50 images rendered inside

D. Use View with manual scrolling logic

Solution

1. Step 1: Understand ScrollView limits

   ScrollView renders all children at once, which can hurt performance with many items like 50 images.

2. Step 2: Choose better component for large lists

   FlatList supports lazy loading and virtualization, improving performance for large lists and supports horizontal scrolling.

3. Step 3: Evaluate other options

   Use ScrollView without horizontal prop and render images vertically scrolls vertically, not horizontal as required. Use View with manual scrolling logic requires complex manual logic and is not recommended.

4. Final Answer:

   Use <FlatList horizontal={true}> to render images lazily -> Option A

5. Quick Check:

   FlatList = best for large scrollable lists [OK]

Hint: Use FlatList for large scrollable lists, not ScrollView [OK]

Common Mistakes:

• Using ScrollView for large lists causing slow performance
• Ignoring horizontal prop for horizontal scroll
• Trying manual scroll logic instead of built-in components