How to add icon left side in InputText in React Native

Question

I am creating an App & I am working on the login screen. I need help to add user icon inside of Username field & password icon inside of a password field. I want to make it more beautiful app. & also suggest me other material design websites of react native like react-native-paper

import React from 'react';
import { StyleSheet, Text, View,Alert,Icon} from 'react-native';
import { TextInput,Button,IconButton,Colors,Avatar } from 'react-native-paper';
import { SQLite } from 'expo-sqlite';
const db = SQLite.openDatabase('test.db');

class SignInScreen extends React.Component {

state = {
   UsernameOrEmail  : '',
   Password : '',
}
render() {
  return (
    <View style={{ flex: 1, justifyContent: "center" }}>

        <View style={{alignItems: 'center',backgroundColor:'yellow',height:170}}>
            <Avatar.Image size={180} source={require('../assets/avatar.png')} style={{marginTop:-80}}/>
        </View>
        <TextInput
          label='Username or Email'
          value={this.state.UsernameOrEmail}
          style={[styles.textinput ,{marginTop:-10}]}
          onChangeText={(text) => this.setState({UsernameOrEmail : text})}
        />
        <TextInput
          label='Password'
          value={this.state.Password}
          style={styles.textinput}
          onChangeText={(text) => this.setState({ Password:text}) }
        />


        <Button  icon="person-add"  mode="contained" 
        style={styles.buton}
        onPress={()=>this.props.navigation.navigate("Login")} > Sign In</Button>

        <Button icon="person-add" mode="contained" 
        style={styles.buton}
        onPress={()=>this.props.navigation.navigate("SignUp")} > SignUp</Button>

    </View>
  );
 }
}

export default SignInScreen;


const styles = StyleSheet.create({
 container: {
  backgroundColor: '#fff',
 },
 textinput:{
  marginLeft:5,
  marginLeft:5,
  backgroundColor: 'transparent'
  },
  buton:{
   margin:10,
   backgroundColor: '#f05555'
    }  
 });

Answer 1

If you are using react-native-paper as samples in your question, the solution is as follows. You should make use of TextInput.Icon and the left or right property as explained in the documentation here

import React from 'react';
import {TextInput, } from 'react-native-paper';

function TextInputWithIcon() {
  return (
    <TextInput label="TextInputWithIcon"
      left={<TextInput.Icon name="alert-circle" size={28} color={'red'} />}
      right={<TextInput.Icon name={'cellphone'} size={28} color={'blue'} />}
    />

  );
}

export default TextInputWithIcon;

Answer 2

I had the same problem and did not get it to work until I wrapped the icon component in its own View wrapper component.

function Input(props) {
  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        height: 40,
      }}
    >
      <View
        style={{
          position: "absolute",
          zIndex: 1,
          left: 10,
        }}
      >
        <Icon name="icon-name" size={40} color="#00F" />
      </View>
      <TextInput
        onChangeText={props.onChangeText}
        value={props.value}
      />
    </View>
  );
}

Answer 3

Use this and make a icon in front of the text box. left={<TextInput.Icon name="account" color="white" />}

Answer 4

Though doing that with react-native-paper is super easy by just adding a right prop (or left as you wish) and provide a <TextInput.Icon name='icon_name' /> as value but if you also want to animate the icon say when the data is being sent and you want to show a loading icon, you can do something like this;

import * as React from 'react';
import { View } from 'react-native';
import { TextInput, ActivityIndicator } from 'react-native-paper';

const MyComponent = () => {
  const [animation, setAnimation] = React.useState(false);

  return (
    <View style={{ margin: 10 }}>
      <TextInput
        label="Password"
        right={
          <TextInput.Icon
            name={animation ? '' : 'crosshairs-gps'}
            onPress={() => setAnimation(true)}
          />
        }
      />
      <ActivityIndicator style={animation ? {position:'absolute', right: 0, margin: 20} : {}} animating={animation} />
    </View>
  );
};

export default MyComponent; 

Answer 5

To add an icon to the right side, you could put the Icon and the TextInput inside a View , then this View needs to have flexDirection:'row' ;

<View style={{flexDirection: 'row'}}>
 <Icon />
 <TextInput />
</View>

Now Icon and TextInput are on the same line, you can play with width: x% of the elements, and position in the X and Y axis with justifyContent , and alingItems .

Answer 6

 import React from "react"; import { View, TextInput} from "react-native"; //styles import { styles, placeholder_color } from "./styles"; const RNtextinput = (props) => { const { placeholder = "", value="", secure_text_entry=false, auto_correct=true, keyboard_type="default" , max_length = 200, style={}, input_container_style={}, onChangeText, disabled=false } = props; return ( <View style={[styles.input_wrappers,input_container_style]}> <TextInput value={value} editable={!disabled} style={[styles.input,style]} placeholder={placeholder} secureTextEntry={secure_text_entry} placeholderTextColor={placeholder_color} keyboardType={keyboard_type} underlineColorAndroid="transparent" maxLength={max_length} onChangeText={onChangeText} /> </View> ); } export default RNtextinput; import {StyleSheet, Dimensions} from 'react-native'; const DEVICE_WIDTH = Dimensions.get('window').width; import { theme } from "./../../themes/index"; export const styles = StyleSheet.create({ input : { borderColor : theme.secondary_dark_color, color : theme.secondary_dark_color, marginTop : 15, marginBottom : 15, width : DEVICE_WIDTH - 70, height : 50, marginHorizontal: 20, paddingLeft : 25, paddingRight : 25, fontSize : 20, flexDirection : "row", backgroundColor :theme.background_color, }, input_wrapper : { flex : 1, }, }); export const placeholder_color = theme.primary_color; //// import { StyleSheet } from "react-native"; import { theme } from "./../../themes/index"; export const styles = StyleSheet.create({ page_style : { flex : 1, backgroundColor : theme.light_background_color, width : "100%" }, icon_style : { lineHeight : 40, padding : 20, marginLeft : 10, paddingRight : 10 }, input_tag : { borderRadius:5, borderWidth:2, fontWeight:"bold" }, }) ///// import React from "react"; import { View } from "react-native"; import RNtextinput from "../../components/rn_input"; import Icon from "react-native-vector-icons/FontAwesome5"; import { styles } from "./styles"; const DashBoardSeacrhBar = () => { return ( <View style={{ flexDirection: 'row'}}> <View style={{ width:"80%" , alignContent:"center" }}> <RNtextinput value={""} onChangeText={text => setPassword(text)} placeholder="Search" style={styles.input_tag}/> </View> <View style={{ width:"20%", alignContent:"center" }}> <Icon name="arrow-right" size={40} style={styles.icon_style} /> </View> </View> ) } export default DashBoardSeacrhBar;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>