How can I put an icon inside a TextInput in React Native?

Question

I am thinking of having something like this https://android-arsenal.com/details/1/3941 where you have icon that you press to show password as plaintext, not as dots. However, I was unable to find any custom component that would help me.

I don't want to put too much time on such a minor feature, so I'm asking without having attempted anything yet: Is there a custom component I've missed? If not, is there a simple way to add children to TextInput? Or should I just have TextInput and Touchable side by side?

Answer 1

You can use combination of View, Icon and TextInput like so:

<View style={styles.searchSection}>     <Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>     <TextInput         style={styles.input}         placeholder="User Nickname"         onChangeText={(searchString) => {this.setState({searchString})}}         underlineColorAndroid="transparent"     /> </View> 

and use flex-direction for styling

searchSection: {     flex: 1,     flexDirection: 'row',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#fff', }, searchIcon: {     padding: 10, }, input: {     flex: 1,     paddingTop: 10,     paddingRight: 10,     paddingBottom: 10,     paddingLeft: 0,     backgroundColor: '#fff',     color: '#424242', }, 

Icons were taken from "react-native-vector-icons"

Answer 2

Basically you can’t put an icon inside of a textInput but you can fake it by wrapping it inside a view and setting up some simple styling rules.

Here's how it works:

• put both Icon and TextInput inside a parent View
• set flexDirection of the parent to ‘row’ which will align the children next to each other
• give TextInput flex 1 so it takes the full width of the parent View
• give parent View a borderBottomWidth and push this border down with paddingBottom (this will make it appear like a regular textInput with a borderBottom)
  • (or you can add any other style depending on how you want it to look)

Code:

<View style={styles.passwordContainer}>   <TextInput     style={styles.inputStyle}       autoCorrect={false}       secureTextEntry       placeholder="Password"       value={this.state.password}       onChangeText={this.onPasswordEntry}     />   <Icon     name='what_ever_icon_you_want'     color='#000'     size={14}   /> </View> 

Style:

passwordContainer: {   flexDirection: 'row',   borderBottomWidth: 1,   borderColor: '#000',   paddingBottom: 10, }, inputStyle: {   flex: 1, }, 

(Note: the icon is underneath the TextInput so it appears on the far right, if it was above TextInput it would appear on the left.)