javascript - How to add icon left side in InputText in React Native

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'
    }  
 });

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'
    }  
 });

Share Improve this question asked Jul 16, 2019 at 6:25 Adeel Ahmed Baloch 8002 gold badges8 silver badges16 bronze badges

Simple example – jank Commented Jul 17, 2019 at 7:30
Yeah like this but I want to do that with react native – Adeel Ahmed Baloch Commented Jul 17, 2019 at 7:37

Add a comment |

7 Answers 7

Sorted by: Reset to default 6

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;

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>
  );
}

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;

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

The original question suggests that the left icon in the TextInput component is for visual or aesthetic purposes only. While some answers recommend using <TextInput.Icon name='account' />, as of the date of my answer, the TextInput.Icon component behaves as a button by default, including an onPress prop and showing a ripple effect upon interaction.

To display an icon on the left side of your TextInput component without it behaving as a button, you can add style={{pointerEvents: 'none'}} to the icon component. This style property disables pointer events on the icon, making it non-clickable.

Here's how you can implement it:

<TextInput
    value={search}
    onChangeText={search => setSearch(search)}
    mode="outlined"
    placeholder="Search"
    left={<TextInput.Icon icon="magnify" style={{pointerEvents: 'none'}} />}
/>

This will ensure that the left icon remains purely aesthetic and does not respond to user interactions.

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.

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add icon left side in InputText in React Native - Stack Overflow

7 Answers 7

与本文相关的文章

评论列表(0)