Skip to content

Instantly share code, notes, and snippets.

@mohshbool
Created May 12, 2019 12:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mohshbool/79b4ad70a00488d2460bd4926816aaac to your computer and use it in GitHub Desktop.
Save mohshbool/79b4ad70a00488d2460bd4926816aaac to your computer and use it in GitHub Desktop.
React Native Input Component with Error messages and Icon support
import React from 'react'
import { View, Text, TextInput, StyleSheet} from 'react-native'
export default class Input extends React.Component {
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
clear() {
this.input.clear();
}
isFocused() {
return this.input.isFocused();
}
render() {
return (
<View style={StyleSheet.flatten([styles.container, this.props.containerStyle])}>
<View style={StyleSheet.flatten([styles.inputContainer, this.props.containerStyle])}>
{this.props.icon && (
<View style={StyleSheet.flatten([styles.iconContainer, this.props.iconContainerStyle])}>
{this.props.icon}
</View>
)}
<TextInput
{...this.props}
style={StyleSheet.flatten([styles.input, this.props.inputStyle])}
placeholder={this.props.placeholder || ''}
blurOnSubmit={this.props.blurOnSubmit || true}
returnKeyType={this.props.returnKeyType || "next"}
autoCapitalize={this.props.autoCapitalize || 'none'}
ref={ref => this.input = ref}
enablesReturnKeyAutomatically
placeholderTextColor="#7e7d9a"
/>
</View>
{!!this.props.errorMessage && (
<Text style={StyleSheet.flatten([styles.error, this.props.errorStyle])}>
{this.props.errorMessage}
</Text>
)}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
width: '100%',
paddingHorizontal: 10,
},
inputContainer: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#47466f',
},
input: {
alignSelf: 'center',
color: 'black',
fontSize: 18,
flex: 1,
minHeight: 40,
paddingHorizontal: 15,
},
iconContainer: {
height: 40,
justifyContent: 'center',
alignItems: 'center',
marginLeft: 15,
},
error: {
marginVertical: 6,
marginHorizontal: 8,
fontSize: 12,
fontStyle: 'italic',
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment