NativeTextField

A customizable text field block for Nativeblocks.

@NativeBlock(
    name: "Native Text field",
    keyType: "NATIVE_TEXT_FIELD",
    description: "Nativeblocks text field block",
    version: 2
)
struct NativeTextField: View 

NativeTextField allows for user input with various customization options, such as font, alignment, secure text entry, and event handling.

Features:

• Handles secure and standard text input.

• Configurable keyboard types, autocapitalization, and autocorrection.

• Fully customizable font, padding, alignment, and frame.

• Triggers events for text changes, editing status, and submission.

Example:

NativeTextField(
    text: "Enter your text",
    isEditing: false,
    onCommit: { print("Commit!") },
    onEditingChanged: { isEditing in print("Editing: \(isEditing)") },
    onChange: { newText in print("Changed: \(newText)") }
)

Inheritance

View

Datas

text

The current text in the text field.

@NativeBlockData(description: "The current text in the text field.")
    var text: String

isEditing

Indicates whether the text field is currently being edited.

@NativeBlockData(description: "Indicates whether the text field is currently being edited.")
    var isEditing: Bool

Events

onCommit

Triggered when the text field's editing is committed.

@NativeBlockEvent(description: "Triggered when the text field's editing is committed.")
    var onCommit: () -> Void

onEditingChanged

Triggered when the editing state changes, with isEditing updated automatically.

@NativeBlockEvent(
        description: "Triggered when the editing state changes. Updates **isEditing** automatically.",
        dataBinding: ["isEditing"]
    )
    var onEditingChanged: (Bool) -> Void

onChange

Triggered whenever the text in the text field changes, with text updated automatically.

@NativeBlockEvent(
        description: "Triggered whenever the text changes. Updates **text** automatically.",
        dataBinding: ["text"]
    )
    var onChange: (String) -> Void

Properties

isSecure

Indicates whether the text field hides input for secure entry.

@NativeBlockProp(
        description: "Hides input for secure entry if set to true.",
        defaultValue: "false"
    )
    var isSecure: Bool = false

keyboardType

Specifies the keyboard type for the text field.

@NativeBlockProp(
        description: "Specifies the keyboard type for the text field.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("default", "default"),
            NativeBlockValuePickerOption("asciiCapable", "asciiCapable"),
            NativeBlockValuePickerOption("numbersAndPunctuation", "numbersAndPunctuation"),
            NativeBlockValuePickerOption("URL", "url"),
            NativeBlockValuePickerOption("numberPad", "numberPad"),
            NativeBlockValuePickerOption("phonePad", "phonePad"),
            NativeBlockValuePickerOption("namePhonePad", "namePhonePad"),
            NativeBlockValuePickerOption("emailAddress", "emailAddress"),
            NativeBlockValuePickerOption("decimalPad", "decimalPad"),
            NativeBlockValuePickerOption("twitter", "twitter"),
            NativeBlockValuePickerOption("webSearch", "webSearch"),
            NativeBlockValuePickerOption("asciiCapableNumberPad", "asciiCapableNumberPad"),
            NativeBlockValuePickerOption("alphabet", "alphabet"),
        ],
        defaultValue: "default"
    )
    var keyboardType: String = "default"

autocapitalization

Specifies the autocapitalization type for the text field.

@NativeBlockProp(
        description: "Specifies the autocapitalization type for the text field.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("none", "none"),
            NativeBlockValuePickerOption("allCharacters", "allCharacters"),
            NativeBlockValuePickerOption("sentences", "sentences"),
            NativeBlockValuePickerOption("words", "words"),
        ],
        defaultValue: "none"
    )
    var autocapitalization: String = "none"

disableAutocorrection

Disables autocorrection if set to true.

@NativeBlockProp(
        description: "Disables autocorrection if set to true.",
        defaultValue: "false"
    )
    var disableAutocorrection: Bool = false

fontFamily

The font family used in the text field.

@NativeBlockProp(
        description: "The font family used in the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "system"
    )
    var fontFamily: String = "system"

fontWeight

The font weight used in the text field.

@NativeBlockProp(
        description: "The font weight used in the text field.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("regular", "regular"),
            NativeBlockValuePickerOption("thin", "thin"),
            NativeBlockValuePickerOption("medium", "medium"),
            NativeBlockValuePickerOption("semibold", "semibold"),
            NativeBlockValuePickerOption("bold", "bold"),
            NativeBlockValuePickerOption("heavy", "heavy"),
            NativeBlockValuePickerOption("black", "black"),
            NativeBlockValuePickerOption("light", "light"),
            NativeBlockValuePickerOption("ultralight", "ultralight"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "regular"
    )
    var fontWeight: Font.Weight = .regular

fontDesign

The font design used in the text field.

@NativeBlockProp(
        description: "The font design used in the text field.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("default", "default"),
            NativeBlockValuePickerOption("monospaced", "monospaced"),
            NativeBlockValuePickerOption("rounded", "rounded"),
            NativeBlockValuePickerOption("serif", "serif"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "default"
    )
    var fontDesign: Font.Design = .default

fontSize

The font size used in the text field.

@NativeBlockProp(
        description: "The font size used in the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "16"
    )
    var fontSize: CGFloat = 16

foregroundColor

The text color of the text field.

@NativeBlockProp(
        description: "The text color of the text field.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "#ff000000"
    )
    var foregroundColor: Color = .black

backgroundColor

The background color of the text field.

@NativeBlockProp(
        description: "The background color of the text field.",
        defaultValue: "#00000000"
    )
    var backgroundColor: Color 

paddingTop

The top padding of the text field.

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

paddingLeading

The leading (left) padding of the text field.

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

paddingBottom

The bottom padding of the text field.

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

paddingTrailing

The trailing (right) padding of the text field.

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

frameWidth

The width of the text field's frame.

@NativeBlockProp(
        description: "The width of the text field's 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 text field's frame.

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

cornerRadius

The corner radius of the text field.

@NativeBlockProp(
        description: "The corner radius of the text field.",
        defaultValue: "8.0"
    )
    var cornerRadius: CGFloat = 8.0

alignmentHorizontal

The horizontal alignment of the text field.

@NativeBlockProp(
        description: "The horizontal alignment of the text field.",
        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 text field.

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

multilineTextAlignment

The multiline text alignment of the text field.

@NativeBlockProp(
        description: "The alignment for multiline text within the text field.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("trailing", "trailing"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "leading"
    )
    var multilineTextAlignment: TextAlignment = .leading

lineLimit

The maximum number of lines allowed in the text field.

@NativeBlockProp(
        description: "The maximum number of lines for the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "9999"
    )
    var lineLimit: Int = 9999

lineSpacing

The spacing between lines of text.

@NativeBlockProp(
        description: "The spacing between lines of text in the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font"),
        defaultValue: "0"
    )
    var lineSpacing: CGFloat = 0