Enhancing GlueStack: Proposing InputText Property Inheritance Interface

[ghost]

Description

Exploring an interface for inheriting InputText properties would greatly enhance the usability of GlueStack, facilitating the creation of more reusable components. It's worth noting that finding a solution to this issue in the documentation has proven challenging. Looking forward to potential improvements!

For Example:

import React from "react";
import { Control, Controller, FieldError } from "react-hook-form";
import {
    InputField,
    InputSlot,
    InputIcon,
    FormControl,
    Input,
    AlertCircleIcon,
    FormControlError,
    FormControlErrorIcon,
    FormControlErrorText,
    FormControlHelper,
    FormControlHelperText,
    FormControlLabelText,
    FormControlLabel
} from "@gluestack-ui/themed";
import { TextInputProps } from "react-native";

type ControlledInputProps = {
    control: Control<any>;
    name: string;
    label: string;
    error?: FieldError;
    icon?: string;
    iconEvent?(): void;
}

function ControlledInput({
    control,
    name,
    label,
    error,
    icon,
    iconEvent,
    ...rest
}: ControlledInputProps): JSX.Element {
    const handleState = () => {
        if (iconEvent) {
            iconEvent();
        }
    };

    return (
        <FormControl isInvalid={!!error} mb={4}>
            <FormControlLabel mb="$1">
                <FormControlLabelText color="$textLight100">{label}</FormControlLabelText>
            </FormControlLabel>
            <Controller
                name={name}
                control={control}
                render={({ field: { onChange, value } }) => (
                    <Input height={50} bg="$backgroundLight50">
                        <InputField placeholder='...' value={value} onChangeText={onChange} {...rest} />
                        <InputSlot pr="$3" onPress={handleState}>
                            <InputIcon color="$darkBlue500" />
                        </InputSlot>
                    </Input>
                )}
            />
            <FormControlHelper>
                <FormControlHelperText>
                    Must be at least 6 characters.
                </FormControlHelperText>
            </FormControlHelper>
            <FormControlError>
                <FormControlErrorIcon as={AlertCircleIcon} />
                <FormControlErrorText>
                    At least 6 characters are required.
                </FormControlErrorText>
            </FormControlError>
        </FormControl>
    );
}

export default ControlledInput;

Problem Statement

Yes, this feature aims to address an existing issue. Currently, the absence of an interface for inheriting properties from InputText poses a challenge in creating reusable components within GlueStack. Introducing such an interface would significantly ease this process, enhancing flexibility and efficiency in building elements within the platform.

Proposed Solution or API

the native base solution was ideal

Alternatives

No response

Additional Information

System:
OS: macOS 14.1.1
CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
Memory: 228.16 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 21.2.0
path: ~/.nvm/versions/node/v21.2.0/bin/node
Yarn:
version: 1.22.21
path: ~/.nvm/versions/node/v21.2.0/bin/yarn
npm:
version: 10.2.3
path: ~/.nvm/versions/node/v21.2.0/bin/npm
Watchman:
version: 2023.11.20.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /Users/mbsousr/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.9
path: /usr/bin/javac
Ruby:
version: 2.7.6
path: /Users/mbsousr/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: false
newArchEnabled: false

[Viraj-10]

Hey @mrsants, I didn't get your point are talking about types of input?
If it's about types for now you can extract type using following code.

import { InputField } from "@gluestack-ui/themed"

const IInputFieldProps = React.ComponentProps<typeof InputField >;
type ControlledInputProps  = {
    control: Control<any>;
    name: string;
    label: string;
    error?: FieldError;
    icon?: string;
    iconEvent?(): void;
} & IInputFieldProps;

refer this blog for more info.

[ghost]

Thanks for the tip, I forgot to respond