ScrollableHStack
Use the ScrollableHStack component to align items horizontally in a scrollable container.
Props
xGap
Use this to set the horizontal gap between items.
| Type | Default | Description |
|---|---|---|
number | 0 | Any positive number. |
Example
px
Use this to set horizontal padding.
| Type | Default | Description |
|---|---|---|
number | 0 | The most left and right padding. If the page layout has horizontal padding, the items will look like they are cut off while scrolling. In that case, you will have to remove the padding from the page layout and update this value instead. |
Example
py
Use this to set vertical padding.
| Type | Default | Description |
|---|---|---|
number | 0 | Useful mostly if you enable showScrollIndicator and set it to true, to make sure the scroll indicator doesn't go over the items. It's not enabled by default. Make sure to enable it in Editor if you want to use it. |
Example
showScrollIndicator
Use this to show scroll indicator (scrollbar).
| Type | Default | Description |
|---|---|---|
boolean | false | It's false explicitly, because if it was undefined it would be visible by default. The styles and behaviour of scrollbar is native and depends on OS. It's not enabled by default. Make sure to enable it in Editor if you want to use it. |
Example
reverse
Use this to reverse the order of items.
| Type | Default | Description |
|---|---|---|
boolean | / | If true, the order of items will be reversed. It's not enabled by default. Make sure to enable it in Editor if you want to use it. |
Example
children
Use this to set ReactNode items.
| Type | Default | Description |
|---|---|---|
ReactNode | / | You need to set width and height on item level. |
Example
...rest
Use this to spread the rest of the props to the ScrollView element.
| Type | Default | Description |
|---|---|---|
ScrollViewProps | / | If you need more control over the ScrollView element inside the ScrollableHStack, you can use any prop from ScrollView this way. |
Example
Preview
numOfItems
Use this to set the number of items to display.
Tips
View wrapper
Our View wrapper element is essential in ensuring that the ScrollView doesn't take the entire available height. Without it, the ScrollView will take the entire available height.
ScrollView or FlatList
If you have a lot of items, you should consider using FlatList instead of ScrollView to improve performance, but for simple sections with a few items (and maybe "See all" item at the end), you can use ScrollView.
Editor
Source code
import React from 'react';
import {View, ScrollView} from 'react-native';
const UIScrollableHStack = ({
xGap = 0,
px = 0,
children,
...rest
}) => {
const styles = {
scrollableHStackScroll: {
flexGrow: 1,
paddingHorizontal: px,
},
scrollableHStackItem: {
marginLeft: xGap,
minWidth: 0,
flexShrink: 0,
},
scrollableHStackItemIsFirst: {
marginLeft: 0,
}
};
return (
<View>
<ScrollView
horizontal
contentContainerStyle={styles.scrollableHStackScroll}
showsHorizontalScrollIndicator={false}
{...rest}
>
{React.Children.map(children, (child, index) => {
const isFirst = index === 0;
return (
<View style={[styles.scrollableHStackItem, isFirst && styles.scrollableHStackItemIsFirst]}>
{React.cloneElement(child)}
</View>
)
})}
</ScrollView>
</View>
);
};
export default UIScrollableHStack;
Usage example
<UIScrollableHStack
xGap={12}
px={24}
>
<View style={{width: 300, height: 260, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>1</Text></View>
<View style={{width: 300, height: 260, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>2</Text></View>
<View style={{width: 300, height: 260, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>3</Text></View>
<View style={{width: 300, height: 260, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>4</Text></View>
<View style={{width: 300, height: 260, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>5</Text></View>
<View style={{width: 300, height: 260, borderRadius: 16, backgroundColor: '#1bbeb0', justifyContent: 'center', alignItems: 'center'}}><Text style={{color: '#ffffff', fontSize: 20}}>6</Text></View>
</UIScrollableHStack>