04-Apr-2023
.
Admin
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
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...
#React Native