1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 1x 4x 4x 1x 1x | import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { StyleSheet, Text, View, TextInput, Dimensions } from 'react-native'; import ViewPropTypes from '../config/ViewPropTypes'; const SCREEN_WIDTH = Dimensions.get('window').width; class Input extends Component { focus() { this.input.focus(); } blur() { this.input.blur(); } clear() { this.input.clear(); } render() { const { containerStyle, icon, iconContainerStyle, inputStyle, displayError, errorStyle, errorMessage, ...attributes } = this.props; return ( <View> <View style={[ styles.container, { width: SCREEN_WIDTH - 100, height: 40 }, containerStyle, ]} > {icon && <View style={[styles.iconContainer, { height: 40 }, iconContainerStyle]} > {icon} </View>} <TextInput ref={input => (this.input = input)} underlineColorAndroid="transparent" style={[ styles.input, { width: SCREEN_WIDTH - 100, height: 40 }, inputStyle, ]} {...attributes} /> </View> {displayError && <Text style={[styles.error, errorStyle && errorStyle]}> {errorMessage || 'Error!'} </Text>} </View> ); } } Input.propTypes = { containerStyle: ViewPropTypes.style, icon: PropTypes.object, iconContainerStyle: ViewPropTypes.style, inputStyle: PropTypes.object, displayError: PropTypes.bool, errorStyle: PropTypes.object, errorMessage: PropTypes.string, }; const styles = StyleSheet.create({ container: { flexDirection: 'row', borderBottomWidth: 1, borderColor: 'rgba(171, 189, 219, 1)', alignItems: 'center', }, iconContainer: { justifyContent: 'center', alignItems: 'center', marginLeft: 15, }, input: { alignSelf: 'center', color: 'black', fontSize: 18, marginLeft: 10, }, error: { color: '#FF2D00', margin: 5, fontSize: 12, }, }); export default Input; |