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.