React-native-paper: TextInput `left` and `right` elements are not visible

Created on 14 Aug 2020 · 6Comments · Source: callstack/react-native-paper

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)

Screenshot 2020-08-14 at 6 30 15 PM

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

Source

sarmad1995

👍4

Most helpful comment

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;

YahyaBagia on 15 Aug 2020

👍4

All 6 comments

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.

github-actions[bot] on 14 Aug 2020

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;

YahyaBagia on 15 Aug 2020

👍4

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