How to add custom elements to TextInput left or right

<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”,

[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”.

[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.