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 custom elements to TextInput left and right

See original GitHub issue

As of v4.0.1, is there any way to add custom elements (icons, other components etc) to the left and right props of TextInput?

Thanks!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:7

github_iconTop GitHub Comments

2reactions
samuelpetrolinecommented, Nov 10, 2020

For anyone needing something like this, this is how I solved:

 <View style={{ display: 'flex', flexDirection: 'row' }}>
      <TextInput right={endComplement} />
      {endComplement && (
        <View
          style={{
            position: 'absolute',
            top: 0,
            bottom: 5,
            right: 16,
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {endComplement}
        </View>
      )}
    </View>
0reactions
arthurpankiewiczcommented, Nov 9, 2020

why was this issue closed? this would be a great feature to implement

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add custom elements to TextInput left or right #2305
I solved the problem using a wrapper View and placing the right item absolute , while simultaneously setting the real right prop to...
Read more >
A complete guide to TextInput in React Native
Learn how to implement React Native's TextInput component, customize it to collect user inputs, and style your fields with React Native ...
Read more >
How to add icon left side in InputText in React Native
You should make use of TextInput.Icon and the left or right property as explained in the documentation here import React from 'react'; ...
Read more >
TextInput · React Native Paper
A component to allow users to input text. ... left. Type: React.ReactNode. right. Type: React.ReactNode. disabled. Type: boolean. Default value: false.
Read more >
Custom Text Input. React Native Beginner Project Course.#7
Custom Text Input. React Native Beginner Project Course.#7Videos for the backend REST API ...
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