NativeScrollView

A customizable ScrollView block for Nativeblocks.

@NativeBlock(
    name: "Native ScrollView",
    keyType: "NATIVE_SCROLLVIEW",
    description: "Nativeblocks ScrollView block",
    version: 2
)
struct NativeScrollView<Content: View>: View 

NativeScrollView provides a flexible scrollable container for content, with customizable alignment, padding, frame, and appearance settings.

Features:

• Supports vertical, horizontal, or bidirectional scrolling.

• Customizable padding, frame, and background.

• Configurable alignment and scroll indicators visibility.

• Shadow and border support for enhanced styling.

Example:

NativeScrollView(
    content: { index in HStack { Text("Scrollable Content") } }
)

Inheritance

View

Slots

content

The content displayed inside the ScrollView.

@NativeBlockSlot(description: "The scrollable content of the ScrollView.")
    var content: (BlockIndex) -> Content

Properties

scrollIndicators

Controls the visibility of scroll indicators.

@NativeBlockProp(
        description: "Determines the visibility of the scroll indicators.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("hidden", "hidden"),
            NativeBlockValuePickerOption("never", "never"),
            NativeBlockValuePickerOption("visible", "visible"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Scrollable"),
        defaultValue: "visible"
    )
    var scrollIndicators: String = "visible"

scrollDirection

Specifies the scrolling direction of the ScrollView.

@NativeBlockProp(
        description: "Sets the direction of scrolling (vertical, horizontal, or both).",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("vertical", "vertical"),
            NativeBlockValuePickerOption("horizontal", "horizontal"),
            NativeBlockValuePickerOption("both", "horizontal"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Scrollable"),
        defaultValue: "vertical"
    )
    var scrollDirection: Axis.Set = .vertical

alignmentHorizontal

The horizontal alignment of the content inside the ScrollView.

@NativeBlockProp(
        description: "Specifies the horizontal alignment of the content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("trailing", "trailing"),
            NativeBlockValuePickerOption("center", "center"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment"),
        defaultValue: "leading"
    )
    var alignmentHorizontal: HorizontalAlignment = .leading

alignmentVertical

The vertical alignment of the content inside the ScrollView.

@NativeBlockProp(
        description: "Specifies the vertical alignment of the content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("top", "top"),
            NativeBlockValuePickerOption("bottom", "bottom"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("firstTextBaseline", "firstTextBaseline"),
            NativeBlockValuePickerOption("lasttextbaseline", "lastTextBaseline"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment"),
        defaultValue: "top"
    )
    var alignmentVertical: VerticalAlignment = .top

spacing

The spacing between elements inside the ScrollView.

@NativeBlockProp(
        description: "The spacing between elements inside the ScrollView.",
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment"),
        defaultValue: "0"
    )
    var spacing: CGFloat = 0

paddingTop

The top padding of the content inside the ScrollView.

@NativeBlockProp(
        description: "The top padding of the content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding"),
        defaultValue: "0"
    )
    var paddingTop: CGFloat = 0

paddingLeading

The leading (left) padding of the content inside the ScrollView.

@NativeBlockProp(
        description: "The leading padding of the content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding"),
        defaultValue: "0"
    )
    var paddingLeading: CGFloat = 0

paddingBottom

The bottom padding of the content inside the ScrollView.

@NativeBlockProp(
        description: "The bottom padding of the content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding"),
        defaultValue: "0"
    )
    var paddingBottom: CGFloat = 0

paddingTrailing

The trailing (right) padding of the content inside the ScrollView.

@NativeBlockProp(
        description: "The trailing padding of the content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding"),
        defaultValue: "0"
    )
    var paddingTrailing: CGFloat = 0

frameWidth

The width of the ScrollView's frame.

@NativeBlockProp(
        description: "The width of the ScrollView frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size"),
        defaultValue: "notSet"
    )
    var frameWidth: String = "notSet"

frameHeight

The height of the ScrollView's frame.

@NativeBlockProp(
        description: "The height of the ScrollView frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size"),
        defaultValue: "notSet"
    )
    var frameHeight: String = "notSet"

backgroundColor

The background color of the ScrollView.

@NativeBlockProp(
        description: "The background color of the ScrollView.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "#00000000"
    )
    var backgroundColor: Color 

cornerRadius

The corner radius of the ScrollView.

@NativeBlockProp(
        description: "The corner radius of the ScrollView.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "0"
    )
    var cornerRadius: CGFloat = 0

borderColor

The border color of the ScrollView.

@NativeBlockProp(
        description: "The border color of the ScrollView.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "#00000000"
    )
    var borderColor: Color 

borderWidth

The border width of the ScrollView.

@NativeBlockProp(
        description: "The border width of the ScrollView.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "0"
    )
    var borderWidth: CGFloat = 0

shadowColor

The shadow color of the ScrollView.

@NativeBlockProp(
        description: "The shadow color of the ScrollView.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "#00000000"
    )
    var shadowColor: Color 

shadowRadius

The blur radius of the ScrollView's shadow.

@NativeBlockProp(
        description: "The blur radius of the ScrollView shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "0"
    )
    var shadowRadius: CGFloat = 0

shadowX

The horizontal offset of the ScrollView's shadow.

@NativeBlockProp(
        description: "The horizontal offset of the ScrollView shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "0"
    )
    var shadowX: CGFloat = 0

shadowY

The vertical offset of the ScrollView's shadow.

@NativeBlockProp(
        description: "The vertical offset of the ScrollView shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "0"
    )
    var shadowY: CGFloat = 0