How to use ScrollView in React Native
React Native is an open-source JavaScript framework built on top of React. As React is mainly developed to build web applications, it is primarily designed to build natively rendering mobile applications for iOS and Android.
React Native components
React Native comes with plenty of components for our applications. The basic components used by most of the applications are:
TextTextInputImageViewScrollViewStyleSheet
The ScrollView component
We live in an information-rich environment. Applications nowadays have a lot of data to display, such as text, images, videos, etc. It isn't easy to fit everything on a single screen. The ScrollView helps us scroll vertically and horizontally to see the application's data.
Styling the ScrollView component
We can apply custom styling to theScrollView component by using different
contentContainerStyle: It is used to apply styling to the inner content of theScrollView.horizontal: It is used to make the content of theScrollViewcomponent scroll horizontally when its value is set totrue. By default, its value isfalse, and vertical scroll is enabled.showsVerticalScrollIndicator: It is used to show the scroll indicator on the right side of theScrollViewwhen thehorizontalproperty isfalse. Its value istrueby default, but setting it tofalsewill hide the vertical scroll indicator.showsHorizontalScrollIndicator: It shows the scroll indicator at the bottom of theScrollViewwhen thehorizontalproperty istrue. Its value istrueby default, but setting it tofalsewill hide the horizontal scroll indicator.
Implementation
Let's try to write the code for the ScrollView component.
import React from 'react';
import { ScrollView, Image, Text } from 'react-native';
const App = () => {
return (
// Outer ScrollView which contains two
// nested ScrollViews (Horizontal and vertical)
<ScrollView contentContainerStyle={{
backgroundColor: "#f5f5f5",
justifyContent: "center",
padding: 30
}}>
<ScrollView horizontal={true}>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
<Image style={{ margin: 20, width: 50, height: 50 }} source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}/>
</ScrollView>
<ScrollView contentContainerStyle={{paddingTop: 30}}>
<Text style={{fontWeight: "bold", marginBottom: 5, fontSize: 15}}>What is educative?</Text>
<Text>
Educative is a hands-on learning platform for software developers of all levels.
Our interactive, text-based courses are built from the ground up to teach you the
skills employers are looking for. We provide tools like in-browser coding environments
and interview-focused assessments to help you practice as you learn. Whether
you’re looking to become a developer, grow your skills, or prepare for an upcoming interview,
Educative’s expert authors can get you there.
</Text>
<Image style={{ alignSelf: "center", marginBottom: 20, marginTop: 20, width: 50, height: 50 }}
source={{ uri: "https://www.educative.io/static/imgs/logos/MainLogoV2.png" }}
/>
<Text style={{ marginBottom: 5}}>
We are changing how developers continue their education and stay relevant by providing pre-configured
learning environments that adapt to match a developer’s skill level. You can find courses on coding
languages (e.g. Python, Java, etc.), security, machine learning, cloud computing, and so much more.
</Text>
<Text>
For instructors, Educative provides the best authoring platform for creating interactive content with
just a few clicks
</Text>
</ScrollView>
</ScrollView>
);
};
export default App;Explanation
The code above is explained below:
Line 1: We import the
Reactcomponent from thereactlibrary.Line 2: We import the
ScrollView,Image, andTextcomponent from thereact-nativelibrary.Line 4: We create a functional component
Appthat returns JSX.Lines 10–53: We use the
<ScrollView>component containing two nested<ScrollView>components for horizontal and vertical scroll views.Lines 16–25: We add a horizontal scroll using the
<ScrollView>component with itshorizontalprops set totrue.Lines 17–24: We use the
<Image>component to display the images in the horizontal scroll view. We also added some styling to adjust the size of the images.Lines 27–51: We add a vertical scroll using the
<ScrollView>component. We don't need to enable vertical scroll as it is settrueby default.Lines 28–36: We use the
<Text>component to display the text.Lines 38–40: We use the
<Image>component to display the image in the vertical scroll. We also added some styling to adjust the size and alignment of the image.Lines 42–50: We again use the
<Text>component to display the text.Line 57: We export the
Appcomponent as a default export.
Conclusion
The ScrollView component is useful in React Native. It enables smooth scrolling and navigation for content that exceeds the available screen space. By incorporating ScrollView into our React Native applications, we can enhance the user experience by allowing seamless scrolling through lengthy lists, text, or any other content. With its flexibility and customizable features, ScrollView proves to be an essential tool for creating engaging and user-friendly mobile applications in React Native.
Free Resources