TextInput
Uses the TextInput inside de data component for add a custom component
- Light Theme
- Dark 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
footer
(optional)
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
}