¿Cómo puedo poner un icono dentro de un TextInput en React Native?

Solución:

Puede usar una combinación de View, Icon y TextInput así:

<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>

y usa flex-direction para peinar

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',
},

Los iconos se tomaron de “react-native-vector-icons”

Básicamente, no puede poner un ícono dentro de un textInput, pero puede simularlo envolviéndolo dentro de una vista y configurando algunas reglas de estilo simples.

Así es como funciona:

• poner ambos Icono y Entrada de texto dentro de una vista de los padres
• colocar flexDirection del padre a ‘hilera’ que alineará a los niños uno al lado del otro
• dar TextInput flex 1 por lo que toma todo el ancho de la vista principal
• dar vista de los padres a borderBottomWidth y empuja este borde hacia abajo con fondo acolchado (esto hará que parezca un textInput normal con un borderBottom)
  • (o puede agregar cualquier otro estilo dependiendo de cómo desee que se vea)

Código:

<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>

Estilo:

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

(Nota: el icono está debajo de TextInput, por lo que aparece en el extremo derecho, si estuviera encima de TextInput, aparecería a la izquierda).

Esto me funciona en ReactNative 0.60.4

Vista

<View style={styles.SectionStyle}>
    <Image
        source={require('../assets/images/ico-email.png')} //Change your icon image here
        style={styles.ImageStyle}
    />

    <TextInput
        style={{ flex: 1 }}
        placeholder="Enter Your Name Here"
        underlineColorAndroid="transparent"
    />
</View>

Estilos

SectionStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderWidth: 0.5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5,
    margin: 10,
},
ImageStyle: {
    padding: 10,
    margin: 5,
    height: 25,
    width: 25,
    resizeMode: 'stretch',
    alignItems: 'center',
}

---

---

Utiliza Nuestro Buscador