2

The caps lock icon is popping up as an inbuilt feature of React Native - TextInput component. I would like to style this icon so I can apply the right padding to it.

No documentation on this feature, but seems to be turned on when secureTextEntry prop is true for the component.

<DefaultInputField
    id="password"
    placeholder="Enter password..."
    label="Password"
    secureTextEntry=true
/>

enter image description here

William Brochensque junior
  • 2,385
  • 18
  • 35
  • 46
javascript apprentice
  • 23
  • 1
  • 5

1 Answers1

1

If you only want to apply (right) padding you could do the following.

  1. Wrap your input field with a View and apply the border styling to the view. Apply the (right) padding to this View.
  2. Remove the border styling from your input field and make fit perfectly within your view.

If done correctly this will visually yield the same result but you can control the right padding.

Robin de Rozario
  • 81
  • 4