React Native ScrollView

In view component we create basic UI component but for long content that is not gonna work. Our content hides and we can’t access it there comes the React native ScrollView.

Syntax of scroll view

import { ScrollView } from 'react-native;
...
<ScrollView style={styles.container}>
   ... Content ...
</ScrollView>

also don’t forget to add height to ScrollView or it’s parent, else it can throw error.

React Native ScrollView Working example

Important useful Properties of ScrollView

These are the props of React native ScrollView

1. stickyHeaderIndices –

If you want to make any child of scrollview sticky then this property is gonna do that

<ScrollView stickyHeaderIndices={[0]}>
<Text> ... Content ...</Text>
<Text> ... Content ...</Text>
</ScrollView>

Here we give it 0 so first text is gonna be sticky. at the top

note. – it is not gonna work on horizontal.

2. showsVerticalScrollIndicator & showsHorizontalScrollIndicator

default is true you can false it if you don’t want scroll indicator.

3. refreshControl –

for adding pull-to-refresh on scroll view. It is for verticle only.

4. pagingEnabled –

used for horizontal navigator. It stops after elements scroll.

5. indicatorStyle –

Here we can give ‘black’ and ‘white’ for indicator according to our theme of app.

6. horizontal

This is most important property. It is for making the scrollview horizontal instead of vertical.

7. contentContainerStyle –

as the name suggest it gives style to content container.

If you have any problem comment down below. If you want more information or properties than go to https://reactnative.dev/docs/scrollview