CODEWITHSUNDEEP
javascriptjsonreact-native
Adeel Ahmed Baloch
Adeel Ahmed Baloch

Reputation: 800

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

Upvotes: 5

Views: 19507

Answers (7)

Ken
Ken

Reputation: 663

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.

Upvotes: 0

Bezlin
Bezlin

Reputation: 59

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

Upvotes: 0

Irfan wani
Irfan wani

Reputation: 5094

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;

Upvotes: 1

samuelweckstrom
samuelweckstrom

Reputation: 229

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

Upvotes: 6

Juan Pablo Moreno Mart&#237;n
Juan Pablo Moreno Mart&#237;n

Reputation: 620

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;

Upvotes: 6

Sachin Kalonia
Sachin Kalonia

Reputation: 13

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>

Upvotes: -2

Josep Vidal
Josep Vidal

Reputation: 2671

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.

Upvotes: -1

Related Questions