Skip to main content

TextInput

Uses the TextInput inside de data component for add a custom component

Light Theme

Usage​

On the list​

This component can be used in the list that has a rendering limit of up to 10 items. If you need to implement it in a dynamic list, use the FlatList component.

import React, { useRef, useState } from 'react';
import { ScrollView, TextInput } from 'react-native';

// React Native UI DevKit
import { List, TitleFontSize } from 'react-native-ui-devkit';

const App = () => {
    const [data, setData] = useState({ username: '', password: '' });
    const [timestamp, setTimestamp] = useState();

    const usernameRef = useRef();
    const passwordRef = useRef();

    return (
        <ScrollView keyboardShouldPersistTaps={'handled'}>
            <List data={[
                {
                    icon: { name: 'email', type: 'entypo', size: 20, color: '#999999', backgroundColor: 'transparent' },
                    component:
                        <TextInput
                            ref={usernameRef}
                            placeholder='Username'
                            placeholderTextColor={'#999999'}
                            keyboardType='ascii-capable'
                            returnKeyType='next'
                            value={data?.username}
                            onSubmitEditing={() => { passwordRef?.current?.focus && passwordRef.current.focus(); }}
                            onFocus={() => { setTimestamp(new Date()) }} // todo: It is necessary to use it together with the cleaner.visible parameter
                            onBlur={() => { setTimestamp(new Date()) }} // todo: It is necessary to use it together with the cleaner.visible parameter
                            onChangeText={(text) => {
                                setData((prevState) => ({ ...prevState, username: text }));
                            }}
                            style={[{ color: '#333333' }, TitleFontSize()]} />,
                    ...usernameRef?.current?.isFocused && usernameRef?.current?.isFocused() && {
                        cleaner: {
                            visible: (data?.username?.length >= 1),
                            onPress: () => {
                                setData((prevState) => ({ ...prevState, username: '' }));
                                usernameRef?.current?.focus && usernameRef.current.focus();
                            }
                        }
                    }
                },
                {
                    icon: { name: 'lock', type: 'entypo', size: 20, color: '#999999', backgroundColor: 'transparent' },
                    component:
                        <TextInput
                            ref={passwordRef}
                            placeholder='Password'
                            placeholderTextColor={'#999999'}
                            keyboardType='ascii-capable'
                            returnKeyType='done'
                            value={data?.password}
                            onFocus={() => { setTimestamp(new Date()) }} // todo: It is necessary to use it together with the cleaner.visible parameter
                            onBlur={() => { setTimestamp(new Date()) }} // todo: It is necessary to use it together with the cleaner.visible parameter
                            onChangeText={(text) => {
                                setData((prevState) => ({ ...prevState, password: text }));
                            }}
                            secureTextEntry={data.hidePassword}
                            style={[{ color: '#333333' }, TitleFontSize()]} />,
                    ...passwordRef?.current?.isFocused && passwordRef?.current?.isFocused() && {
                        cleaner: {
                            visible: (data?.password?.length >= 1),
                            onPress: () => {
                                setData((prevState) => ({ ...prevState, password: '' }));
                                passwordRef?.current?.focus && passwordRef.current.focus();
                            }
                        }
                    },
                    action: {
                        icon: { name: data.hidePassword ? 'eye' : 'eye-off', type: 'material-community', size: 25, color: '#999999' },
                        iOS: true,
                        onPress: async () => { setData((prevState) => ({ ...prevState, hidePassword: !prevState.hidePassword })); }
                    }
                }
            ]} header={'Login'} footer={'Enter your username and password to access'} headerOnAndroid footerOnAndroid />

        </ScrollView>

    );
}

export default App;

In the item​

This component can be used individually in the item.

import React, { useRef, useState } from 'react';
import { ScrollView, TextInput } from 'react-native';

// React Native UI DevKit
import { Item, TitleFontSize } from 'react-native-ui-devkit';

const App = () => {
    const [data, setData] = useState({ email: '' });
    const [timestamp, setTimestamp] = useState();

    const emailRef = useRef();

    return (
        <ScrollView keyboardShouldPersistTaps={'handled'}>

            <Item data={{
                icon: { name: 'email', type: 'entypo', size: 20, color: '#999999', backgroundColor: 'transparent' },
                component:
                    <TextInput
                        ref={emailRef}
                        placeholder='E-mail'
                        placeholderTextColor={'#999999'}
                        keyboardType='email-address'
                        keyboardAppearance={global.dark ? 'dark' : 'default'}
                        returnKeyType='next'
                        value={data?.email}
                        onFocus={() => { setTimestamp(new Date()) }} // todo: It is necessary to use it together with the cleaner.visible parameter
                        onBlur={() => { setTimestamp(new Date()) }} // todo: It is necessary to use it together with the cleaner.visible parameter
                        onChangeText={(text) => {
                            setData((prevState) => ({ ...prevState, email: text }));
                        }}
                        style={[{ color: '#333333' }, TitleFontSize()]} />,
                ...emailRef?.current?.isFocused && emailRef?.current?.isFocused() && {
                    cleaner: {
                        visible: (data?.email?.length >= 1),
                        onPress: () => {
                            setData((prevState) => ({ ...prevState, email: '' }));
                            emailRef?.current?.focus && emailRef.current.focus();
                        }
                    }
                }
            }} />

        </ScrollView>
    );
}

export default App;

Props​

data​

This property receives an interface for configuring the item.

Type: object​

  • icon

    Defines the icon to be used on the item.

    Type: icon​

  • component

    Defines a custom component in place of the item.

    Type: ReactNode​

  • disabled

    Disable the item.

    Type: boolean​

  • loading

    Sets the item as loading and disables it. If the item is of type action, collapsible, switch, checkbox or radio, it will be replaced with an activity indicator.

    Type: boolean​

  • badge

    Defines a small circle that displays a number or text and will be displayed on the right side of the item.

    Type: badge​

  • separator

    Sets the separator properties of the above item.

    Type: separator​

  • action

    Defines whether the item is a action item.
    On iOS it is disabled by default. To use, simply set iOS to true.

    Type: action​

  • style

    Set a custom style for the item on the list.

    Type: ViewStyle​

header (optional)​

Inserts a native header into the Item. For use on Android, set headerOnAndroid equal to true.

Type: string​

headerOnAndroid (optional)​

If you want to render the header on Android, set it to true.

Only supported Android.

Type: boolean​

headerToTitle (optional)​

If used, it will replace the item title with the header, if any.

Only supported Android.

Type: boolean​

Inserts a native footer into the Item. For use on Android, set footerOnAndroid equal to true.

Type: string​

footerOnAndroid (optional)​

If you want to render the footer on Android, set it to true.

Only supported Android.

Type: boolean​

index (optional)​

Sets the index of an item. It can be used to join items together to form a list. Used in conjunction with count.

Only supported In the item.

Type: count​

count (optional)​

Defines when items have a certain list. Used in conjunction with index.

Only supported In the item.

Type: number​

style (optional)​

Set a custom style for the item.

Type: ViewStyle​

flex (optional)​

Defines the main view of the item with style flex 1.

Only supported In the item.

Type: boolean​

marginTop (optional)​

The marginTop is set by default according to each platform and version, to remove it simply set it to false.

Type: boolean​

separators (optional)​

To remove the item's native top and bottom separator, set it to false.

Only supported iOS < 15.

Type: boolean​

expanded (optional)​

If you want to expand the item, set it to true. On iOS < 15 is already set as default, so it has no effect.

Type: boolean​

Type Definitions​

icon​

Defines the icon to be used on the item.

Type: object​

{
  name: string, // Defines the icon name.
  type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol", // Sets the icon type.
  size: number, // Sets the icon size.
  color: string, // Sets the icon color.
  backgroundColor: string, // Sets the background color of the icon.
  component: ReactNode // Defines a custom component in place of the icon.
}

badge​

Defines a small circle that displays a number or text and will be displayed on the right side of the item.

Type: object​

{
  value: string, // Determines the value to be printed inside the badge.
  // Setting text and badge colors
  color: {
    text: string, // Sets the text color
    badge: string // Sets the badge color
  }
}

separator​

Sets the separator properties of the above item.

Type: object​

{
  start: number, // Defines where the separator will start.
  index: number, // Used in conjunction with FlatList, it receives the index of the item in question.
  data: [{}, {}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
}

action​

Defines whether the item is a action item.
On iOS it is disabled by default. To use, simply set iOS to true.

Type: object​

{
  // Defines the icon to be used on the action.
  icon: {
    name: string, // Defines the icon name.
    type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol", // Sets the icon type.
    size: number, // Sets the icon size.
    color: string, // Sets the icon color.
    component: ReactNode // Defines a custom component in place of the icon.
  },
  iOS: boolean, // If you want to render the action on iOS, set it to true. Only supported iOS.
  onPress: async () => void // Performing an action when clicking the button. @returns void
}