React Native ScrollView

Introduction to React Native ScrollView

ScrollView is a react native component library, which allows us to implement scrolling of components with multi-child options, with the help of react native ScrollView library we can scroll vertically and horizontally both which gives user an awesome feeling while surfing on the apps, we need to mention in which direction it should scroll if we do not mention the direction it will scroll in vertical to scroll horizontal we need to mention horizontal: true(it default if horizontal: false).

Syntax:

<ScrollView
horizontal={set boolean value(true or false)}
style={we can define content container style here}
showsHorizontalScrollIndicator={set boolean value here (true or false)}
showsVerticalScrollIndicator={set boolean value(true or false)}
scrollEnabled:{set this property as boolean(true or false)}
>
<Image source={require('./images/Krunal.jpg')} style={[styles.image, { width: screenWidth }]}/>
<Text style={styles.welcome}> Welcome to React NativeWelcome to React Native</Text>
</ScrollView>

Attributes

• alwaysBounceVertical: It will allow components to always vertically bounce.
• onScroll: If we wanted to execute any activity on scroll we can do it inside the onScroll function.
• horizontal: In case if we want to have horizontal scrolling we can set this attribute as true(horizontal=true)
• contentContainerStyle: This is one type of styling in react native. Here it will be used for the contents of containers.
• scrollEnabled: In case if we do not want to scroll our content we can set this property as false. Its value will be true if we do not define any.
• bouncesZoom: It’s one kind of bouncing, here it will have min/max value for which it will bounce. In general, the bounce will not exceed the limit.
• zoomScale: With this, we can set a scale for the current view. In case if we do not define its value it will be 1.0.
• onContentSizeChange: We can perform some activity in this if any change in the size of the content happens.
• maximumZoomScale: We can define here what would be the maximum zoom size. In case if we do not define maximumZoomSize it will be 1.0
• minimumZoomScale: It is used to define the minimum zoom size which we can set for it. In case if we do not define it will be 1.0.
• maximumZoomScale: In this case, we can define the maximum zoom scale value. In case if we do not define it will be 1.0.
• minimumZoomScale: In this case, we define the minimum zoom scale value. In case if we do not define it then it will be 1.0.
• centerContent: If the content is smaller as compared to the scroller it will come to the center if center content is set to be true. In case if the content is larger than the scroller this property will not work. In case if we do not define its value it will be false.
• contentInset: If we want inset to scroll view content then we can use this parameter.
• pagingEnabled: It will stop scrolling and it will give an option for pagination. It is only available for horizontal pagination.
• scrollsToTop: It will allow you to move top to scroll view when the status bar is tapped and scrollsToTop is true. In case if we do not define its value it will be true only.
• snapToAlignment: If we set snapToInterval value will be defined then, snapToAlignment creates a relationship of the snapping to the scroll view. It takes three params to start(set to the left horizontal), center(it will set to center) and end(it will set to the right horizontal)
• showsHorizontalScrollIndicator: It will show an indicator basically for horizontal scrolling when it values are set to true.

Examples of React Native ScrollView

Given below are the given examples:

Example #1

In the below example we are displaying a list of products and we are not passing any attribute along with this. All the products are listing vertically. These products can be displayed horizontally, we need to pass horizontal=true.in the next example, we will change the view of products from vertical to horizontal.

Code:

import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
class App extends Component {
state = {
products: [
{ product: "Rice", id: 1 },
{ product: "Sweets", id: 2 },
{ product: "Fruits", id: 3 },
{ product: "Animals", id: 4 },
{ product: "humans", id: 5 },
{ product: "sport", id: 6 },
{ product: "kitchen", id: 7 },
{ product: "childrens", id: 8 },
{ product: "men", id: 9 },
{ product: "old people", id: 10 },
{ product: "shafty", id: 11 },
{ product: "transport", id: 12 }
]
};
render() {
return (
<View>
<ScrollView>
{this.state.products.map((item, index) => (
<View key={item.id} style={styles.item}>
<Text>{item.product}</Text>
</View>
))}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
item: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "left",
padding: 20,
margin: 2,
borderColor: "pink",
borderWidth: 3,
backgroundColor: "yellow"
}
});
export default App;

Output:

Example #2

In this example, we are displaying products with horizontal scrolling. Because of its versatile nature, which is it can be designed according to the space and size of our app. In case if more space available horizontally we will set scrollbar horizontal and in case if more space available in vertical than we can use vertical scroller.

Code:

import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
class App extends Component {
state = {
products: [
{ product: "Rice", id: 1 },
{ product: "Sweets", id: 2 },
{ product: "Fruits", id: 3 },
{ product: "Animals", id: 4 },
{ product: "humans", id: 5 },
{ product: "sport", id: 6 },
{ product: "kitchen", id: 7 },
{ product: "childrens", id: 8 },
{ product: "men", id: 9 },
{ product: "old people", id: 10 },
{ product: "shafty", id: 11 },
{ product: "transport", id: 12 }
]
};
render() {
return (
<View>
<ScrollView
showsHorizontalScrollIndicator={false}
style={styles.contentContainerStyle}
horizontal={true}
showsVerticalScrollIndicator={false}
>
{this.state.products.map((item, index) => (
<View key={item.id} style={styles.item}>
<Text>{item.product}</Text>
</View>
))}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
item: {
alignItems: "left",
justifyContent: "space-between",
flexDirection: "row",
padding: 20,
backgroundColor: "yellow",
margin: 2,
borderWidth: 3,
borderColor: "pink"
},
contentContainerStyle: {
backgroundColor: "green",
paddingVertical: 10,
marginTop: 40
}
});
export default App;

Output:

Conclusion

React native scrollview allows us to represent a list of items in the various formats, with scrolling of multi-child options components that create an interactive UI for customers to see the products with ease.

This is a guide to React Native ScrollView. Here we discuss the introduction to React Native ScrollView along with attributes and examples. You may also have a look at the following articles to learn more –

1. React Native Layout
2. React Native FlatList
3. React Native SectionList
4. React Native State