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.