ScrollView component in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the ScrollView component in React Native?

The ScrollView component allows users to scroll through a list or content that is larger than the screen size, enabling vertical or horizontal scrolling.

beginner

How do you enable horizontal scrolling in a ScrollView?

Set the horizontal prop to true on the ScrollView component to enable horizontal scrolling.

intermediate

What prop would you use to add padding inside a ScrollView content area?

You can use the contentContainerStyle prop to style the inner content container, including adding padding.

intermediate

Why should you avoid putting very large lists inside a ScrollView?

Because ScrollView renders all its child components at once, which can cause performance issues with very large lists. For large lists, use FlatList or SectionList instead.

advanced

How can you make a ScrollView accessible for keyboard navigation?

Ensure the ScrollView has proper accessibility props like accessible and use focusable child components. Also, test keyboard navigation to confirm smooth scrolling and focus behavior.

Which prop enables horizontal scrolling in a React Native ScrollView?

A scrollDirection="horizontal"

B enableHorizontalScroll

C direction="horizontal"

D horizontal={true}

The correct prop is horizontal={true} to enable horizontal scrolling.

What happens if you put a very large list inside a ScrollView?

A It only renders visible items for better performance.

B It automatically paginates the list.

C It renders all items at once, which may slow down the app.

D It converts the list to a FlatList automatically.

ScrollView renders all children at once, which can cause performance issues with large lists.

Which prop do you use to style the inner content container of a ScrollView?

A contentStyle

B contentContainerStyle

C style

D innerStyle

Use contentContainerStyle to style the inner content container of a ScrollView.

How do you make a ScrollView scroll vertically by default?

A No prop needed; vertical is default

B Set scrollDirection="vertical"

C Set vertical={true}

D Set direction="vertical"

Vertical scrolling is the default behavior of ScrollView.

Which component is better for rendering very long lists efficiently in React Native?

A FlatList

B Text

C View

D ScrollView

FlatList is optimized for large lists by rendering only visible items.

Explain how to use the ScrollView component to create a vertically scrollable list of items.

Think about wrapping your content inside <code>&lt;ScrollView&gt;</code> tags.

Describe the difference between ScrollView and FlatList and when to use each.

Consider performance and list size.