ScrollView
The ScrollView is a universal scrollable container that scrolls the many views and child components it contains. We can scroll the components in the ScrollView both vertically and horizontally.
The ScrollView container scrolls its views and components vertically by default. It makes use of the props horizontal: true to scroll its components in the horizontal (default, horizontal: false).
Example :
in this tutorial we will see ‘How to use ScrollView in react native’. Used ScrollView that contain Text.
App.js
import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<Text style={styles.text}>
The ScrollView is a universal scrollable container that scrolls the many views and child components it contains. We can scroll the components in the ScrollView both vertically and horizontally.
The ScrollView container scrolls its views and components vertically by default. It makes use of the props horizontal: true to scroll its components in the horizontal (default, horizontal: false).
</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 40,
},
scrollView: {
backgroundColor: 'cyan',
marginHorizontal: 10,
},
text: {
fontSize: 50,
},
});
export default App;
Output:
