react-native-element-textinput
v2.2.0TypeScript
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
0/weekUpdated 3 years agoMITUnpacked: 249.1 KB
Published by Hoa Phan
npm install react-native-element-textinputreact-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
`
orjs
yarn add react-native-element-textinput
`#### Source code demo
- react-native-template-components A beautiful template for React Native.
$3
#### 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 |
$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 (
style={styles.input}
inputStyle={styles.inputStyle}
labelStyle={styles.labelStyle}
placeholderStyle={styles.placeholderStyle}
textErrorStyle={styles.textErrorStyle}
label="TextInput"
placeholder="Placeholder"
placeholderTextColor="gray"
focusColor="blue"
onChangeText={text => {
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 },
});
`$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 (
style={styles.input}
inputStyle={styles.inputStyle}
labelStyle={styles.labelStyle}
placeholderStyle={styles.placeholderStyle}
textErrorStyle={styles.textErrorStyle}
label="TextInput"
placeholder="Placeholder"
placeholderTextColor="gray"
onChangeText={text => {
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 },
});
`$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 (
value={value}
style={styles.input}
inputStyle={styles.inputStyle}
labelStyle={styles.labelStyle}
placeholderStyle={styles.placeholderStyle}
textErrorStyle={styles.textErrorStyle}
label="Password"
placeholder="Placeholder"
placeholderTextColor="gray"
onChangeText={text => {
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 },
});
`$3
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 (
style={styles.input}
inputStyle={styles.inputStyle}
labelStyle={styles.labelStyle}
placeholderStyle={styles.placeholderStyle}
textErrorStyle={styles.textErrorStyle}
hashtagStyle={styles.hashtagStyle}
hashtagTextStyle={styles.hashtagTextStyle}
placeholder="Hashtag..."
placeholderTextColor="gray"
onChangeValue={value => {
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,
},
});
`$3
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 (
style={styles.input}
inputStyle={styles.inputStyle}
labelStyle={styles.labelStyle}
placeholderStyle={styles.placeholderStyle}
textErrorStyle={styles.textErrorStyle}
tagsStyle={styles.tagsStyle}
tagsTextStyle={styles.tagsTextStyle}
label="TagsInput"
placeholder="Tags..."
placeholderTextColor="gray"
onChangeValue={value => {
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,
},
});
`$3
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 (
data={['hello', 'how are you', 'complete']}
style={styles.input}
inputStyle={styles.inputStyle}
labelStyle={styles.labelStyle}
placeholderStyle={styles.placeholderStyle}
textErrorStyle={styles.textErrorStyle}
label="Auto Complete"
placeholder="Placeholder..."
placeholderTextColor="gray"
onChangeText={e => {
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 },
});
``$3
