Updated April 6, 2023
Introduction to React Native Horizontal Scroll
The following article provides an outline for React Native Horizontal Scroll. In a single window, the scrollbar is used to display the large data in the form of links, images, texts, etc. The direction of scrolling for the user’s operation is determined with the help of the scroll bar’s orientation. Scrolling along the x-axis is called horizontal scrolling while scrolling along the y-axis is called vertical scrolling. To scroll the content of a window to the left or right by the user is enabled by a horizontal scroll, in the form of rows. The default value is set to false so that the first item/content of the list is displayed first.
Syntax:
1. Syntax to import horizontal scroll in the application.
import ScrollMenu from 'react-horizontal-scrolling-menu';2. Syntax to assign list/items in the horizontal scroll in the application.
const Arrow = (
{ text
, className }
) => {
return <div className={className}>{text}</div>;
};
Arrow.propTypes = {
text: PropTypes.string,
className: PropTypes.string
};
export const ArrowLeft = Arrow({ text: "<<"
, className: "arrow-prev" });
export const ArrowRight = Arrow({ text: ">>"
, className: "arrow-next" });
let list = [
{ name: "Data Science" },
{ name: "Software Development" },
{ name: "Excel" },
…………];
…………………
<ScrollMenu
alignCenter={alignCenter}
onFirstItemVisible={this.onFirstItemVisible}
onLastItemVisible={this.onLastItemVisible}
onSelect={this.onSelect}
onUpdate={this.onUpdate}
……………/>Example of React Native Horizontal Scroll
Given below is the example mentioned:
The below example shows the creation and usage of the horizontal scroll in the application. The list consisting of 7 items is imported directly in the horizontal scroll, and these items of the list can be scrolled either by clicking “>>” and “<<” or directly dragging the list horizontally towards left or right according to the need. When a particular item (i.e. course) is clicked from the list, it gets highlighted with two borders, the outer border in purple and the inner border in red. There is the link “EDUCBA” that directs to https://www.educba.com/ when clicked on it at the bottom of the page. The whole application page is styled using a background image, PNG image and style.css.
The files used for the proper execution of the code are:
a. index.js
import React
, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import {
SafeAreaView
, View
, Text
, ImageBackground
, StyleSheet
, Image
, Button
, Alert
} from 'react-native';
import PropTypes from "prop-types";
import ScrollMenu from "react-horizontal-scrolling-menu";
const Arrow = (
{ text
, className }
) => {
return <div className={className}>{text}</div>;
};
Arrow.propTypes = {
text: PropTypes.string,
className: PropTypes.string
};
export const ArrowLeft = Arrow({ text: "<<"
, className: "arrow-prev" });
export const ArrowRight = Arrow({ text: ">>"
, className: "arrow-next" });
let list = [
{ name: "Data Science" },
{ name: "Software Development" },
{ name: "Excel" },
{ name: "Design" },
{ name: "Project Management" },
{ name: "Personal Development" },
{ name: "Marketing" }
];
const MenuItem = ({ text, selected }) => {
return <div className={`menu-item ${selected ? "active" : ""}`}>{text}</div>;
};
export const Menu = (list, selected) =>
list.map(el => {
const { name } = el;
return <MenuItem text={name} key={name} selected={selected} />;
});
class Application extends Component {
state = {
alignCenter: true,
clickWhenDrag: false,
dragging: true,
hideArrows: true,
hideSingleArrow: true,
itemsCount: list.length,
scrollToSelected: false,
selected: "item1",
translate: 0,
transition: 0.3,
wheel: true
};
constructor(props) {
super(props);
this.menu = null;
this.menuItems = Menu(list.slice(0, list.length), this.state.selected);
}
onLastItemVisible = () => {
console.log("last item is visible");
const newItems = Array(5)
.fill(1)
.map((el, ind) => ({ name: `item${list.length + ind + 1}` }));
list = list.concat(newItems);
this.menuItems = Menu(list, list.slice(-1)[0].name);
this.setState({
itemsCount: list.length,
selected: this.state.selected
});
};
onFirstItemVisible = () => {
console.log("first item is visible");
};
onUpdate = ({ translate }) => {
console.log(`onUpdate: translate: ${translate}`);
this.setState({ translate });
};
onSelect = key => {
console.log(`onSelect: ${key}`);
this.setState({ selected: key });
};
componentDidUpdate(prevProps, prevState) {
const { alignCenter } = prevState;
const { alignCenter: alignCenterNew } = this.state;
if (alignCenter !== alignCenterNew) {
this.menu.setInitial();
}
}
setSelected = ev => {
const { value } = ev.target;
this.setState({ selected: String(value) });
};
setItemsCount = ev => {
const {
itemsCount = list.length
, selected
} = this.state;
const val = +ev.target.value;
const itemsCountNew =
!isNaN(val) && val <= list.length && val >= 0
? +ev.target.value
: list.length;
const itemsCountChanged = itemsCount !== itemsCountNew;
if (itemsCountChanged) {
this.menuItems = Menu(list.slice(0, itemsCountNew), selected);
this.setState({
itemsCount: itemsCountNew
});
}
};
render() {
const {
alignCenter,
clickWhenDrag,
hideArrows,
dragging,
hideSingleArrow,
scrollToSelected,
selected,
translate,
transition,
wheel
} = this.state;
const menu = this.menuItems;
return (
<ImageBackground
source={{
uri:
'https://images.pexels.com/photos/2480075/pexels-photo-2480075.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
}}
style={{flex: 1}}
>
<div className="App">
<header className="Heading">
<h1
className="Titling">
*Let's Explore the Courses using React Native Horizontal Scroll*
</h1>
<Image
source={{
uri:
'https://cdn.educba.com/images/website_logo_transparent_background.png',
}}
style={{
height: 140,
marginTop: 0,
width: 500,
}}
/>
</header>
<ScrollMenu
alignCenter={alignCenter}
onFirstItemVisible={this.onFirstItemVisible}
onLastItemVisible={this.onLastItemVisible}
onSelect={this.onSelect}
onUpdate={this.onUpdate}
data={menu}
dragging={dragging}
clickWhenDrag={clickWhenDrag}
transition={+transition}
translate={translate}
wheel={wheel}
hideArrows={hideArrows}
hideSingleArrow={hideSingleArrow}
ref={el => (this.menu = el)}
scrollToSelected={scrollToSelected}
selected={selected}
arrowLeft={ArrowLeft}
arrowRight={ArrowRight}
/>
<p className="courses">
....Above are some of the courses provided....
</p>
<p className="visit">
....Visit our website through link below to explore more....
</p>
<hr />
<div>
<a
target="_blank"
rel="noopener"
href="https://www.educba.com/"
color= "#6499f5"
EDUCBA
</a>
</div>
</div>
</ImageBackground>
);
}
}
export default Application;
ReactDOM.render(<Application />, document.getElementById("root"));b. styles.css
.Heading {
height: 300px;
padding: 0px;
color: #f5e942;
}
.scroll-menu-arrow {
padding: 2px;
cursor: pointer;
color: #f58251;
}
.Titling {
font-size: 2em;
}
.menu-item {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
padding: 0 10px;
margin: 1px 1px;
user-select: none;
cursor: pointer;
color: #9af241;
border: 1px transparent solid;
}
.courses {
font-size: large;
color: #57dff7;
}
.visit {
font-size: large;
color: #efedf5;
}
.menu-item-wrapper.active {
border: 6px #9919d4 solid;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.App {
text-align: center;
}
.menu-item.active {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border: 5px #ff0015 solid;
}
.scroll-menu-arrow--disabled {
visibility: hidden;
}
* {
box-sizing: border-box;
}
.menu-item-wrapper {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border: 1px transparent solid;
}Output:
On code execution:
On clicking “>>” or simply dragging towards left:
On clicking any item(course) from the list:
Conclusion
On the basis of the above article, we saw the concept of the horizontal scroll. This article explains horizontal scroll using an example and the syntax to import and create the items of that list. The example will help the readers to implement a horizontal scroll-based application according to their requirements.
Recommended Articles
This is a guide to React Native Horizontal Scroll. Here we discuss the introduction, syntax, and examples along with different examples in detail. You may also have a look at the following articles to learn more –
