React-native-paper: How to add custom elements to TextInput left or right

[carltian]

<TextInput // label={label} value={val} style={this.styles.TextInput} placeholder={placeholder} left={ <TextInput.Icon color="#8C8C8C" icon="lock" size={30} /> } right={ <Button mode="outlined" disabled={hasPhone} compact> "confirm" </Button> } secureTextEntry={isPwd} onChangeText={(text) => this.setText(text, filed) } />
Left can be show Element, but right can't.

"react-native": "0.63.2",
"react-native-paper": "^4.1.0",
"react-native-vector-icons": "^7.1.0",

[github-actions[bot]]

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

• react-native
• react-native-paper
• react-native-vector-icons

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]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.2, latest: 0.63.3)
• react-native-paper (found: 4.1.0, latest: 4.2.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[arthurpankiewicz]

bump

[STonkoshkur]

The same problem. 'Right' can render only TextInput.Icon or TextInput.Affix and nothing else. Looks like TextInputAdornment component deny that. Can it be fixed?

"react-native": "0.63.2",
"react-native-paper": "4.3.1",
"react-native-vector-icons": "^7.1.0",

[RichardLindhout]

Left and right are supported: https://snack.expo.io/U!Gg8T2aQ

Only TextInput.Icon and TextInput.Suffix are supported not a Button component and I never see it in the Material Design Spec
https://material.io/components/text-fields#filled-text-field

It will also take a lot of space on mobile, maybe search for an alternative layout with a Button below the TextInput instead of inside the TextInput.

[arthurpankiewicz]

https://material-ui.com/components/text-fields/#input-adornments

You've never seen a button icon to reveal the password in a TextInput?

[RichardLindhout]

Yes, but you can do that with react-native-paper I updated my Snack
https://snack.expo.io/3WcRzyask

<TextInput left={<TextInput.Affix text="hello"/>} right={<TextInput.Icon icon="password" onPress={()=>alert('show password')}/>} />

[RichardLindhout]

If it fixed it for you can you close the issue?

[Trancever]

Thanks @RichardLindhout for providing the example 👍 We should update TextInput.Icon and TextInput.Affix docs, I will create a separate issue

[kaime]

Why don't just allow any component to be passed as left or right? I'd like to place a non-clickable icon on the left of a <TextInput>:

But it won't work because the TextInputAdornment function won't render any element that's not an AdornmentType.Icon or an AdornmentType.Affix:

if (type === AdornmentType.Icon) {
  return (
    <IconAdornment ... />
  );
} else if (type === AdornmentType.Affix) {
  return (
    <AffixAdornment ... />
  );
} else {
  return null;
}

If a just use a <TextInput.Icon> without an onPress prop, then I get an <IconButton>, which will receive cursor events and show a ripple when tapped.

[gmonte]

I resolved the problem using the render prop and styled-components, like that:

import { TextInput } from 'react-native-paper'
import styled from 'styled-components/native'

const InputContainer = styled.View`
  flex-direction: row;
`
const Input = styled.TextInput`
  flex: 1;
`
const AdornmentContainer = styled.View`
  align-items: center;
  justify-content: center;
  padding: 0 10px;
`

const CustomInput = ({ left, right, ...props }) => (
  <TextInput
    { ...props }
    render={ (inputProps) => (
      <InputContainer>
        {left && (
          <AdornmentContainer>
            {left}
          </AdornmentContainer>
        )}
        <Input { ...inputProps } />
        {right && (
          <AdornmentContainer>
            {right}
          </AdornmentContainer>
        )}
      </InputContainer>
    ) }
   />
)

Now I am able to render anything as "left" and "right".