The ScrollView is a generic scrollable container, which scrolls multiple child components and views inside it

In this  hapter we will learn about ReactNative ScollView component.

Example

import React, {Component} from 'react';

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

 

export default class ScrollViewComp extends Component {

  state = {

    languages: [

      {name: 'ReactNative', key: 1},

      {name: 'Java', key: 2},

      {name: 'C++', key: 3},

      {name: 'C', key: 4},

      {name: 'Flutter', key: 5},

      {name: 'Kotlin', key: 6},

      {name: 'Ruby', key: 7},

      {name: 'Python', key: 9},

      {name: 'DataScience', key: 10},

      {name: 'MachineLearning', key: 11},

    ],

  };

  render() {

    return (

      <View style={ss.container}>

        <View style={ss.header}>

          <Text style={ss.headerText}>ScrollView Example</Text>

        </View>

        <View style={ss.body}>

          <ScrollView>

            {this.state.languages.map((item, index) => (

              <Text style={ss.textItem} key={index}>

                {item.name}

              </Text>

            ))}

          </ScrollView>

        </View>

      </View>

    );

  }

}

const ss = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,

  },

  header: {

    alignItems: 'center',

    padding: 10,

 

    backgroundColor: 'cyan',

  },

  headerText: {

    fontSize: 25,

  },

  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,

  },

  textItem: {

    alignContent: 'center',

    padding: 10,

    margin: 10,

    backgroundColor: 'pink',

    borderRadius: 8,

    borderColor: 'green',

  },

  textinputs: {

    color: 'white',

    borderBottomColor: 'white',

    borderBottomWidth: 2,

    fontSize: 22,

  },

});

 

 

Output

 

Props of ScrollView

alwaysBounceVertical onScroll horizontal  
contentContainerStyle scrollEnabled bouncesZoom zoomScale
onScrollBeginDrag onContentSizeChange maximumZoomScale minimumZoomScale
onScrollBeginDrag onContentSizeChange maximumZoomScale minimumZoomScale
onScrollEndDrag centerContent contentInset refreshControl
pagingEnabled scrollsToTop snapToAlignment showsHorizontalScrollIndicator
snapToStart snapToEnd indicatorStyle showsHorizontalScrollIndicator

 

 


Subscribe For Daily Updates