Hey! fellow devs, 👋
Do you know that unlike webpages, in App Dev we need to add a specialized container for enabling the scrolling effect?🤔 (Ya! that doesn't happen automatically)

Today let's understand a widget in React Native called ScrollView which gives us this functionality. So, let's dive straight into it...

Project Code

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

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'white'}}>
      <View style={ styles.container}>
        <View style={[ styles.card, styles.cardOne]}>
          <Text style={ styles.cardText}>Card 1</Text>
        </View>
        <View style={[ styles.card, styles.cardTwo]}>
          <Text style={ styles.cardText}>Card 2</Text>
        </View>
        <View style={[ styles.card, styles.cardThree]}>
          <Text style={ styles.cardText}>Card 3</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    padding: 10,
    gap: 10
  },
  card: {
    width: 350,
    height: 350,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    elevation: 5,
  },
  cardOne: {backgroundColor: '#FF6263'},
  cardTwo: {backgroundColor: '#50DBB4'},
  cardThree: {backgroundColor: '#12B0E8'},
  cardText: {
    color: 'black',
    fontWeight: '700',
    fontSize: 30,
  },
});

export default App;

On rendering the above code snippet, you'll notice that the card elements we created here overflow the device screen and you are not even able to scroll just like you did on a webpage.
This is where the use of scroll view comes into the picture. Firstly, import the ScrollView component from react native.

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

Then wrap your views where you want to enable the scrolling function by ScrollView tag.

(
    <SafeAreaView style={{flex: 1}}>
      <ScrollView>         
        <View style={styles.container}>
          <View style={[styles.card, styles.cardOne]}>
            <Text style={styles.cardText}>Card 1</Text>
          </View>
          <View style={[styles.card, styles.cardTwo]}>
            <Text style={styles.cardText}>Card 2</Text>
          </View>
          <View style={[styles.card, styles.cardThree]}>
            <Text style={styles.cardText}>Card 3</Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
)

Horizontal Scrolling

Suppose your cards go from left to right on the screen. For handling that, just handle the horizontal property in the ScrollView tag.

(
<ScrollView horizontal>
    <View>
        <Text> Card </Text>
    </View>
</ScrollView>
)

No ScrollBar

Sometimes scrollbar can spoil the UI of your app. If you don't want to show the scroll bars on the display, then you'll need these two properties:

• showsHorizontalScrollIndicator : Setting it to false hides the scrollbar while horizontal scrolling. Default: true

• showsVerticalScrollIndicator : Setting it to false hides the scrollbar while vertical scrolling. Default: true

Well, this wraps up the basics of using ScrollView. Hope it helps!! 👍