React Native Using Scrollview

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!