ScrollView component in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the ScrollView component from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AText

BScrollView

CView

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Importing View instead of ScrollView.

Forgetting to import ScrollView.

The ScrollView component must be imported from 'react-native' to use it in your app.

2fill in blank

medium

Complete the code to wrap content inside a ScrollView component.

React Native

return (
  <[1]>
    <Text>Scrollable content</Text>
  </[1]>
);

Drag options to blanks, or click blank then click option'

AScrollView

BFlatList

CSafeAreaView

DView

Attempts:

3 left

💡 Hint

Common Mistakes

Using View which does not scroll.

Using FlatList which is for lists, not simple scroll.

Wrapping content inside ScrollView makes it scrollable vertically by default.

3fill in blank

hard

Fix the error in the ScrollView usage by completing the missing prop to enable horizontal scrolling.

React Native

<ScrollView [1]>
  <Text>Swipe horizontally</Text>
</ScrollView>

Drag options to blanks, or click blank then click option'

Avertical={true}

BpagingEnabled={false}

CscrollEnabled={false}

Dhorizontal={true}

Attempts:

3 left

💡 Hint

Common Mistakes

Using vertical prop which does not exist.

Disabling scroll with scrollEnabled={false}.

Setting horizontal={true} makes the ScrollView scroll horizontally instead of vertically.

4fill in blank

hard

Fill both blanks to create a ScrollView with a fixed height and enable vertical scrolling.

React Native

const styles = StyleSheet.create({
  container: {
    height: [1],
    backgroundColor: 'lightgray'
  }
});

return (
  <ScrollView style={styles.container} [2]>
    <Text>Lots of content here</Text>
  </ScrollView>
);

Drag options to blanks, or click blank then click option'

A300

Bhorizontal={true}

CscrollEnabled={true}

Dflex: 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex: 1 for height which fills all space instead of fixed height.

Setting horizontal={true} when vertical scroll is needed.

Setting a fixed height like 300 limits the ScrollView's visible area. The prop scrollEnabled={true} ensures scrolling is active.

5fill in blank

hard

Fill all three blanks to create a ScrollView that scrolls horizontally, hides the scroll indicator, and snaps to page.

React Native

<ScrollView [1] [2] [3]>
  <View style={{width: 300, height: 200, backgroundColor: 'red'}} />
  <View style={{width: 300, height: 200, backgroundColor: 'blue'}} />
</ScrollView>

Drag options to blanks, or click blank then click option'

Ahorizontal={true}

BshowsHorizontalScrollIndicator={false}

CpagingEnabled={true}

DscrollEnabled={false}

Attempts:

3 left

💡 Hint

Common Mistakes

Disabling scroll with scrollEnabled={false}.

Not hiding the scroll indicator when asked.

To create a horizontal scroll that snaps pages and hides the scroll bar, use horizontal={true}, showsHorizontalScrollIndicator={false}, and pagingEnabled={true}.