Hello friends, From today we are start making tutorials on a new react native component known as ScrollView. This is our first tutorial on ScrollView and we would discuss it’s all props one by one in our upcoming tutorials. Now the main part of this tutorial is to understand what is the purpose of using ScrollView component in react native. ScrollView component is used to implement Scrolling enabled screen in both Android and iOS in react native. When se use ScrollView on our app then we can add multiple components one by one even if they exceed the height of screen. All we have to do is scroll the screen and all the components will be start displaying. So this is the purpose of ScrollView. So in this tutorial we would learn about Example of ScrollView with Vertical Scrolling in React Native.
Live Screenshot :-
Contents in this project Example of ScrollView with Vertical Scrolling in React Native :-
1. Open your project’s main App.js file and import ScrollView, SafeAreaView, StyleSheet, Text, View and Image component.
|
1 2 3 |
import React from "react"; import { ScrollView, SafeAreaView, StyleSheet, Text, View, Image } from 'react-native'; |
2. Creating our main App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating return() block, Now here we would first make the SafeAreaView component as our Root component then put the ScrollView component and place all the components as its child to display within ScrollView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
return ( <SafeAreaView style={{ flex: 1 }}> <ScrollView> <View style={styleSheet.MainContainer}> <Text style={styleSheet.title}> Example of Vertical ScrollView in React Native </Text> <Text style={styleSheet.text}> Example of Vertical ScrollView in React Native </Text> <Text style={styleSheet.text}> Example of Vertical ScrollView in React Native </Text> <View style={{ width: 200, height: 200, backgroundColor: 'green' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <View style={{ width: 200, height: 200, backgroundColor: 'pink' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <View style={{ width: 200, height: 200, backgroundColor: 'blue' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <Text style={styleSheet.text}> ScrollView Last Element </Text> </View> </ScrollView> </SafeAreaView> ); |
4. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 5, alignItems: 'center', justifyContent: 'center', }, title: { fontSize: 25, textAlign: 'center', color: 'black', padding: 5, fontWeight: 'bold' }, text: { fontSize: 22, textAlign: 'center', color: 'black', padding: 5, } }); |
5. Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import React from "react"; import { ScrollView, SafeAreaView, StyleSheet, Text, View, Image } from 'react-native'; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <ScrollView> <View style={styleSheet.MainContainer}> <Text style={styleSheet.title}> Example of Vertical ScrollView in React Native </Text> <Text style={styleSheet.text}> Example of Vertical ScrollView in React Native </Text> <Text style={styleSheet.text}> Example of Vertical ScrollView in React Native </Text> <View style={{ width: 200, height: 200, backgroundColor: 'green' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <View style={{ width: 200, height: 200, backgroundColor: 'pink' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <View style={{ width: 200, height: 200, backgroundColor: 'blue' }} /> <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/white-lily.jpg' }} style={{ width: 300, height: 230, resizeMode: 'contain', margin: 10 }} /> <Text style={styleSheet.text}> ScrollView Last Element </Text> </View> </ScrollView> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 5, alignItems: 'center', justifyContent: 'center', }, title: { fontSize: 25, textAlign: 'center', color: 'black', padding: 5, fontWeight: 'bold' }, text: { fontSize: 22, textAlign: 'center', color: 'black', padding: 5, } }); |
Screenshot :-
