react native-tutorial

React Native ScrollView

A built-in React Native generic scrolling container called the ScrollView can house numerous components and views. You can scroll both vertically and horizontally, and the scrollable elements don’t have to be uniform (by setting the horizontal property). Additionally, paging through views using swipe motions and pagingEnabled properties can be enabled for ScrollViews.

Using the ViewPagerAndroid component, it is also possible to achieve horizontal swiping between views on Android.

Have you ever encountered a situation where your content was occasionally shorter than the size of the screen and didn’t require scrolling but occasionally longer than the size of the screen and required scrolling to allow the user to read all the material?

If it applies to you, you can use a ScrollView’s onContentSizeChange prop to determine whether the content height exceeds the screen size.

Before beginning to work on our tutorial, we will first install React Native.

Install React Native

If you are a newbie to React Native, then these posts might be helpful to you. Now, type the following command to install react-native cli globally.

sudo npm install -g react-native-cli

Okay, now create an application for the iOS platform.

react-native init ScrollViewTutorial

After installing the project, go into that project and start the package development server by typing the following command.

cd ScrollViewTutorial
react-native run-ios

You will see an IOS Simulator default screen like this image.

React Native Starter App

Now open this project on Editor, and in my case, it is Visual Studio Code.

Don’t forget to enable hot reload. You can enable it by typing cmd + d and enabling a hot reload on the simulator.

Edit the App.js file to add the content and styles.

We will make a straightforward design. To replace the code of the App.js file with the following one.

App.js

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
        <Text style={styles.welcome}>Welcome to React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  }
});

You will get the screen below.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *