NativeTextField

A customizable text field block for Nativeblocks.

@NativeBlock(
    name: "Native Text field",
    keyType: "NATIVE_TEXT_FIELD",
    description: "Nativeblocks text field block",
    version: 1
)
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

Properties

text

The current text in the text field.

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

localText

The local state of the text field for internal binding.

@State private var localText: 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

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

isSecure

Indicates whether the text field hides input for secure entry.

@NativeBlockProp(description: "Hides input for secure entry if set to true.")
    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"),
        ]
    )
    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"),
        ]
    )
    var autocapitalization: String = "none"

disableAutocorrection

Disables autocorrection if set to true.

@NativeBlockProp(description: "Disables autocorrection if set to true.")
    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")
    )
    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")
    )
    var fontWeight: String = "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")
    )
    var fontDesign: String = "default"

fontSize

The font size used in the text field.

@NativeBlockProp(
        description: "The font size used in the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    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")
    )
    var foregroundColor: String = "#ff000000"

backgroundColor

The background color of the text field.

@NativeBlockProp(description: "The background color of the text field.")
    var backgroundColor: String = "#00000000"

direction

The layout direction of the text field (LTR or RTL).

@NativeBlockProp(
        description: "The layout direction of the text field.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("LTR", "LTR"),
            NativeBlockValuePickerOption("RTL", "RTL"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Direction")
    )
    var direction: String = "LTR"

paddingTop

The top padding of the text field.

@NativeBlockProp(
        description: "The top padding inside the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    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")
    )
    var paddingLeading: CGFloat = 0

paddingBottom

The bottom padding of the text field.

@NativeBlockProp(
        description: "The bottom padding inside the text field.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    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")
    )
    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")
    )
    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")
    )
    var frameHeight: String = "notSet"

cornerRadius

The corner radius of the text field.

@NativeBlockProp(description: "The corner radius of the text field.")
    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")
    )
    var alignmentHorizontal: String = "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")
    )
    var alignmentVertical: String = "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")
    )
    var multilineTextAlignment: String = "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")
    )
    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")
    )
    var lineSpacing: CGFloat = 0

body

var body: some View