Home » React JS

How to Add Scrolling Functionalities in React Native App?

React Native | Adding Scrolling Functionalities: In this article, we will learn how to add scrolling abilities in you react native app?
Submitted by Godwill Tetah, on February 10, 2020

At times, what makes mobile app development for beginners especially with react native difficult is the fact that everything is built manually including some common and mostly used effects.

Scrolling makes life easier when using a mobile app. The scroll function or ability is needed when part of the content fills the entire screen of the app interface, leaving behind un-displayed content.

Firstly, we import the component which is called the ScrollView component and then just add the <ScrollView> opening and closing tag around that element or output
Below is an example of an app with an image and some text which follows immediately, but it's long and occupies more than the available screen of the phone.

So, scrolling is necessary.

Open your App's App.js file and type the following,

import * as React from 'react';
import {useState} from 'react';
import { Text, View, Image, ScrollView } from 'react-native';

export default function App () {

  return (
    <ScrollView>
    <View style={{padding: 10, justifyContent: 'center',
    flex: 1
}}>
    <Image
      style={{height:200, width:'100%'}}
source={{uri:'http://go237.com/wp-content/uploads/2019/12/1470399671_SEO.png'}}
      />
      <Text > Let's face it - staying committed to something (anything) can be downright difficult. Life just seems to get in the way, doesn't it? Whether it's people, things or situations, wavering in our commitment has become the norm rather than the exception. But is there a way to stay committed to something so that we follow through? Is there some formula out there that can help us see things through no matter what happens?

I don't profess to have all the answers to everything. In fact, if you had talked to me a mere 5 years ago, you would have been speaking to a person who didn't know how to stay committed to things. When the going got tough, I gave up. I threw in that proverbial towel. I couldn't bother with staying committed. I was anti-commitment, if you will.

So what changed? From then to now, how did I do such a big reversal? In that time, I've written over 40 books. Yes, forty books. And, I'm not talking about pamphlets here - real books with substance that add value to the world and dive deep into areas like self development and technology.

Not only that, but I started two wildly-successful businesses, blogged for the Huffington Post, Forbes and Engadget, and of course, got married, had two babies, quite literally traveled the world to dozens of countries and I started this blog. I didn't have to sacrifice my personal life. I didn't have to give up the things that I really loved to do. I was able to do these things while still staying committed to my goals.

How did I do it? How did I stay committed to things and see them through? When other people were rushing in and out of endeavors, I was able to stick it out. As a result, today, I know a good thing or two about commitment. I know what it takes to decide to do something and actually follow through with doing it. It's not likened to brain surgery or rocket science. It's simple and straightforward.

The Importance of Persistence
If you want to stay committed to something, you absolutely must harbor unwavering resolution to see it through. But how do you get there? How do you stay persistent while dealing with everything else in life? I used to ask myself this very question. In fact, I even wrote a book called Art of Persistence where I talked about just what being persistent meant and why it was so important.

In fact, persistence is central to any goal we might have in life. Without this one core tendency, it's easy to give up, especially when the going gets tough. I suppose I never really appreciated the importance of persistence until I failed repeatedly. It's those big failures, and the ensuing lessons, where I learned just how important persistence was. </Text>
    
    </View>
    </ScrollView>
  );
}

Output

Properties/attributes working with this component can be found on the official documentation of react native at https://facebook.github.io/react-native/docs/scrollview

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question. God Bless You!