ScrollView

In this chapter, we will show you how to work with the ScrollView element.

We will again create ScrollViewExample.js and import it in Home.

App.js

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

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

Scrollview will render a list of names. We will create it in state.

ScrollView.js

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

class ScrollViewExample extends Component {
   state = {
  names: [
     {'name': 'Ben', 'id': 1},
     {'name': 'Susan', 'id': 2},
     {'name': 'Robert', 'id': 3},
     {'name': 'Mary', 'id': 4},
     {'name': 'Daniel', 'id': 5},
     {'name': 'Laura', 'id': 6},
     {'name': 'John', 'id': 7},
     {'name': 'Debra', 'id': 8},
     {'name': 'Aron', 'id': 9},
     {'name': 'Ann', 'id': 10},
     {'name': 'Steve', 'id': 11},
     {'name': 'Olivia', '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: 30,
  margin: 2,
  borderColor: '#2a4944',
  borderWidth: 1,
  backgroundColor: '#d2f7f1'
   }
})

When we run the app, we will see the scrollable list of names.