View

CSS class names separated by space

Whether to use vertical (i.e. column) layout. By default, it is true if row prop is falsy

Whether to use horizontal layout. By default, it is falsy

Whether to use grid layout, instead of the default col/row flex layout

Whether to make the view fill up available height and width

Whether to reverse the render order of inner content items

Whether to use right to left text, layout, and scroll direction

Align inner content to the start

Align inner content to the end

Align inner content to the top

Align inner content to the bottom

Align inner content to the center horizontally

Align inner content to the middle vertically

@param {object|HTMLAudioElement} new Audio(URL) sound file to play on click

Inner content to render

Custom UI to render before children in Scroll mode (outside inner Scroll component)

Custom UI to render after children in Scroll mode (outside inner Scroll component)

Whether to prevent components from setting size offset for this component. This can prevent bugs caused by children Scroll components with scrollOffset enabled.

Tooltip props (or content) to display as popup on interaction with this component

Whether to enable scroll mode so that overflow content is scrollable. Note: because of browser quirks related to flex layout, this mode adds an extra inner scroll div element that wraps children content.

Whether to restrict scrolling along the layout direction.

Scrollable in all directions by default.

CSS class for inner wrapper Scroll component

Props for the inner Scroll component

Whether to allow Scroll element to set offset style to its parent element. The Scroll component may set max-width or max-height style to the parent element in order for it to calculate the maximum available space correctly. Sometimes, this behavior leads to false positives, and needs to be disabled.

Props for outer Scroll div when content overflows in given direction, set to false to disable

When true:

• For column layout - left scrollbar
• For row layout - reverses scroll direction.

Here is how it works when enabled:

• for LTR direction it uses right to left scroll direction and place the scrollbar on the left.
• If rtl is true, the scroll direction is left to right and the scrollbar is on the right.

To achieve left scrollbar without changing horizontal scroll direction, restrict this Scroll component to allow only vertical scroll, then create a nested Scroll component that can only scroll horizontally. @example: <Scroll rtl={rtl} scrollReversed scrollAlongDirectionOnly> <Scroll row scrollAlongDirectionOnly>...</Scroll> </Scroll>

Ref for the inner Scroll component

Ref for the View or outer Scroll container