A simple TextInput wrapper for material styling in iOS and Android. Customizable styles 👍. Animated label 👍.
npm i --save rn-material-textinput
- Minimalist Example
<CustomTextInput
label="EMAIL"
value={this.state.value}
onChangeText={(value) => this.setState({ value })}
/>
- Full example
import React from 'react';
import {
View
} from 'react-native';
import CustomTextInput from 'rn-material-textinput';
export default class MyExample extends React.Component {
state = {
value: ""
}
render() {
return (
<View style = {{
padding: 10
}}>
<CustomTextInput
label="EMAIL"
value={this.state.value}
onChangeText={(value) => this.setState({ value })}
labelStyle={{
fontFamily: 'ProximaNova-SemiBold',
color: '#9E9E9E',
fontSize: 15,
}}
inputStyle={{
fontFamily: 'ProximaNova-SemiBold',
color: '#2196F3',
fontSize: 18,
}}
focusedBorderBottomColor="#2196F3"
unfocusedBorderBottomColor="#9E9E9E"
/>
</View>
)
}
}
| Name | Usage | Example Value |
|---|---|---|
| label | define the placeholder label for the input which animated upwards when focused | "USERNAME" |
| value | provide value variable and set this with onChangeText | {this.state.value} |
| unfocusedBorderBottomColor | provide custom color for bottom border when not focused | "#DDDDDD" |
| focusedBorderBottomColor | provide custom color for bottom border when focused | "#DDFFFF" |
| labelStyle | give styling to label text | { fontSize: 15, color: "#dsdsdd", fontFamily: "Nunito-Bold"} |
| inputStyle | give styling to input text | { fontSize: 18, color: "#dsgfgd", fontFamily: "Nunito-Bold"} |
| Name | Usage | Example |
|---|---|---|
| handleFocus() | fuction to focus the input programmatically | this._emailInputRef.handleFocus() |
| handleBlur() | fuction to unfocus the input programmatically | this._emailInputRef.handleBlur() |
You can provide other props available to TextInput component. For example
secureTextEntry={true}, keyboardType="number-pad", returnKeyLabel="next"
In cases such as prefilled values in the input, you need to focus the inputs to animate the label upwards. To do this, save reference of the CustomTextInput component and use handleFocus() and handleBlur() functions. For example:
<CustomTextInput
ref={(ref) => this._emailInputRef = ref}
label="EMAIL"
value={this.props.value}
onChangeText={(value) => this.setState({ value })}
/>
Use reference to focus that input
componentDidMount() {
this._emailInputRef.handleFocus()
}