ScrollView

Overview

ScrollView is a flexible component that enables content to be displayed within a scrollable area. It supports both horizontal and vertical scrolling based on user interaction, adapting to platform-specific scroll gestures. While it allows for scrolling in one or both directions, it does not offer zoom functionality. This component is particularly useful for displaying content that exceeds the visible area of the screen.

Sample JSON

Below is a sample JSON object demonstrating how to define a ScrollView component with various data and style properties:

scrollView.json

{

  "type": "scrollView",
  "data": {
    "child": {
  "type": "column",
  "data": {
    "children": [
      {
        "type": "text",
        "data": {
          "text": "Hello World"
        },
        "style": {
          "fontStyle": "heading1",
          "fontSize": 18,
          "fontColor": "ff0000",
          "fontColorDark": "FFC0CB",
          "fontWeight": "bold",
          "maxLines": 2,
          "padding": {
            "top": 0,
            "bottom": 10,
            "left": 0,
            "right": 0
          }
        }
      },
      {
        "type": "text",
        "data": {
          "text": "Hello World 2"
        },
        "style": {
          "fontStyle": "heading1",
          "fontColor": "0000ff",
          "padding": {
            "top": 0,
            "bottom": 10,
            "left": 0,
            "right": 0
          }
        }
      }
    ]
  },
  "style": {
    "alignment": "leading",
    "spacing": 8,
    "padding": {
      "top": 0,
      "bottom": 0,
      "left": 16,
      "right": 16
    }
  }
}
  },
  "style": {
    "axis": "horizontal",
    "height": 100,
    "width": 200,
    "showIndicator": true,
    "padding": {
      "top": 5,
      "right": 0,
      "bottom": 5,
      "left": 0
    }
  }
}

This results in the following output:

Hello World

Hello World 2

In this example, the ScrollView component is set up to scroll horizontally within a specified height of 100 logical pixels and a width of 200 logical pixels. It shows the scroll indicator and applies padding around the inner content.

Data Properties

The data properties define the content of the ScrollView component. The following table lists the available data property for the ScrollView component:

Property	Type	Required	Description
children	Component	true	Specifies the components to be displayed inside the scrollable area.

children

• Type: Component (required)
• Description: An array of components or a single component that will be rendered within the ScrollView. This allows for a dynamic and flexible content structure that can scroll within the component's bounds.

Style Properties (Optional)

Style properties allow you to customize the appearance and behavior of the ScrollView component.

info

The style properties are optional. If you don't specify any style properties, the ScrollView component will use the default values.

The following table lists the available style properties for the ScrollView component:

Property	Type	Platform	Required	Description
axis	String	android, iOS	false	Specifies the scroll direction ("horizontal" or "vertical").
height	Float	android, iOS	false	The height of the ScrollView in logical pixels.
width	Float	android, iOS	false	The width of the ScrollView in logical pixels.
showIndicator	Bool	android, iOS	false	Indicates whether the scroll indicator is visible.
padding	JSON	android, iOS	false	The padding around the content within the ScrollView.

height

• Type: Float (optional)
• Description: Specifies the vertical dimension of the ScrollView in logical pixels. This property sets the visible height of the scrollable area, determining how much content can be displayed before scrolling is required. Adjusting the height is crucial for integrating the ScrollView within different layouts and ensuring content is appropriately accessible to users.

width

• Type: Float (optional)
• Description: Sets the horizontal dimension of the ScrollView in logical pixels. It defines the visible width of the scrollable content area, affecting how content is laid out horizontally. The width property allows for precise control over the ScrollView's size, facilitating its use in various design contexts and ensuring a consistent user experience across devices.

axis

• Type: String (optional)
• Description: Determines the scrolling direction of the ScrollView. Set to "vertical" for up-and-down scrolling or "horizontal" for side-to-side scrolling. This property allows for tailored scroll behavior to fit the content and user interface design.

showIndicator

• Type: Bool (optional)
• Description: Controls the visibility of the scroll indicator. When set to true, the scroll indicator is shown, aiding users in understanding the scroll context and position within the ScrollView.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left, and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.
  • top: The space above the component.
  • bottom: The space below the component.
  • left: The space to the left of the component.
  • right: The space to the right of the component.

note

The ScrollView component's versatility makes it an essential tool for creating interactive and user-friendly interfaces that accommodate extensive content.