React Native ScrollView Example

Jun 19, 2020

Hi Guys,

In this blog, I will explain you how to create scrollview in react native. You can easily create scrollview in react native. First i will import namespace ScrollView

, after I will make scrollview using ScrollView tag in react native.

Here, I will give you full example for simply display scrollview using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init ScrollView 

Step 2 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView } from 'react-native';
class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Mike', 'id': 1},
         {'name': 'Steve', 'id': 2},
         {'name': 'Austin', 'id': 3},
         {'name': 'Daniel', 'id': 4},
         {'name': 'Jack', 'id': 5},
         {'name': 'John', 'id': 6},
         {'name': 'Makbul', 'id': 7},
         {'name': 'Elon', 'id': 8},
         {'name': 'Albert', 'id': 9},
         {'name': 'Ann', 'id': 10},
      ]
   }
   render() {
      return (
         <View>
            <ScrollView>
               {
                  this.state.names.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text style = {styles.name}>{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,
      backgroundColor: '#e9967a'
   },
   name: {
    color : "#fff",
    fontSize : 20
   }
})

Step 3 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...