https://github.com/hoaphantn7604/react-native-element-textinput
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
https://github.com/hoaphantn7604/react-native-element-textinput
autocomplete components elements hashtag input material react-native tags textfield textinput
Last synced: 5 months ago
JSON representation
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
- Host: GitHub
- URL: https://github.com/hoaphantn7604/react-native-element-textinput
- Owner: hoaphantn7604
- License: mit
- Created: 2021-07-02T08:31:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-24T04:14:27.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T06:34:44.958Z (11 months ago)
- Topics: autocomplete, components, elements, hashtag, input, material, react-native, tags, textfield, textinput
- Language: TypeScript
- Homepage:
- Size: 1.83 MB
- Stars: 58
- Watchers: 1
- Forks: 13
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-element-textinput
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
## Features
* TextInput, TagsInput and AutoComplete in one package
* Easy to use
* Consistent look and feel on iOS and Android
* Customizable font size, colors and animation duration
* Implemented with typescript
## Getting started
```js
npm install react-native-element-textinput --save
```
or
```js
yarn add react-native-element-textinput
```
#### Source code demo
- [react-native-template-components](https://github.com/hoaphantn7604/react-native-template-components) A beautiful template for React Native.
### Demo
#### TextInput extends TextInputProps
| Props | Params | isRequire | default |
| ------------------ | -------------------- | --------- | ---------------------------------- |
| mode | default or numeric or password |No | Switch mode textinput |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
#### HashtagInput extends TextInputProps
| Props | Params | isRequire | default |
| ------------------ | -------------------- | --------- | ---------------------------------- |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
| data | String[] | No | Data is a plain array |
| hashtagStyle | ViewStyle | No | Styling for hashtash container view|
| hashtagTextStyle | TextStyle | No | Styling for hashtag text |
| onChangeValue | (string[]) => void | No | Callback that is called when submit value |
| renderHashtagItem | (item, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected |
#### TagsInput extends TextInputProps
| Props | Params | isRequire | default |
| ------------------ | -------------------- | --------- | ---------------------------------- |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
| data | String[] | No | Data is a plain array |
| tagsStyle | ViewStyle | No | Styling for hashtash container view|
| tagsTextStyle | TextStyle | No | Styling for hashtag text |
| onChangeValue | (string[]) => void | No | Callback that is called when submit value |
| renderTagsItem | (item, unSelect?: () => void) => JSX.Element | No | Takes an item from data and renders it into the list selected |
#### AutoComplete extends TextInputProps
| Props | Params | isRequire | default |
| ------------------ | -----------------------------| --------- | ---------------------------------- |
| data | String[] | No | Data is a plain array |
| style | ViewStyle | No | Styling for container view |
| label | String | No | Label for textinput |
| labelStyle | TextStyle | No | Styling for label text |
| placeholderStyle | TextStyle | No | Styling for placeholderStyle text |
| inputStyle | TextStyle | No | Styling for input view |
| textError | String | No | Text error |
| textErrorStyle | TextStyle | No | Styling for text error |
| showIcon | Boolean | No | Show or hide icon clear text |
| iconStyle | ImageStyle | No | Styling for icon clear text |
| focusColor | String | No | Color when focus to textinput |
| fontFamily | String | No | Customize font style |
| renderLeftIcon | () => JSX.Element | No | Customize left icon for textinput |
| renderRightIcon | () => JSX.Element | No | Customize right icon for textinput |
| renderItem | (item:string) => JSX.Element | No | Takes an item from data and renders it into the list |
### Example 1
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { TextInput } from 'react-native-element-textinput';
const TextInputComponent = () => {
const [value, setValue] = useState('');
return (
{
setValue(text);
}}
/>
);
};
export default TextInputComponent;
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
height: 55,
paddingHorizontal: 12,
borderRadius: 8,
borderWidth: 0.5,
borderColor: '#DDDDDD',
},
inputStyle: { fontSize: 16 },
labelStyle: {
fontSize: 14,
position: 'absolute',
top: -10,
backgroundColor: 'white',
paddingHorizontal: 4,
marginLeft: -4,
},
placeholderStyle: { fontSize: 16 },
textErrorStyle: { fontSize: 16 },
});
```
### Example 2
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { TextInput } from 'react-native-element-textinput';
const TextInputComponent = () => {
const [value, setValue] = useState('');
return (
{
setValue(text);
}}
/>
);
};
export default TextInputComponent;
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
height: 55,
paddingHorizontal: 12,
borderRadius: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
inputStyle: { fontSize: 16 },
labelStyle: { fontSize: 14 },
placeholderStyle: { fontSize: 16 },
textErrorStyle: { fontSize: 16 },
});
```
### Example 3
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { TextInput } from 'react-native-element-textinput';
const TextInputComponent = () => {
const [value, setValue] = useState('');
return (
{
setValue(text);
}}
/>
);
};
export default TextInputComponent;
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
height: 55,
paddingHorizontal: 12,
borderRadius: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
inputStyle: { fontSize: 16 },
labelStyle: { fontSize: 14 },
placeholderStyle: { fontSize: 16 },
textErrorStyle: { fontSize: 16 },
});
```
### Example 4
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { HashtagInput } from 'react-native-element-textinput';
const TextInputComponent = () => {
const [value, setValue] = useState([]);
return (
{
setValue(value);
}}
/>
);
};
export default TextInputComponent;
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
height: 55,
paddingHorizontal: 12,
borderRadius: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
inputStyle: { fontSize: 16 },
labelStyle: { fontSize: 14 },
placeholderStyle: { fontSize: 16 },
textErrorStyle: { fontSize: 16 },
hashtagStyle: {
borderWidth: 0,
borderRadius: 16,
padding: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
hashtagTextStyle: {
fontSize: 16,
},
});
```
### Example 5
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { TagsInput } from 'react-native-element-textinput';
const TextInputComponent = () => {
const [value, setValue] = useState([]);
return (
{
setValue(value);
}}
/>
);
};
export default TextInputComponent;
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
paddingHorizontal: 12,
borderRadius: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
inputStyle: {
fontSize: 16,
minWidth: 80,
},
labelStyle: {
fontSize: 14,
position: 'absolute',
top: -10,
backgroundColor: 'white',
paddingHorizontal: 4,
marginLeft: -4,
},
placeholderStyle: { fontSize: 16 },
textErrorStyle: { fontSize: 16 },
tagsStyle: {
borderWidth: 0,
borderRadius: 16,
padding: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
tagsTextStyle: {
fontSize: 16,
},
});
```
### Example 6
```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { AutoComplete } from 'react-native-element-textinput';
const TextInputComponent = () => {
const [value, setValue] = useState('');
return (
{
setValue(e);
}}
/>
);
};
export default TextInputComponent;
const styles = StyleSheet.create({
container: {
padding: 16,
},
input: {
height: 55,
paddingHorizontal: 12,
borderRadius: 8,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
},
inputStyle: { fontSize: 16 },
labelStyle: { fontSize: 14 },
placeholderStyle: { fontSize: 16 },
textErrorStyle: { fontSize: 16 },
});
```
[
](https://www.youtube.com/channel/UCemCdKGzUgbfsLeGFOvbVEw?sub_confirmation=1)