React Native ScrollView

React Native ScrollView is used for direct distribution of elements over the page. It is used to control page contents dimensions, as well as its scroll performance. ScrollViews are an excellent way to embed large images, video and other complex content in a React native app. They can be used either horizontally or vertically.

Through this article, you will gain a general understanding of how to create a basic react native scrollview example with this powerful mechanism.

Example

// App.js

import React, {Component} from 'react';  
import React, {Component} from 'react';  
import {View } from 'react-native';
import Display from './Display'

export default class App extends Component {  

render() {    
return (
    <View>
      <Display/>
    </View>
  );
}
}

Lets create another component

// Display.js 

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

class Display extends Component {
    state = {
        alphabets: [
            {'id': 1 , 'name': 'A'},
            {'id': 2 , 'name': 'B'},
            {'id': 3 , 'name': 'C'},
            {'id': 4 , 'name': 'D'},
            {'id': 5 , 'name': 'E'},
            {'id': 6 , 'name': 'F'},
            {'id': 7 , 'name': 'G'},
            {'id': 8 , 'name': 'H'},
            {'id': 9 , 'name': 'I'},
            {'id': 10 , 'name': 'J'},
       ]
    }

    render() {
       return (
          <View>
          <ScrollView>
             {
                this.state.alphabets.map((item, index) => (
                    <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                ))
             }
           </ScrollView>
          </View>
       )
    }
 }
 export default Display
 
 const styles = StyleSheet.create ({

    item: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 25,
        margin: 2,
        borderColor: '#2a4944',
        borderWidth: 1,
        backgroundColor: '#F9A18E'
     },
    text: {
       color: '#201E1E'
    }
 })

Output