React-native-ui-kitten: Add left icon on Input

Created on 23 Nov 2019 · 11Comments · Source: akveo/react-native-ui-kitten

Issue type

[ ] bug report
[x] feature request

Issue description

Current behavior:

icon is always rendered on the right side of Input

Expected behavior:

There's a way for me to render icon on the left side of Input

Related code:

<Input leftIcon={this.renderLeftIcon} />

Proposal Components

Source

jeloagnasin

👍6

Most helpful comment

@jeloagnasin Alternatively you can do like it. I Hope it will help you.

export const EmailTextBox = () => {
  const [value, setValue] = React.useState('');

  const renderIcon = style => (
    <Image
    style={{position:"absolute"}}
      source={{
        uri: 'https://akveo.github.io/eva-icons/outline/png/128/person-outline.png',
      }}
    />
  );

  return (
    <Input  
      textStyle={{paddingLeft:25}} 
      value={value}
      placeholder="Email"
      icon={renderIcon}
      onChangeText={setValue}
    />
  );
};

harshnavadiya on 22 Jan 2020

🚀1 🎉1

All 11 comments

Hi! 👋 Can you, please, describe the use case? We need to discuss such changes with our design team. Thanks!

artyorsh on 25 Nov 2019

@artyorsh, search icons in search fields are usually placed on the left side.

Screen Shot 2019-11-25 at 7 27 22 PM
Screen Shot 2019-11-25 at 7 30 47 PM

jeloagnasin on 25 Nov 2019

@jeloagnasin Yes, that makes sense. I think we could implement this in future releases

artyorsh on 29 Nov 2019

I'll try to make a PR for this around Dec 22/23.

jeloagnasin on 1 Dec 2019

👍1

rosnaib11 on 15 Jan 2020

I need this too!

ardasatata on 22 Jan 2020

@jeloagnasin Alternatively you can do like it. I Hope it will help you.

export const EmailTextBox = () => {
  const [value, setValue] = React.useState('');

  const renderIcon = style => (
    <Image
    style={{position:"absolute"}}
      source={{
        uri: 'https://akveo.github.io/eva-icons/outline/png/128/person-outline.png',
      }}
    />
  );

  return (
    <Input  
      textStyle={{paddingLeft:25}} 
      value={value}
      placeholder="Email"
      icon={renderIcon}
      onChangeText={setValue}
    />
  );
};

harshnavadiya on 22 Jan 2020

🚀1 🎉1