React Native ScrollView Example

React Native

Nicesnippets

141

19-06-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...