question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add left icon on Input

See original GitHub issue

Issue type

  • bug report
  • 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} />

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:11

github_iconTop GitHub Comments

2reactions
harshnavadiyacommented, Jan 22, 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}
    />
  );
};
1reaction
jeloagnasincommented, Dec 1, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Put icon inside input element in a form - html - Stack Overflow
Create the container surrounding the input and icon. · Set the container position as relative · Set the icon as position absolute. ·...
Read more >
CSS to put icon inside an input element in a form
To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To...
Read more >
How to add icons inside input elements in HTML - Educative.io
In HTML, icons are added with the <i> tag. For it to be added inside the input elements, it must be added between...
Read more >
How To Create a Form with Icons - W3Schools
How To Create an Icon Form. Step 1) Add HTML: Use a <form> element to process the input. You can learn more about...
Read more >
Adding Icons inside and outside of input text in Forms
Icon appears inside input text in form · Icon appears to be outside of the input text.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found