TextInput `left` and `right` elements are not visible

[sarmad1995]

Current behaviour

When the textinput has right or left element, it takes up the space which is required but doesn't show anything.

Expected behaviour

It should show the react element which is provided.

Code sample

https://snack.expo.io/@aashishdhawan/textinput?name=TextInput&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Ftext-input.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20TextInput%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20React.useState(%27%27)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20label%3D%22Email%22%0A%20%20%20%20%20%20value%3D%7Btext%7D%0A%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20setText(text)%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper

I have added a expo snack as well

Screenshots (if applicable)

What have you tried

I tried adding some zIndex to the container, but doesn't work

Your Environment

software	version
react-native-paper	4.0.1
node	v12.16.3
npm or yarn	1.22.4
expo sdk	38

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• expo
• npm

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[YahyaBagia]

You have to pass <TextInput.Icon name={"ICON-NAME"}/> in the left and right props of TextInput.

import * as React from 'react';
import { View } from 'react-native'
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const [text, setText] = React.useState('');
 const element = <TextInput.Icon name="lock-outline" />
  return (
    <TextInput
      label="Email"
      mode='outlined'
      style={{ backgroundColor: 'transparent' }}
      value={text}
      onChangeText={text => setText(text)}
      right= {element}
      left={element}
    />
  );
};

export default MyComponent;

[jsonpoindexter]

Thank you @YahyaBagia! I could not find this in the docs!

[YahyaBagia]

@jsonpoindexter, You're welcome. It isn't well documented yet.

[rizshivalli]

How do i add text to right and left? it only seems to be working with <TextInput.Icon name={"ICON-NAME"}/>

[raajnadar]

@rizshivalli use TextInput.Affix in left or right prop.

[AbdulmalekAlshugaa]

It seems the icons are not showing in my app :

[stephenson080]

@raajnadar how do i listen onPress event on the TextInput.Affix text

[eri-prado]

I changed NAME for ICON

<TextInput
placeholder={placeholder}
value={text}
onChangeText={(text) => setText(text)}
right={<TextInput.Icon icon={'menu-down'} />}
/>