Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

React Native Using Scrollview

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

The ScrollView is a scrollable container that can contain numerous child components and views. We can scroll the components vertically and horizontally in the ScrollView. The ScrollView container scrolls its components and pictures vertically by default. It uses the horizontal props to scroll its components horizontally (default, horizontal: false).

Click on the following link to read further: Hooks in React JS

App.js

import React from 'react';
import ScrollViewExample from './scroll_view.js';


const App = () => {
   return (
      <ScrollViewExample />
   )
}export default App

A list of names will be rendered via Scrollview. We'll make it in the state.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

ScrollView.js

import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';
class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Mayank', 'id': 1},
         {'name': 'SOHAM', 'id': 2},
         {'name': 'DEBOJEET', 'id': 3},
         {'name': 'RAJAT', 'id': 4},
         {'name': 'RISHAB', 'id': 5},
         {'name': 'BHUVANA', 'id': 6},
         {'name': 'RITU', 'id': 7},
         {'name': 'SOMA', 'id': 8},
         {'name': 'SHABAB', 'id': 9},
         {'name': 'NARUTO', 'id': 10},
         {'name': 'SASUKE', 'id': 11},
         {'name': 'HINATA', 'id': 12}
      ]
   }
   render() {
      return (
         <View>
            <ScrollView>
               {
                  this.state.names.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                  ))
               }
            </ScrollView>
         </View>
      )
   }
}
export default ScrollViewExample
const styles = StyleSheet.create ({
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 15,
      margin: 2,
      borderColor: 'yellow',
      borderWidth: 1,
      backgroundColor: 'red'
   }
   })

 

The pagingEnabled properties on ScrollViews can be used to allow paging through views using swiping movements. The ViewPager component on Android can also swipe horizontally between views.

On iOS, the user can zoom the content using a ScrollView with a single item. Set the maximum zoom scale and minimumZoomScale properties, and your user will be able to zoom in and out using pinch and expand movements.

The ScrollView is best used to present a small number of little items. Even though the elements and views of a ScrollView are not now visible on the screen, they are rendered. Use a FlatList instead if you have a big list of things that won't fit on the screen. So, let's move on to list views.

Also see,  React Native Reanimated

Read More, React Native Paper

Frequently Asked Questions

In React Native, how does ScrollView work?

The pagingEnabled properties on ScrollViews can be used to allow paging through views using swiping movements. The ViewPager component on Android can also swipe horizontally between views. On iOS, the user can zoom the content using a ScrollView with a single item.

What does the ScrollView component do?

The ScrollView Component is a react-native component that acts as a generic scrollable container that can scroll child components and views. It has scrolling capabilities in both vertical and horizontal directions (Default: vertical).

In React Native, how do I retrieve the content height of a ScrollView?

Get the content's height within the ScrollView ("content height"). Use the ScrollView's "onScroll" event to get the scroll offset. It's used to keep the scrollOffset animation up to date. Using the scrollOffset animation value, containerHeight, and contentHeight, create a ScrollBar component.

Conclusion

Let us brief out the article.

In this article, we learned about the scroll view component's uses and implemented a code for it. That's all from the article. I hope you all like it.

I hope you all like this article. Want to learn more about Data Analysis? Here is an excellent course that can guide you in learning. You can also refer to our other courses like DSA and Machine Learning.

Happy Learning, Ninjas!

Topics covered
1.
Introduction
2.
App.js
3.
ScrollView.js
4.
Frequently Asked Questions
4.1.
In React Native, how does ScrollView work?
4.2.
What does the ScrollView component do?
4.3.
In React Native, how do I retrieve the content height of a ScrollView?
5.
Conclusion